Featured Content Image Slideshow

Udah berapa hari y ga update tentang Blogging, maaf y untuk para pengunjung setianya oketrik kalau nunggu2 tentang postingan blogging, bukannya saya malas, tapi akhir2 ini sibuk banget. Sebagai gantinya sekarang saya akan memberikan post tentang blogging yang berjudul Featured Content Image Slideshow, trik ini terdapat pada template buatan saya yaitu okezine blogger template, kalau mau lihat demonya silahkan ke link itu dan klik demo.

1. Login ke blogger
2. masuk ke Rancangan >> Elemen Halaman
   
   
3. Tambah kan sebuah gadget (pilih tempat yang anda suka tapi lebar)
   
   
4. Pilih yang HTML/Javascript dan taruh kode di bawah ini di dalamnya
   
   
   <style>
   ul.slideshow{list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:20px 10px 0 5px; padding:0; 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:600px; height:240px; border:none}
   #slideshow-caption{width:600px; height:70px; position:absolute; bottom:0; left:0; 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}
   #slideshow-caption p{margin:5px 0 0 0; padding:0}
   </style>
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
   
   <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>
   
   <ul class='slideshow'>
   
   <li><a href='http://okezine.blogspot.com/2010/12/ini-lokasi-penjualan-tiket-semifinal.html'><img alt='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis...' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgPsqPK0Cf8h0OdHQLOtf1lWMoqb6q4VrI-mJzU3l8C41vqQQtsVo_iRepF5qEyQZ0E6I1_dAo2o10zufEAMmGm7GRHHimITOTTbm5Upz4EYGouxvyM0Sse_XwU-HkYU-UeyMVFDP8mY/s1600/101058_tiket-asli--atas----tiket-palsu_300_225.jpg' title='Tickets ; Lorem Ipsum'/></a></li>
   
   <li><a href='http://okezine.blogspot.com/2010/12/merah-putih-wajib-waspadai-filipina.html'><img alt='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis...' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyaGZn3m2OetDiU9l6ocsp0BnwqztoPku9jpVVn6a0uf1KYYEuYq_V2WwQ8Bz6ADMhSraJiSymzm-i2W9GRMUXKkxW5OkKY7sKKsSkdJFO1S5yegyHgzsV7daChmGODC_2aqBnGOI-D2Q/s1600/F3PTPGmN27.JPG' title='Indonesia VS Philipina'/></a></li>
   
   <li><a href='http://okezine.blogspot.com/2010/12/booth-segera-tinggalkan-laos.html'><img alt='Pelatih asal Inggris, David Booth tak lama lagi akan meninggalkan timnas Laos.' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXgZelK6CMTCkjbQwEVdvl_tRk-1_nK-PG6DtdqkQhR8-1TJkO1k-VvWzYynj2E4-09cZ7cRhhB8bWSLKbXzU2rYhPRC5gDFHxRaL4kOIlv2heG-VF7SZLT3wlOS36vdhWa_1xbkkLHMs/s1600/100998_irfan-haarys-bachdim-berhadapan-dengan-penjaga-gawang-laos_300_225.jpg' title='Boot Tinggalkan Laos'/></a></li>
   
   <li><a href='http://okezine.blogspot.com/2010/12/chelsea-manfaatkan-laga-mu-lawan.html'><img alt='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis...' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD934yso2qGKbbSvTu9gVP8ppmcMto17sPeWUh5XCALX313lKptWkHhb3c_nsBMYwMMvkaXDkL7WHbjrPu7fCr8baCDKpc3lSFzo24zpP3bkhC6-GWE6os1S3bP6aSpKexwgp3Rxv30Tc/s1600/56800_john_terry_300_225.jpg' title='Lorem Ipsum bla bla bla'/></a></li>
   
   </ul>
   
   Penjelasan :
   
   • kode yang berwarna Hijau, ganti dengan alamat url postingan anda
   • kode yang berwarna kuning, ganti dengan deskripsi atau penjelasan dari postingan anda
   • kode yang berwarna biru, ganti dengan alamat gambar postingan anda
   • kode yang berwarna coklat, ganti dengan judul postingan anda
5. Setelah itu simpan dan lihat hasilnya
   
   

Mudah bukan? trik baik untuk blog yang berisikan berita dan informasi dan trik ini membuat daya tarik kepada pengunjung agar lebih betah di blog anda, namun trik ini agak sedikit membuat blog anda berat karena menggunakan script javascript dan jquery. mungkin ini saja yang bisa saya sampaikan. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg