Home » , , » Membuat Related Posts Slide Out Boxez

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.

Membuat Related Posts Slide Out Boxez



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
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

Poskan Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger