membuat widget related post / artikel terkait untuk blog

Halo Sobat ngawean jika sobat ingin membuat sebuah layanan related post atau yang biasa disebut artikel terkait.
Berikut adalah cara bagaimana untuk membuat widget artikel terkait atau related post

1. Masuk ke dashboard blogger, buka menu design atau template
2. Pilih HTML atau edit html
3. Beri centang pada "Expand Widget Templates"
4. Cari kode ]]></b:skin> dengan menekan tombol "CTR+F" letakkan kode css berikut diatasnya

#related-posts {  float : left;  width : 250px;  margin-left : 5px;  font-size: 12px;  line-height : 1.8em;  margin-bottom:10px;  }#related-posts a{ color:#4b4b4b; }#related-posts a:hover{ color:#ca1717; }#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 { margin : 10px 5px 5px 20px; padding : 0; }

5. Jika sudah langkah selanjutnya cari code  </head> dengan langkah seperti no.4,letakkan kode javascript berikut diatasnya

<script src='http://filengawean.googlecode.com/files/Related-posts.js' type='text/javascript'/>

6. Cari <data:post.body/> jika ada dua kode yang sama, pilih yang pertama dan letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><h3>Related Posts:</h3><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'/><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=4&quot;' type='text/javascript'/></b:if></b:loop><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

catatan:

perhatikan code yang bercetak tebal dan yang berwarna hitam.

Related Post pada langkah yang ke 5 adalah judul yang akan muncul silakan ganti sesuai dengan keinginan sobat.
Pada kode terakhir ada potongan kode max-results=4&quot; Angka 4 menunjukkan jumlah posting yang akan muncul di related post jika ingin memperbanyak atau mengurangi maka silakan ganti angka 4 tersebut.

Share this post