SLIDER SHOW


  • Edit html blog...

  • Copy kode dan pastekan sebelum kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.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>




<style type="text/css">


ul.slideshow {


list-style:none;


width:600px;


height:240px;


overflow:hidden;


position:relative;


margin:0;


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>


Masuk widget (HTML/JavaScript) paste kode di bawah ini :


<ul class="slideshow">




<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXkR0FQtYoCRGVIssqZZ8SPzTEYLOGm97gq7LC1JcOJuo4XoEwM6VLxfzJ_L2GrjONIefTd_UWs_Tmogo8hY9oOKOl335QMYmZlq1VYrM6ePTvCI47lz7uJNbI47ULMPq6pjwuRfXbOCs/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>




<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkoix5JLu208pLvXhGvjJsVe-27OB5QeqtOI35tKXyR2g9WROUFh4KZgk-dlZyTEalT36ic-XmfNSc-_kqAmpG-Ps_sRpuqKwfsWhiwFks2-Pj2D1cqvHDt0z7BFvDxDv82JPHEzGr_Ds/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>




<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8IwH5nwtN9QM1MNHRBzwI-zCpvOwHjyeJnxOsqwZAm7c5Z20Dw_MhljTj8slie2Q6-YHak7NaD1MlP9q4huxH7rJ32mOPh40tkvn0W1T_-pB_5TXoPqFepJPEgdbALkNt2Qb4efQfRP0/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>




<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3yHTZW5itLyTwWEBiM3qqWmZPYZNqQXvUglaKJ0JiyL64q75XrW1qcUa-luPXkrnvJQjYg8LCCIQR2QPej4bDJNoXlrcueQ7B9JpT5w-wHVovJKgdwoJb5b-c0myWPI8eqP7T9ls0EVc/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>




</ul>