Cara Mudah Memasang Slide Show di Blogspot

Setelah membahas tentang Cara Membuat atau Memasang Ping disetiap Postingan dan Cara Cepat Update Status PageRank di Google,kali ini saya akan menshare kiat di blogging dengan tema Cara Mudah Memasang Slide Show di Blogspot,tetapi seperti biasa ijinkan saya mencoba menjelaskan sedikit pengertian dari Slide Show itu sendiri,adalah sebuah widget gambar yang tampilannya berubah-ubah menjadikan tampilan blog para sobat menjadi cantik,dan gambar tersebut muncul di halaman awal sebuah blog atau website yang pasangkan di home page,tampilan gambarnya akan muncul silih berganti serta di iringi dengan judul dan deskripsinya.bagaimana tertarik dan berminat untuk mencobanya.ikuti cara berikut di bawah ini:

1. Login terlebih dulu ke akun blog para sobat.
2. Klik rancangan > Edit HTML
3 .Cari kode </head>
4. Dan letakkan kode dibawah berikut sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

//<![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>

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>

5. Lalu simpan,
6. Kemudai para sobat buka Elemen Laman
7. Lalu Klik gadget baru (HTML/JavaScript) dengan kode di bawah ini

<ul class="slideshow">
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/FOTOMESUMANGGOTADPR1.jpg" title="Video Mesum Oknum Anggota DPR" alt="Potongan Foto ini di ambil dari video mesum yang beredar di internet,apakah benar?dilakukan oleh orang yang mirip dengan Anggota Dewan Rakyat." /></a></li>
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/foto-bugil-dewi-persik.jpg" title="foto setengah bugil penyanyi Dewi Persik" alt="Foto tersebut diambil saat Dewi tengah berada di studio,Ia tampak asyik dan menikmati gaya yang tershot oleh kamera." /></a></li>
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/jpg.jpg" title="Di sukai Para pria,ini Dia salah satunya" alt="Lalu seperti apa sih type wanita yang mempunyai gairah atau hasrst sex yang tinngi itu...hmm ada dalam artikel di blog ini..." /></a></li>
<li><a href="#"><img src="http://i1235.photobucket.com/albums/ff429/budipurnomo/adult/indahbanget.jpg" title="Tehknik Meremas Payudara Wanita" alt="Buat yang satu ini tentunya para sobat tidak perlu belajar..sekedar pengen tahu trik nya ada dalam artikel di blog ini." /></a></li>
</ul>

catatan:
Para sobat bebas menggant: tulisan tebal dengan URL gambar dan mengganti pula titledan alt sesuai keinginan para sobat.

8. Selesai.

Demikian kiat di blogging dengan tema Cara Mudah Memasang Slide Show di Blogspot ,semoga bermanfaat.