Cara Membuat Widget Related Post atau Artikel Terkait Dengan Icon di Blogspot

Jika Ada yang belum tahu artikel terkait itu apa silahkan lihat di blog ini pada bagian akhir artikel saya ini ada tulisan related post / artikel terkait. 

Fungsinya selain untuk seo, related post / artikel terkait ini juga membantu pengunjung untuk membaca yang lain mungkin yang belum di ketahuinya. Hal ini menyebabkan pengunjung bisa betah berada di blog kita.

 

Langkah-langkah membuatnya sebagai berikut :

1. Login Ke Blogger.

2. Kemudian masuk ke Menu Edit HTML.

 
3. Jangan lupa "Expand Template Widget".

 
4. Biasakan untuk Membackup template sebelum memodifikasi.

5. Kemudian letakkan kode berikut di bawah tag </head>

<style type='text/css'> #related-posts { float : left; width : 100%; 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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim9l1NnbI8FY_KqKSF3dW7_Nbj_AKjixD8otxUuMMaTXAS2nHcg_Yw_eyQb9Vu6dgYstTfq5VIRwgAnluoZX_ymwzzcFovoTWDvLJcb1dyWRiFhZ-eAJjIB30fZnWF46AnpDQqze7k2iM/&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; } </style><script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

6. Jika sudah, cari <data:post.body/> lalu pasang kode berikut di bawahnya.Biasanya <data:post.body/>ada banyak terdapat dalam HTML blog, jadi paste pada <data:post.body/> (pastekan disini) </b:if>

<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>

7. Terakhir Simpan template dan lihat hasilnya.

Semoga bermanfaat . . .