Cara Membuat Related Posts Slide Out Boxez

Berhubung postingan kali ini
ada permintaan dari sahabat blogger yang melalui email,
karena fitur ini berasal dari Tympanus
dan di tutorial tersebut tidak penjelasan
yang sangat relefan
bagaimana cara menerapkan dan memperaktekkan trik ini
di Blogger jadi disini saya akan membahas bagaimana  
Cara Membuat Related Posts Slide Out Boxes di Blogger.

Baiklah, tips kali ini related posts harus kita edit secara manual,
Berikut screenshot dari Tympanus dan DEMO.

LANGKAH 1
Masuk ke Menu Template/Rancangan > Edit Html

LANGKAH 2
Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>

<link href="http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css" media="screen" rel="stylesheet" type="text/css"></link>

LANGKAH 3
Selanjutnya cari Kode </body> dan letakan kode JavaScripts berikut tepat diatas kode </body>:
 .......................................................................................................................
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script>//<![CDATA[
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;

/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);

function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}

/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});

/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);

function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
//]]></script>
............................................................................................
LANGKAH  4
Sekarang letakan struktur HTML ini juga diatas kode </body>

.....................................................................................................

<li>
<div>
<img height='72' width='72' alt='JUDUL IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL POST</span>
<span class='rp_links'>
<a href='LINK ARTIKEL ANDA' target='_blank'>Tutorai Blog</a>
<a href='LINK DEMO' target='_blank'>Tips and Trik</a>
</span>
</div>
</li>

...........................................................................................................


Anda bisa menambahkan beberapa struktur minimal 5. Dalam JavaScript mendefinisikan bahwa hanya menampilkan 5 posting, Anda harus mengganti teks berwana dan di cetak tabal dengan link posts, link image dan judul.


LANGKAH 5
Simpan Template anda
....................................................................................................................

semoga bermanfaat !

berikutnya saya berikan artikel tentang : kode warna HTML blog