Membuat Related Post

Related post merupakan salah satu widget yang harus dimiliki oleh sebuat blog. Related post dapat membantu pengujung dalam mengetahui artikel-artikel apa saja yang berhubungan dengan artikel yang sedang ia baca. Nah, pada kesempatan kali ini saya akan memberitahukan kepada anda bagaimana cara membuatnya. langsung saja kita prakter.

1. Tentunya Login ke akun blog anda.
2. Selanjutnya di dasboard klik Rancangan => Edit HTML dan Centang Expand Template Widget
3. Cari tag atau kode </head> dan copy-paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> 
Copy-Paste Kode Ini :

 <style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;d
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>

Cari kode <p><data:post.body/></p> . kode pada setiap template biasanya berbeda beda. kode biasanya seperti ini <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah sobat mendapatkan kode <p><data:post.body/></p>, lalu copy-paste kode dibawah ini tepat di bawah kode tersebut.

 <b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

4. klik Save Template / Simpan. 

==========================================================================
1. Untuk menempatkan link related post sebanyak mungkin ganti angka yang berwarna HIJAU di atas dengan angka yang anda inginkan.
2. Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL gambar yang berwarna MERAH dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa layanan hosting gambar gratis seperti Photobucket, Imageshack atau blogger sendiri.
3. Untuk mengganti warna atau style hover (warna atau style yang muncul di related post ketika disorot oleh mouse) anda bisa mengutak-atik kode css-nya. Tepatnya kode berikut ini :

 #related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

SELAMAT MENCOBA