Langkah Membuat Slide Show di Blog

slide show ini sudah terpasang sejak awal agustus 2011. alasan kenapa aku harus hapus slide show ini karena load blog sedikit lama walaupun source codenya sudah aku kompress sampai dengan 53Kb akan tetapi aku merasa masih berat untuk load blog nya. siapa tau nantinya ada sobat blogger yang ingin memakai slide show di blognya maka bisa melihat tutorial ini, disamping itu  jika kecepatan rata2 internet di indonesia sudah cepat yya Ihsan Weblog akan mempertimbangkan untuk memasangnya kembali. oke langsung aja ke tkp:

1. copykan kode berikut diatas </head>
<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(6000);});
function slideShow(speed) {
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
$('ul.slideshow li').css({opacity: 0.0});
$('ul.slideshow li:first').css({opacity: 1.0});
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
var timer = setInterval('gallery()',speed);
$('ul.slideshow').hover(
function () {clearInterval(timer);},
function () {timer = setInterval('gallery()',speed);});}
function gallery() {
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);});
current.animate({opacity: 0.0}, 1000).removeClass('show');}
//]]>
</script>
<style type='text/css'>
ul.slideshow {list-style:none;width:725px;height:340px;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:725px;height:340px;border:none;}
#slideshow-caption {width:725px;height:60px;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>
2. Add new Html/Javascript Widget dan copykan kode berikut :
<ul class="slideshow">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfER-AS_ob3cw8Ggv2W19D9D_UDfUmtR8FRro5CH3ULZyPINVQAI6-KxRs6lryX_0y2SeNQ3UtYxXvw9l6hyphenhyphen88sRRDnDOFXvhP7pMqgywebcuE5ueWYF4LdRouik9SDUvQVAFIjh4vIWU/s726/fb_bl_sheep1.gif" title="Welcome To Ihsansaidi Weblog" alt="Shaun-The-sheep" /></a></li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKwVywdrOpp2LoyHuni6dmvZI34NE5I13rOHz5nqTwWCkFV-WJGDygUS303H3THhC_ZNVDi07__pfuHxrBugfO2_glbnPhwpUDnMwQITAeOnjruu8dTJ2igeCQYakDfLdijY5EpIN9KY/s726/blogger-tips.jpg" title="4 Software Wajib Buat Editing Blogger Template" alt="Beberapa tips yang ingin mengedit template blogger" /></a>
</li></ul>
***rubah source image dan tulisan “bewarna merah” sesuai kebutuhan blog sobat
3. Done!
jika memiliki pertanyaan silahkan di comment box :) thanks ..
Di salin dari:  http://ihsansaidi.blogspot.com/2012/03/2-langkah-membuat-slide-show-di-blog.html