Cara Membuat Artikel Terkait / Related Post Dibawah Artikel Blog (Blogspot)

Related Posts

Kebetulan saat ini blog saya baru saya pasang menu Releated Posts. Sambil membangun blog, saya akan berbagi sedikit tentang bagaimana cara menambahkan menu related posts tersebut. Langsung saja, berikut ini adalah langkah-langkahnya :

1. Login kedalam Blogger anda
2. Pilih Template kemudian Klik edit HTML
3. Cari Kode </head> dengan cara Ctrl+F, kemudian ketik </head> lalu Enter
   
   
   
   
   
   
4. Letakkan kode javascript dibawah ini tepat diatas kode </head>

<!--Related Post-->
<style> #related-posts { float : left;height:200px;overflow:auto; 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/AVvXsEjrd00UGRuvk4MOF-ZZEVkniKrY4moBRiPieinUYI6QEx57GhLxxLUJ8Kym1BM2XvH4qYuDV49ExYur602Z8kPNfpaX1YYjYO-6AN4Mih62Dq6UVjpS5jUcB2plWG9TjlSYHvu-TGadPA/") 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://problogizjs.googlecode.com/files/Related-posts.js' type='text/javascript'/>
<!--And-->  

   5. Selanjutnya cari lagi kode berikut <data:post.body/> dengan cara Ctrl+F, kemudian ketik   

       <data:post.body/> lalu Enter

   6. Copy kode dibawah ini kemudian paste dibawah <data:post.body/>

<!--Related Post-->
<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel 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>
<!--And-->

   6. Terakhir save template blog anda dan cek hasilnya.

Demikian sedikit tutorial dari saya, sampai ketemu lagi di lain kesempatan, jangan lupa tinggalkan jejak ya gan. hahahaha . . .