MEMBUAT SLIDESHOW SEDERHANA PADA BLOG

Slideshow, mungkin ketika sobat blogger melakukan browsing pernah melihat gambar yang berubah ubah dengan keren tampak di halaman awal sebuah website atau sebuah blog. Jangan kuatir !! saya udah dapat infonya dan sudah dipraktekin, cuman gambar tutorialnya tidak bisa saya ikutkan(sorry don't worry strawberry) takut bisa berpengaruh pada loading blog ini.Nah !! kali ini sobat blogger juga bisa membuatnya. Caranya adalah sebagai berikut :

1. Masuk ke edit html blog..
2. Cari Kode </head>
3. Copy kode di bawah ini dan pastekan sebelum kode  </head>

amp;lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'&gt;&lt;/script&gt;


&lt;script type='text/javascript'&gt;
//&lt;![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('&lt;li id=&quot;slideshow-caption&quot; class=&quot;caption&quot;&gt;&lt;div class=&quot;slideshow-caption-container&quot;&gt;&lt;h3&gt;&lt;/h3&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/li&gt;');


//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

SELAMAT MENCOBA! ...