MAKING GALLERY SLIDESHOW WITH JAVASCRIPT

1. Sign in to your Blogger account

2. Click Design, Select Edit Html

3.Search Code </ head>

4. Then Copy Paste Code Below And Put Right on code </ 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>

Figures in blue are the permanent size of the image, you can replace them in accordance with the size of your web layout.

5. Click Save

6. Next click the draft, click Add a Gadget

7. Choose HTML / Javascript and then enter the script code below

<center>

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3A-vyRYkkPkm9Sc05Be6Lyn1BKk678JnFvC6N5Q3lyAeJ6P-XJGyfMKdaCRXDhGwtWo_PqkTyldwykWXXNRTxXr22IAbtB0KjZFExHcgFnWDTcumyKv0B2opL4nprscceU-sMGO527mQ/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/AVvXsEisHX6aQopL05CTmnMvRHR4gpZKuDLXxK7cVt9EaDrgTSE3g-EIbRocMGUZe1mWSuHKQmpGp31EeyWyYYT4MIW_MwMKtIOu9IBSLc2NhBU8XQ1KJOwBk-zmmZidg1YdbGmr_IXYLLYE9ME/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/AVvXsEjgJf9MjLZH84hgWogLKtVY5dDEEQp_khgyhN_psqQF8L3jK905LMzA1j7JnqBCKiBn5g3N47n4PIBZvRPS8wxA8AC1Lbg-aZ3eV3EVlGyaBBWWJI7H8MNvLHJRAVGcA3nZ7bUARgQf4yA/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/AVvXsEiZxb99ECGBVZ4FGoAm3Ma9jv2u3Jy-mxgot_MjTdy1IztDcbMKD2LKT0iqILWcbZAPg62pNkRb4r6w5NDkMCvrmqrI-gYuX4mQRZCysOratOHye41AqrbGL9IcLXGyaWOKeWl2tVFamtA/s1600/4.jpg" title="Gambar Slideshow 4" alt="Penjelasan Artikel Pada Gambar 4" /></a></li>

</ul>

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

Red letters that can be altered with the URL address of your picture.

Blue letters that can be altered according to the image description.

8. Clik Save

9. See the results