Cara menambah gambar slide show

Assalamu'alaikum Wr.Wb

yo~yo~yo postingan kali ini kita akan membahas mengenai menambah gambar slide show
caranya mudah sekali tinggal ikutin langkah-langkahnya seperti di bawah ini :


1. login di blogger
2.masuk di bagian templates( back up terlebih dahulu templates ada dengan mengklik cadangan/pulihkan pilih download templates , tujuannya agar menghidari kesalahan dari pengeditan HTML dan memudahkan dalam mengembalikan templates blog kita)
3. edit HTML
4. lanjutkan
5.cari kode <head>
6.copykan kode di bawah ini tepat di atas kode <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() {


slideShow(3000);

});

function slideShow(speed) {



$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Script by www.kikiyo.co.cc
$('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'));

//Display the caption
$('#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 () {
//Display the content
$('#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:800px;
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:800px;
height:240px;
border:none;
}
#slideshow-caption {
width:800px;
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>

kalau sudah klik simpan templates
7. pilih bagian tata letak
8.tambah gadget
9.pilih HTML/JavaScript
10.copy kode di bawah ini dan pastekan pada kolom konten

<center>
<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0Pp_PBl89ByNiGfRoqBW24RfvwA29x3jZY5eKghU0PHVu2eks7x3gbJYA5hlDypFZ5HAtJGAUw4HMsEGvUi2lVT9LOxBsLmBpgkuvuQ2JfSt-AMK8ZBhsRkeVmT1hnqIwNkaYeZaGgg/s1600/1.jpg" title="Gambar Slideshow 1" alt="Penjelasan Artikel Pada Gambar 1" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7rwlk98GeU-5je_WIm-ABGJIALeziO2w43-8YX2W9uwiuEo775TVNDOsVtbNsXiqa-y5IjwokP7HPFr5tnf0_srl_DfdB8LjDOTTNSdxqg4BrOMgEIKyN3KiaqgKHflxZ7tMPVR8xXa4/s1600/2.jpg" title="Gambar Slideshow 2" alt="Penjelasan Artikel Pada Gambar 2" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6pwYvU6R3wHSTiDiNnpbu0y_gmbD1jDYyPjo5dP5T0-ys8ew1r2El-ehaH6ogFtcsKY-ddQPt8kfsMaaSP95JkWnzOFla4sgJuhmsgPACjCKMGTN_Z_2nUNVDWM0KMvHrlX2pu7i-1oY/s1600/3.jpg" title="Gambar Slideshow 3" alt="Penjelasan Artikel Pada Gambar 3" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQ3_QYunOJgwG-bm2xCqXKmWSjb_yF0wFY3CLWTtzadr_q4SQ1G90tDLGzEnrLhwRjfSKxCNgwuXET0xF_0dB9iCli7BzIuzRq0H_KqZF4F10-m0vtmP7w8KTJQvXRAg6Wq_XTHOW5lU/s1600/4.jpg" title="Gambar Slideshow 4" alt="Penjelasan Artikel Pada Gambar 4" /></a></li>

</ul>
<center/></center></center>

11. simpan

penjelasan :
warna biru pada script di HTML angkanya bisa di ganti , sesuai kebutuhan blog anda
warna merah ganti alamat link gambar anda
warna biru pada script gadget ganti dengan penjelasan gambar anda

selamat mencoba