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


Sekian Terima Kasih