belajar design blog: membuat slideshow dengan thumbnail

sebelumnya trik ini say dapat dari www.oketrik.blogspot.blogspot.com

Membuat SlideShow Thumbnail. Setelah saya membagikan tentang Membuat Featured Content Slidersekarang saya juga ingin membagikan tentang slideshow juga namun slideshow kali ini berbeda denganslideshow sebelumnya. Kalau yang sebelumnya tampilannya familiar dengan slideshow lainnya untuk kali ini menurut saya berbeda dari slideshow yang lain karena terlihat elegant dan keren deh pokoknya Dance

. Kalau menurut saya slideshow ini lebih baik di pakai di blog atau web yang berisikan tentang film, berita dan yang berhubungan tentang gambar-gambar. karena tampilannya seperti di bawah ini (Untuk melihat Demo Langsung Klik saja gambarnya).

Sekarang kita lihat langkah memasangnya yuk!

Seperti biasa login ke blogger
setelah itu masuk ke Tata letak => Edit HTML
lalu cari kode ]]></b:skin> dan masukan kode di bawah ini tepat di atasnya

<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;
}
</style>
Setelah itu cari kode </head> lalu masukan kode di bawah ini tepat di atasnya. (catatan : apabila sudah terdapat kode di bawah ini di template sobat maka tidak usah menambahkannya lagi)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Setelah itu masukan kode di bawah ini tepat di bawah kode di atas

<script src='http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js' type='text/javascript'/>

<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>
lalu simpan dan mari kita menuju ke halaman Elemen Halaman untuk menaruh kodeHTMLnya dan agar slideshow tersebut muncul
Setelah berada pada Elemen halaman, tambahkan sebuah gadget. Untuk menambahkannya sobat bisa memilih tempat yang sobat sukai, kalau saran saya sih dibawah header.
Setelah itu pilih yang HTML/Javascript
lalu masukan kode di bawah ini kedalamnya

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



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

<li id="main-post-1" style="background: transparent url(Gambar besar) " >
<div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
<p>Penjelasan di bawah Judul di Gambar Besar</p></div>
</li>
<li id="main-post-2" style="background: transparent url(Gambar besar) " >
<div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
<p>Penjelasan di bawah Judul di Gambar Besar</p></div>
</li>
<li id="main-post-3" style="background: transparent url(Gambar besar) " >
<div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
<p>Penjelasan di bawah Judul di Gambar Besar</p></div>
</li>
<li id="main-post-4" style="background: transparent url(Gambar besar) " >
<div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
<p>Penjelasan di bawah Judul di Gambar Besar</p></div>
</li>
<li id="main-post-5" style="background: transparent url(Gambar besar) " >
<div class="entry"><h2 class="post-title"><a href="URL Judul">Judul di Gambar Besar</a></h2>
<p>Penjelasan di bawah Judul di Gambar Besar</p></div>
</li>

</ul>
</div>

<ul class="slides-nav">

<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>

<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>

<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>

<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>

<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="Gambar kecil" class="thumbnail" />Deskripsi di samping gambar kecil</a></li>

</ul>

</div>
</div>

Penjelasan :
- Gambar besar=> ganti dengan image yang ingin tampil di image thumbnail besar
- Judul di Gambar Besar => ganti dengan Tulisan Judul untuk di tampilkan di gambar besar
- Penjelasan di bawah Judul di Gambar Besar => ganti dengan Tulisan penjelasan di pada gambar besar
- URL Judul=> ganti dengan url yang menuju pada judul di gambar besar
- Gambar kecil => ganti dengan image yang ingin tampil di image thumbnail kecil
- Deskripsi di samping gambar kecil=> Tulis penjelasan di pada gambar besar
Setelah itu simpan deh dan sobat dapat melihat hasilnya

Bagaimana mudah bukan cara membuat slideshow Thumbnail? Nah untuk itu saya sarankan agar membacanya dengan detail agar tidak terjadi kesalahan sedikitpun. Saya akhir Terima kasih dan Happy Blogging

About The Author

Bie, that's my name. Im just an ordinary blogger.Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones.