Belajar blogging : 2 Langkah Membuat Slide Show Di Blog

Slide show bisa menyebabkan loading blog sedikit lama. Bagi anda yang ingin memakai slide show di blognya maka bisa melihat tutorial ini. Mungkin  jika kecepatan rata-rata internet di indonesia sudah semakin cepat saya sendiri akan mempertimbangkan untuk memasangn di blog ini.

Berikut langkah-langkahnya :

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://lh4.googleusercontent.com/-cyXG7EqAtsw/Ty7YPcVw2LI/AAAAAAAABPs/hcLl-UOugWE/s726/fb_bl_sheep1.gif" title="Welcome To Ihsansaidi Weblog" alt="Shaun-The-sheep" /></a></li>
<li>
<a href="#"><img src="https://lh3.googleusercontent.com/-zwMKVwRhaMw/TzagnkoGXsI/AAAAAAAABTM/ieMhkS91a2U/s726/blogger-tips.jpg" title="4 Software Wajib Buat Editing Blogger Template" alt="Beberapa tips yang ingin mengedit template blogger" /></a>
</li></ul>

***ubah source image dan tulisan “bewarna merah” sesuai kebutuhan blog anda

3. Done!