Pasang Related Post Thumbnail Melayang - Kali ini Kang Koisine akan memberikan tutorial blog mengenai cara memperindah tampilan blog dengan menambahkan related post/artikel terkait melayang dengan efek slide out. Tampilan yang menarik dan unik sangatlah berpengaruh pada ketertarikan pengunjung, dimana pengunjung akan melihat artikel terbaru yang terletak di sebelah kanan blog dan melayang.
Sayangnya artikel yang muncul tidaklah otomatis dan tidak sesuai label, tetapi kita harus menulis secara manual judul artikel, alamat gambar, deskripsi artikel yang nantinya akan tampil di sebelah kanan blog. Tetapi tidak salahnya jika Anda mencoba widget menarik ini, karena tampilannya yang menarik dan unik mampu mendatangi daya tarik tersendiri bagi pengunjung blog.
Mari ita mulai dengan tutorialnya- Masuk ke Template => Edit HTML
- Kemudia letakan kode CSS di bawah ini sebelum kode ]]></b:skin>
<link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/>
- Selanjutnya letakan lagi kode Javascript di bawah ini sebelum 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>
- Masih sama seperti cara di atas, letakan kode di bawah ini sebelum kode </body>
<div class='rp_list' id='rp_list'>
<ul><li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span></div></li>
<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>
<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>
<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>
<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>
</ul>
<span class='rp_shuffle' id='rp_shuffle'/>
</div>
Catatan : Silahkan Anda edit JUDIL-IMG, URL-IMAGE dan sebagainya. Sesuaikan dengan blog Anda.
Sekian artikel mengenai
Pasang Related Post Thumbnail Melayang ini. Semoga artikel ini bermanfaat dan mudah dipahami.
Terima kasih.
