2 Langkah Membuat Slide Show Di Blog

Hari ini 3Maret Ihsan Weblog kehilangan salah satu fitur unggulannya yaitu Header slide show. 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. sebelum aku hapus yya alangkah baiknya jika aku membackup data dulu dan langsung di posting Ihsan Weblog :D . 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/AVvXsEgSzFZwIiu5nPB7ue2tkrQ-x7f0VxthGdeAoahAmymAQaIlu6rzLdYs353BzLXskSVT1_K3wZwqqE6pL4BhlXQP1TGHPqQh_B2riW6HKklqrqIxcYMpXpxfBZaMTKUu3Dn-UPMcANK07G8/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/AVvXsEiGAihYAC7K31yZfZhAiR9ECBKcG1kXXk38uhYaYOwuZqoFSfSyYksCgmdw6AynKoDCb_s6jdkG9w2048UE5tqPIWBitC8k0oEdPFats0xj-l2PlF2w5762uYUnunzUAsp1ufCu1avDrxY/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 ..
Tags : tutorial membuat slider di blog,