Membuat Slide Show dengan thumbnail pada Blogger

Perhatikan slide di atas, akan terlihat dua buah slide. slide yang sebelah kiri menunjukan keterangan postingan dan gambarnya slide yang sebelah kanan adalah slide navigasi, yang apabila diklik akan mucul keterangan dan gambarnya pada slide sebelah kiri.

Baiklah mari kita mulai.
Klik 'Layout' pada blogger, dan pergi ke "edit HTML", dan kemudian centang tulisan 'Expand Widget Templates' setelah itu cari kode "]]></b:skin>" dalam template kamu,
Lalu kopi-kan style CSS berikut diatas kode tersebut

<style>
body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}


/* ---------[ Slideshow ]--------- */

#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}

/* ---------[ Slideshow Slides ]--------- */

#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}

#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}

.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

#slideshow .slides li .entry p {
margin: 0;
}

#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}

/* ---------[ Slideshow Navigation ]--------- */

#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}

#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}

#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;

}



.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}

.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}

#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}

.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}

karena effect slide ini berdasarkan padaJquery plugin dinamai Cycle, jadi setelah kode CSS di atas
kita harus memasukan kerangka Jquery dan Cycle plugin.
Kemudian tambahkan kode javascript di bawah ini setelah kode "]]></b:skin>":
Klo yang diatas (Style cssnya) sebelum kode "]]></b:skin>", nah klo yang di bawah ini (Javascript) setelah kode "]]></b:skin>"

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>

kamu bisa mendownload kedua java scipt di atas, dan meletakannya di hostingan milik kamu. Kemudian letakan kode berikut setelahnya:

<script type="text/javascript">

$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: 'fade',   // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $('#slideshow');

 // set tabs to current hard coded navigation items
 this.tabs = $('ul.slides-nav li', this.context);

 // remove hard coded navigation items from DOM
 // because they aren't hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $('div.slides > ul', $slideshow.context).cycle({
     fx: $slideshow.fx,
     timeout: $slideshow.timeout,
     speed: $slideshow.slideSpeed,
     fastOnEvent: $slideshow.tabSpeed,
     pager: $('ul.slides-nav', $slideshow.context),
     pagerAnchorBuilder: $slideshow.prepareTabs,
     before: $slideshow.activateTab,
     pauseOnPagerHover: true,
     pause: true
 });   
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
     // remove active styling from all other tabs
     $slideshow.tabs.removeClass('on');

     // add active styling to active button
     activeTab.parent().addClass('on');
 }   
}   
};


$(function() {
// add a 'js' class to the body
$('body').addClass('js');

// initialise the slideshow when the DOM is ready
$slideshow.init();
});

</script>

Terakhir Klik 'Save Template'
Untuk kegiatan di "edit HTML sudah selesai.

sekarang kita mulai kode utama untuk slidenya,
selanjutnya letakan kode HTML berikut setelah javascript di atas:

Nah sekarang coba pergi ke >> Layout >> Page element, kemudian tambahkan 'Add a Gadget' di atas postingan kamu, baru kemudian kopikan kode yang di bawah ini:

  <div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">

<!--code of the left part : image ,title and post summary -->

<div class="slides">
<ul class="clearfix" style="position: relative;">

<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>

</ul>
</div>

Kode di atas adalah untuk menampilkan slide bagian kiri; yang akan menampilkan gambar,judul, dan keterangan post
dan berikutnya kode untuk menampilkan slide bagian kanan; yang menampilkan judul postingan dengan Thumbnail.
Letakan kode di bawah setelah kode di atas:

<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>

<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>

<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>

<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>

<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>

</ul>

</div>
</div>

Perhatikan kode slide kiri dan slide kanan diatas, kamu akan melihat masing-masing attribute dari <a> untuk kode slide kanan menuju ke attribut <li> ke kode slide sebelsh kiri
contohnya:
disebelah kiri menampilkan:
<li id="main-post-1".....>
dan di sebelah kanan menampilkan:
<a href="#main-post-1".....>
jadi maksudnya, jika kita klik link di slide sebelah kanan, maka slide di sebelah kiri akan menampilkan kontennya.
slide di sebelah kanan mengontrol slide di sebelah kiri.
semua kode dari slide-slide tersebut tidak akan bekerja apabila tidak di inisialisasikan dalam satu variable.

Posted in: blogger,tutorial