Info Toko Surya62: Membuat Menu JCarousel di Blogspot

Membuat Menu JCarousel di Blogspot

Sahabat Bloggers yang berbahagia, berikut ini akan saya bagikan bagaimana menerapkan menu carousel di blogspot untuk menampilkan posting terbaru milik kita disertai gambar dengan sedikit keterangan dapat melayang dan berputar. Anda dapat memodifikasi CSSnya sesuai dengan penampilan blog milik Anda.

Menu ini dijalankan dengan jquery versi 1.7. Jika dalam template Anda sudah ada, maka tidak perlu ditambahkan, karena akan terjadi kegagalan. Perlu ditambahkan jquery aplikasinya yaitu featureCarousel.js dan featureCarousel.min.js yang dapat ditempatkan bersama style css-nya, menjadi satu paket dapat Anda masukkan dalam penambahan konfigurasi widget Anda dari menu tataletak di blogspot milik Anda. Silahkan pelajari terlebih dahulu script berikut ini yang saya tampilkan sesuai keadaan template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" /> <meta name="created" content="Rabu, 13 Jun 2012 05:36:36 GMT" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script src="http://infotokosurya62.googlecode.com/files/jquery-1.7.min.js"></script> <script src="http://infotokosurya62.googlecode.com/files/jquery.featureCarousel.js"></script> <script src="http://infotokosurya62.googlecode.com/files/jquery.featureCarousel.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var carousel = $("#carousel").featureCarousel({ // include options like this: // (use quotes only for string values, and no trailing comma after last option) // option: value, // option: value }); $("#but_prev").click(function () { carousel.prev(); }); $("#but_pause").click(function () { carousel.pause(); }); $("#but_start").click(function () { carousel.start(); }); $("#but_next").click(function () { carousel.next(); }); }); </script> <style type='text/css'> /******************** * FEATURE CAROUSEL * ********************/ #carousel-container { position:relative; padding:2px; background-color:#CCC; } #carousel { border:2px solid #fff; height:300px; background-color:#CCC transparent; position:relative; font-size:12px; font-family: Arial; } #carousel .carousel-image { height:230px; width:400px; box-shadow: 6px 6px 10px #818181; -webkit-box-shadow: 6px 6px 10px #818181; -moz-box-shadow: 6px 6px 10px #818181; border:0; display:block; } #carousel .carousel-feature { position:absolute; top:-1000px; left:-1000px; border:2px solid #5d5d5d; cursor:pointer; } #carousel .carousel-feature .carousel-caption { position:absolute; bottom:0; width:100%; background-color:#000; } #carousel .carousel-feature .carousel-caption p { margin:0; padding:5px; font-weight:bold; font-size:12px; color:white; } #carousel .tracker-summation-container { position:absolute; color:white; right:50px; top:212px; padding:3px; margin:3px; background-color:#000; } #carousel .tracker-individual-container { position:absolute; color:white; right:95px; top:218px; padding:0; margin:0; } #carousel .tracker-individual-container li { list-style:none; } #carousel .tracker-individual-container .tracker-individual-blip { margin:0 3px; padding:0 3px; color:#000; text-align:center; border:1px solid #5d5d5d; background-color:#DDD; } #carousel .tracker-individual-container .tracker-individual-blip-selected { color:#FFC600; font-weight:bold; border:1px solid #fff; background-color:#000; } #carousel-left { position:absolute; bottom:33px; left:200px; cursor:pointer; } #carousel-right { position:absolute; bottom:33px; right:200px; cursor:pointer; } </style> </head> <body> <div id="carousel-container"> <div id="carousel"> <div class="carousel-feature"> <a href="http://s-surya62.blogspot.com/2012/06/download-mp3-cutter-all.html"> <img class="carousel-image" alt="Image Caption" src="http://s19.postimage.org/sisskrl37/Putra_putriku.png"></a> <div class="carousel-caption"> <p>Putra-putriku sedang santai di Kebun Binatang Yogyakarta </p> </div> </div> <div class="carousel-feature"> <a href="http://s-surya62.blogspot.com/2012/06/latihan-bahasa-arab-kelas-xi-smk.html"> <img class="carousel-image" alt="Image Caption" src="http://s19.postimage.org/fddaenr7j/Mabh_Myo.png"></a> <div class="carousel-caption"> <p>Leluhurku si Abah Myo sedang berulang tahun k2 98 tahun 2011 </p> </div> </div> <div class="carousel-feature"> <a href="http://s-surya62.blogspot.com/2012/06/baterai-lithium-ion-dan-fuel-cell.html"> <img class="carousel-image" alt="Image Caption" src="http://s19.postimage.org/bjju5i9vj/rahmaku.png"></a> <div class="carousel-caption"> <p>Putriku yang emut-emut sedang beraksi dan mejeng </p> </div> </div> <div class="carousel-feature"> <a href="http://s-surya62.blogspot.com/2012/06/latihan-soal-kkpi-kelas-xi-smk.html"> <img class="carousel-image" alt="Image Caption" src="http://s19.postimage.org/qtjpcp5dr/tradisi_Maleman.png"></a> <div class="carousel-caption"> <p>Tradisi grebeg Maulud Nabi Muhammad SAW tahun 2433 H di Masjid Paitan Kemiri Purworejo </p> </div> </div> <div class="carousel-feature"> <a href="http://s-surya62.blogspot.com/2012/06/latihan-soal-kkpi-kelas-x-smk.html"> <img class="carousel-image" alt="Image Caption" src="http://s19.postimage.org/vth5knb0f/tradisi_Maleman_Mulud.png"></a> <div class="carousel-caption"> <p>Tradisi grebeg Maulud Nabi Muhammad SAW tahun 2433 H di Masjid Paitan Kemiri Purworejo </p> </div> </div> </div> <div id="carousel-left"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div> <div id="carousel-right"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div> </div> </body> </html>

Silahkan Anda edit URL gambar milik Anda dengan diskripsi gambar yang singkat. Anda juga harus mengedit URL situs Anda dari postingan yang baru. Diharapkan gambar yang sesuai dengan judul gambar. Perhatikan struktur templatenya khususnya tag <head>, </head> <body> </body>. Jika Anda bermaksud memasangnya dalam konfigurasi penambahan widget, silahkan pilih penempatannya dan pindahkan script js-nya beserta css-nya lengkap satu paket. Hal ini dapat untuk megatasi gagalnya operasional jquery pada blogspot.

Demikian info dari saya semoga bermanfaat. Sukses buat Anda dan berikan komen jika ada hasil baiknya.
Wassalamu'alaikum warakhmatullahi wabarakatuh.

Sumber:
http://github.com.

Bergabunglah bersama kami dengan para Mentor Bisnis ternama !

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Balkblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone.

Komunitas dan Affiliasi | Promosikan Halaman Anda Juga

1 comment:

UnknownTuesday, October 01, 2013 9:33:00 PM
:W

Terimakasih Anda telah silaturakhim keblog ini dengan misi didaktik metodik pembelajaran di SMK, sehingga setiap saat dapat berubah sesuai kompetensi Pembelajaran. Silahkan berikan komentar yang sangat berharga demi kemajuan blog ini. Sehubungan dengan hak cipta apabila ada konten Anda disini dengan rendah hati saya mohon ijin memuatnya dan jika tidak berkenan mohon konfirmasinya, Mari berbagi untuk info yang manfaat dan belajar sepanjang hayat, salam sukses buat Anda dan keluarga!!! Klik gambar emoticon berikut jika Anda ingin menggunakannya.