MEMBUAT RELATED POST SEDERHANA

Related Post adalah merupakan fasilitas blog yang berguna untuk mengarahkan visitor menuju artikel-artikel yang terkait dengan artikel yang sedang dibacanya. Selain itu Related Post juga memiliki fungsi lain untuk membantu meningkatkan pageviews blog yang kita miliki. Semakin banyak halaman blog kita yang terbuka atau dibaca oleh visitor, maka akan semakin mendongkrak posisi blog kita di mata Google search engine dan pastinya akan berpengaruh pula pada status Alexa rank.

Secara fisik memang penampilan related post sungguh menarik, namun hendaknya jangan hanya dinilai dari sisi estetikanya saja melainkan fungsi dan kegunaan serta manfaatnya yang jauh lebih dari sekedar kata menarik. Pada kesempatan ini admin blog SHARE AJA akan memberikan model related post sederhana yang berupa text tanpa thumbnails. Sengaja kita memberikan model ini dulu karena untuk model related post dengan thumbnails seperti linkwithin akan kita posting di postingan mendatang. Lihat screenshoot di bawah ini :

Yah, kira-kira seperti bentuk di atas lah related post yang kita katakan sederhana tersebut.

Untuk mebuatnya sangat mudah kok, lihat caranya berikut:
1. Login ke Blogger
2. Klik Rancangan » Edit HTML
3. Back up dulu template anda dg klik "Download Template Lengkap"
4. Klik "Expand Template Widget"
5. Masukkan kode css berikut tepat atas kode ]]></b:skin>

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6-QDoCAgg6uSz68qDIaffuQjZ_jyCUpObz916FRa_jxlXBNbTygfvpPt08PR0c0W46UUZSMed782wPQOlUZq7bMdwM2UdYK6-PM-5u7MrqU3uTsUov56G2RfVTHWILL87aoQvC66El7M/") 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://yourjavascript.com/19336213112/relate_post.js' type='text/javascript'/>

 

6. Gunakan CTRL+F dan cari kode berikut : <data:post.body/>
7. Masukkan kode berikut tepat di bawah kode <data:post.body/>

 

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts To This Article : </b></font><font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'><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>

Rujukan: http://www.pandaanku.com/2012/04/cara-membuat-related-post-keren-dibawah.html