Cara Membuat Related Posts Di Bawah Posting Blog

Cara Membuat Related Posts Di Bawah Posting | Related posts sangat penting keberadaannya pada suatu blog, karena selain bisa menunjang SEO. Related posts juga berfungsi untuk memudahkan pengunjung untuk mengakses artikel kita yang berkaitan dengan artikel yang sedang di baca oleh pengunjung.
Misalnya... sobat memposting artikel dengan label tutorial blog, atau apa saja, maka jika pengunjung mengklik artikel kita yang berlabel tutorial blog maka akan muncul menu dibawah postingan kita yang menyajikan artikel-artikel yang berlabel tutorial blogger.

Jadi pengunjung bisa menelusuri blog kita, tentunya dengan Related Posts Di Bawah Posting ini akan menunjang profesionalitas blog kita. Dan kali ini, saya akan share tutorialnya.

Screenshot

Baik...  kita akan langsung praktekkan.

1. Login ke blogger sobat.

2. Masuk ke Template > Edit Html.

3. Centang kotak: "Expand Widget Template".
4. Cari kode </head> letakkan kode dibawah ini sebelum kode </head> 

• <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/AVvXsEhve2Pc4xmEZ6JhoMbtTyLT7fYbnSc9l97wNbHSRNd9Bl9f3FMLOL_sh98qSPjFoGruybjbyIcz37kvr_wBDRb_qUp_AHScjnnJNuKyGdHGrl6JLlm5J4yMZQmNQ-Gyo8F_wUBiQInv6a0/") 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://yudatfort.googlecode.com/files/related%20posts%20b-digg.js' type='text/javascript'/>

5. Sekarang cari kode <data:post.body/> jika ada dua, pilih yang kedua dan letakkan kode di bawah ini dibawah kode <data:post.body/>

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

6. Klik pratinjau kalau tidak terjadi error, maka...
7. Save template sobat dan lihat hasilnya.

Semoga bermanfaat...

Artikel Terkait:

Posted in: Tutorial Blog

Share it to your friends..!