Cara Memasang Featured Slide Show

Edisi Revisi

Ini adalah salah satu Slide Show paling populer di dunia maya yang masing-masing menawarkan perbedaan. Yang menyedihkan adalah bahwa banyak jang tidak dapat berjalan. Berpayah-payah browsing dan mencoba, seringkali yang didapat cuma frustasi dan stres. Entah mengapa. Tapi, don-wori, yang saya sajikan kali ini adalah slider yang pada awalnya saya peroleh dari www.berryhs.com.

Tapi ini bukan sekadar kopas. Saya telah mencobanya, dan dapat berjalan dengan baik. Anda dapat melihat, sample image sudah saya ganti dengan image yang di ambil dari blog saya (yang nantinya anda bisa ganti dengan image pilihan Anda sendiri)

Jika cara memasang slide show ini anda ikuti dengan seksama, ternyata tidak dapat berjalan, mungkin telah terjadi conflict dengan kode jquery yang sebelumnya sudah terpasang. Jika demikian, Anda harus menghapus salah satu yang tingkat prioritasnya rendah. Maka pertimbangkan mana yang lebih penting. Slide show kali ini daku menggunakan jquery.min.js dari ajax.googleapis.com

Demo Slider Show

• 
• 
• 
• 

• JUDUL ARTIKEL 01

  Bidang text, ganti img src=dengan alamat gambar anda

Cara memasang Slide Show di template

1. Masuk ke Akun/dashboard Anda
2. Pilih Template, lalu Edit HTML.
3. Backup dulu untuk menjaga kemungkinan buruk.
4. Temukan kode seperti ini: ]]> </skin>
5. Copy kode text-area 01 di bawah ini. Klik "Copy-all" untuk memastikan tidak ada text yang tercecer. Kemudian, paste-kan sebelum kode ]]> </skin>

/* --CSS Sebizaku Slider01--*/ ul.slideshow { margin: 0; padding:0; list-style:none; width: 550px; /*--ukuran lebar frame slide--*/ height:300px;/*--ukuran tinggi frame slide--*/ overflow:hidden; position:relative; border: 0px solid #ccc; font-family:Arial,Helvetica,Trebuchet MS,Verdana; } ul.slideshow li {position:absolute;left:0;right:0;} ul.slideshow li.show {z-index:500;} ul img { width: 100%; /*--ukuran gambar--*/ height: 300px; /*--ukuran gambar-- */ border:none; } #slideshow-caption { width: 100%; /*--bidang text--*/ height:80px; position:absolute; bottom:0; margin-right: 10px; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container {padding:5px 10px;z-index:1000;} #slideshow-caption h3 { margin:0;padding:0; font-size:16px; /*ukuran font judul post*/ } #slideshow-caption p {/*ukuran font text*/ margin:5px 0 0 0; padding:0; } /* --End CSS Sebizaku Slider 01-->

6. Silahkan copy kode di text area 02, di bawah ini, lantas letakkan di atas kode: </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script>

7. Jika sudah ... Save/Simpan.
8. Masuk ke: Tata Letak
9. Klik: tulisan Add New Widget
10. Pilih HTML/Javascript, kemudian letakkan kode berikut:

<!--widget, img src=".....", ganti dengan image dari blog anda--> <ul class="slideshow"> <li><a href="ALAMAT POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh588_uYK4B8j6zSD03spmpLQ1ya35fyq3B6FuaK2FQwnXAkBozqPIVUOlFIn5RAGO6d0MLS1ppgmM_bl_rp8gYBl02JjsChUtzBBu3TqX08_aPbcVrLJ4PuTlFh1vfKhMyQKKD2P9SArQ/s1600/nature01.jpg" title="JUDUL ARTIKEL 01" alt="Bidang text, ganti img src=dengan alamat gambar anda" /></a></li> <li><a href="ALAMAT POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUPW_Zjzq5KjDcWu7xhiq5M38kZdDiG6sD_g5hOyMq69JerMJD9I7J3syeL5sywaNCve6LJu6GpIZEkgcfFPRa0J7YTEiMEZO4lLgB3-Mvr-90pTAQDEfnS-ZSEwsIUfR7NemE2nHuAs/s1600/nature02.jpg" title="JUDUL ARTIKEL 02" alt="Bayangan selalu lebih besar dari aslinya, apapun itu! Gagal maupun sukses." /></a></li> <li><a href="ALAMAT POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgH2Jw9I1s9wwv-pGT5LuGVDwUZnhuXk00-xQwv1TUAOchE09NfPMCJolWZyyOCPYfS1L0AU2YLiDUepT4Pbt55U6_hJkFttgvjz5R_HIGGoR7a12XmY9qI80YCpjpoVpsX1pSndXKhA/s1600/nature03.jpg" title="JUDUL ARTIKEL 03" alt="Memang baik menjadi orang penting, tetapi lebih penting menjadi orang baik." /></a></li> <li><a href="ALAMAT POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjywz7LWxVppIoeAu3y2fzr7Jkifu40BbFKWNXoSvS2sMzID-NyHeBs-yzxJ5jORdVqehhe1XP650cFxfewWCHFHCsTB3MPrqIcXqR5top2oN2xMuGvgDYSHPn5JZ8Ujw7SKz47VygSC5M/s1600/nature04.jpg" title="JUDUL ARTIKEL 04" alt="Tak seorang pun dapat membuat Anda sakit hati, kecuali Anda menghendakinya." /></a></li> </ul>

Jika memasang Slider Show sudah benar, lakukan Ubah Suai

Dengan langkah-langkah ini, seharusnya Slider Anda langsung bekerja. Tinggal mengubah:
1. Alamat URL Posting Anda, a href:"..." dsb
2. Alamat URL gambar/image, img src" http..." dsb
3. Jika perlu mengubah ukuran/dimensi slide, silahkan dengan: width dan height. Jika Anda tentukan "width: 100%" lebar slide akan menyesuaikan diri dg kolom yang ada.

Daku sudah lakukan revisi. Kayaknya daku sudah berhati-hati. Anda mau bantu lebih menyempurnakan lagi? Tentu saja ..terimakasih buanyaak. Semoga lebih bermanfaat. Succes4U!

Artikel Terkait:

Slide Show

• Slide Show Mudah tapi Canggih 06
• Cara mudah memasang Slide Show 05
• Membuat Slide Show Maco 04
• Cara Memasang Slide Show Blogspot 03
• Cara Membuat Slide Show Blogspot 02