Rabu, 12 Oktober 2011

Membuat Related Post di Blogger

Secara default Blogger tidak menampilkan link-link Related Post (Postingan Terkait) yang biasa kita lihat di Blog / Website lainnya. Namun kita bisa menambahkan link Related Post dengan sedikit melakukan editing pada Template HTML-nya. Cara ini akan berhasil jika ada beberapa postingan yang memiliki Label yang sama, jadi ketika kita bikin postingan jangan lupa untuk selalu memberi label. Nah untuk mulai melakukan editing HTML silakan login Blog anda lalu Klik Design >> Edit HTML.

Jangan lupa untuk me-centang tanda Expand Widget Templates. Cari tag </head> lalu copy script di bawah ini tepat di atas tag </head> tersebut.
<!--RelatedPostsStarts-->
<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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot; ) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js' type='text/javascript'/><!--RelatedPostsStops-->
Setelah itu cari kode <data: post.body/> lalu copykan script di bawah ini tepat di bawahnya
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Postingan terkait : </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><!--RELATED-POSTS-STOPS-->
Terakhir jangan lupa klik Save Template :))
NB :
  • Untuk membatasi jumlah link yang ditampilkan silakan ganti nilai max-results nya 
  • 'data: post.labels'  diketik tanpa spasi, maklum karena Blog ini akan menerjemahkan ": p" sebagai ":p" jadi sengaja saya ketik pakai spasi

Tidak ada komentar:

Posting Komentar