20 January 2010 |

Cara Membuat Related Post di Blogger

Tujuan dari penggunaan Related Post adalah mempermudah pembaca untuk melihat artikel yang masih berhubungan dengan artikel yang telah dibacanya. Selain mempermudah pembaca, related post juga membuat para pengunjung baru di situsmu secara tidak sadar akan berlama-lama di situsmu (apabila artikel yang kamu buat memang menarik) :D

Berikut ini langkah-langkahnya:
1. Masuk ke bagian Layout lalu pilih Edit HTML
2. Lakukan backup template dengan cara memilih Download Full Template
3. Centang tanda Expand Widget Templates
4. Cari tag <head>
5. Lalu tambakan kode ini dibawah tag <head>
<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;
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("http://i50.tinypic.com/xpnhtw.jpg") 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;
}
</style>
<script src='http://www.opendrive.com/files/5892286_qy7b6/edit_related_posts_hack.js' type='text/javascript'/>

6. Kemudian cari tag <data:post.body/> dan tambakan kode ini dibawahnya
<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
8. Tekan Save your Template
9. Tada, selesai :)

7 comments:

  1. makasih info nya gan, ini sangat berguna bagi seorang newbie seperti saya,,

    klu ada yang kurang mohon koreksinya dan kunjungi blog saya
    http://dokumenblog.blogspot.com

    ReplyDelete
  2. Mantab gan infonya...langsung praktek nih

    ReplyDelete
  3. @wayan
    mungkin gak sinkron dengan templatenya :)

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Thx yah, sangat membantu tipsnya

    ReplyDelete

 
© 2008- - AnggaRifandi
#Arsenal #London #TechStartup #WebAddict #GrowthHacker