I'm → Botzzz: Mosaic Slideshow With Jquery dan Css

Dengan Perpaduan Jquery Versi 1.4.2 dengan script pembuat slideshow menjadikan slider ini dapat berganti ganti sendiri atau juga dapat di klik..

-Untuk cara membuatnya silahkan ikuti langkah-langkah berikut ini:

1.Login Ke Blogger
2.Pada Dasbor Klik Tata Letak ->> Edit Html
3.Kemudian Copy Jquery Versi 1.4.2 Berikut ini dan letakan di atas code </head>

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

-Kemudian Masukan Url Gambar anda Pada Script Di bawah ini:

/* The slide images are contained in the slides array. */
var slides = new Array('http://LINK-URL-FOTO1.jpg',
'http://LINK-URL-FOTO2.jpg',
'http://LINK-URL-FOTO3.jpg',
'http://LINK-URL-FOTO4.jpg',
'http://LINK-URL-FOTO5.jpg',
'http://LINK-URL-FOTO6.jpg');

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

$('.arrow.left').click(function(){
prev();

/* Clearing the autoadvance if we click one of the arrows */
clearInterval(auto);
});

$('.arrow.right').click(function(){
next();
clearInterval(auto);
});

/* Preloading all the slide images: */

for(var i=0;i<slides.length;i++)
{
(new Image()).src=slides[i];
}

/* Shoing the first one on page load: */
transition(1);

/* Setting auto-advance every 10 seconds */

var auto;

auto=setInterval(function(){
next();
},10*1000);
});

var current = {};
function transition(id)
{
/* This function shows the individual slide. */

if(!slides[id-1]) return false;

if(current.id)
{
/* If the slide we want to show is currently shown: */
if(current.id == id) return false;

/* Moving the current slide layer to the top: */
current.layer.css('z-index',10);

/* Removing all other slide layers that are positioned below */
$('.mosaic-slide').not(current.layer).remove();
}

/* Creating a new slide and filling it with generateGrid: */
var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));

/* Moving it behind the current slide: */
newLayer.css('z-index',1);

$('#mosaic-slideshow').append(newLayer);

if(current.layer)
{
/* Hiding each tile of the current slide, exposing the new slide: */
$('.tile',current.layer).each(function(i){
var tile = $(this);
setTimeout(function(){
tile.css('visibility','hidden');
},i*10);
})
}

/* Adding the current id and newLayer element to the current object: */
current.id = id;
current.layer = newLayer;
}

function next()
{
if(current.id)
{
transition(current.id%slides.length+1);
}
}

function prev()
{
if(current.id)
{
transition((current.id+(slides.length-2))%slides.length+1);
}

}

/* Width and height of the tiles in pixels: */
var tabwidth=50, tabheight=50;

function generateGrid(param)
{
/* This function generates the tile grid, with each tile containing a part of the slide image */

/* Creating an empty jQuery object: */
var elem = $([]),tmp;

for(var i=0;i<param.rows;i++)
{
for(var j=0;j<param.cols;j++)
{
tmp = $('<div>', {
"class":"tile",
"css":{
"background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
}
});

/* Adding the tile to the jQuery object: */
elem = elem.add(tmp);
}

/* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
elem = elem.add('<div class="clear"></div>');
}

return elem;
}

-Kemudian Simpan Scrip di atas ke dalam notepad dengan nama terserah anda bisa Ekstensi .Js atau .Txt dan Upload Script anda ke hosting yang anda punya.
-Kemudian Jika Sdh Letakan Link Url Script anda tersebut di bawah script Jquery 1.4.2 di atas dengan format sebagai berikut:

<script src='http://SITUSHOSTINGANDA/NAMA-FILE.js' type='text/javascript'/>

-Lanjut lagi silahkan anda masukan Code Css Berikut ini di atas code ]]></b:skin>

#mosaic-slideshow{
/* The slideshow container div */
height:400px;
margin:0 auto;
position:relative;
width:570px;
}

.mosaic-slide{
/* This class is shared between all the slides */
left:70px;
position:absolute;
top:10px;
border:10px solid #555;

/* CSS3 rounded corners */
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}

.tile{
/* The individual tiles */
height:50px;
width:50px;
float:left;
border:1px solid #555;
border-width:0 1px 1px 0;
background-color:#555;
}

.arrow{
/* The prev/next arrows */
width:35px;
height:70px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrU3kHWu38bEIdThy0nAcTQeoTg-NGvIPVdL23-82rXT_4DNx8z1oKJ0kP7a8tCdGsxnmNr6y8B4c7TGbH7yFwyYUtmHl5O7JbFw5-_O-nyLmqdx240eHfLmktIVz_3Cg-Ti6y4FPfp4T/s1600/arrows.png") no-repeat;
position:absolute;
cursor:pointer;
top:50%;
margin-top:-35px;
}

.arrow.left{
left:10px;
background-position:center top;
}

.arrow.left:hover{
background-position:center -70px;
}

.arrow.right{
right:10px;
background-position:center -140px;
}

.arrow.right:hover{
background-position:center -210px;
}

.clear{
/* This class clears the floats */
clear:both;
}

-Simpan Template Anda

4.Langkah Terakhir Copy Code Berikut ini dan letakan di Add Gadget/Html javascript posisi yang ingin anda letakan Mosaic Slideshownya...