Cara Membuat SlideShow Di Header Blog Anda

Bagi para blogger yang ingin memperindah blog pribadi nya dengan memiliki header yang dapat berubah-ubah dengan berbagai gambar atau tampilan header nya menjadi SlideShow, dapat mengikuti langkah-langkah yang ada di bawah ini :

1. Login ke blogger.com
2. Pilih Theme atau Tema
3. Lalu pilih edit HTML
4. Cari kode </head>
5. Kemudian copy code script yang ada dibawah dan pastekan tepat diatas 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:950px;

height:250px;

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:950px;

height:250px;

border:none;

}

#slideshow-caption {

width:980px;

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>

NB :
1. width dan height pada ul.slideshow adalah ukuran dari SlideShow
2. width dan height pada ul img adalah ukuran dari gambar yang kalian pasang

6. Kemudian copy paste kode dibawah ini dan letakkan di gadget header pada layout atau tata letak.

<ul class="slideshow">
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 1 DISINI" alt="MASUKAN Description POST 1 DISINI" /></a></li>
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 2 DISINI" alt="MASUKAN Description POST 2 DISINI" /></a></li>
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 3 DISINI" alt="MASUKAN Description POST 3 DISINI" /></a></li>
<li><a href="#"><img src="MASUKAN URL GAMBAR DISINI" title="MASUKAN featured post 4 DISINI" alt="MASUKAN Description POST 4 DISINI" /></a></li>
</ul>

Setelah berhasil mengikuti langkah-langkah yang telah dijelaskan pada artikel ini tentang Cara Membuat SlideShow Di Header Blog Anda kalian bisa sesuka hati menganti gambar dan ukuran SlideShow pada Header blog kalian.


Semoga Bermanfaat.
(Portal-Informasi-Online/Berbagai-Sumber-Lain/ABNS)