Home Top Ad

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

Share:
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 . . .

1 comment:

Setiap komentar Anda sangat berarti sekali untuk Blog Efriaman agar bisa menjadi lebih baik kedepannya. Berkomentarlah dengan baik demi kenyamanan bersama.

Tak ada yang bisa saya berikan selain ucapan terima kasih karena telah memberikan apresiasi terhadap artikel-artikel dan tulisan di Blog Saya ini.

Peringatan! Saya tidak pernah melarang untuk menggunakan pengguna Anonim namun setidaknya gunakanlah akun Anda atau minimal nama dan URL. No SARA, SPAM dan Sejenisnya !!