Membuat Recent Post Effect Slideshow Thumbnail Horizontal-Vertical

Langkah-langkah Membuat Recent Post Effect Slideshow Thumbnail Horizontal-Vertical  :




Log In ke akun blogger anda :

Setelah masuk dasbor, Pilih Rancangan/Design.

Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu edit elemen.

Beri centang pada kotak Expand Widget Templates.

Tekan CTRL + F di keyboard, masukkan kata kunci ]]></b:skin> ke dalam kotak find. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]></b:skin>

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

/* ---------[ Slideshow ]--------- */
#home-top {
width:930px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 920px;
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:375px;
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:355px;
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> 

Selanjutnya carilah kode </head>. Copy Script code berikut dan letakkan tepat di atas kode </head>

<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>
<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>

Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu Rancangan, atau dalam blog versi English Design. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda + pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget

<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>

Keterangan: 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.

Ok. Terakhir klik save widget, dan cek apakah slidenya sudah jalan.