Cara Membuat Related Post Slide Melayang Di Samping ~ Amien Creative

Ok sahabat blogspot untuk menambah menarik blog anda Kali ini saya akan posting tentang cara membuat related post yang melayang di samping blog (out boxez).

Hampir saja sama dengan widget semacam buku tamu atau lainnya, tetapi disini adalah related post.

Bagaimana anda penasaran kan? Langsung saja bagaimana caranya, ikuti langkah-langkah di bawah ini :

Masuk ke Menu Template/Rancangan > Edit Html

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>

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>

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.

5. Simpan Template anda.

Sekian Terima Kasih semoga bermanfaat :)