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:

Tutorial Blog

• Cara Submit Blog ke Bing Webmaster Tools
• Cara Membuat Artikel Terkait Dengan Scroll Box
• Cara Buat Tombol Share Dengan Efek jQuery Nudging
• Cara Mengetahui Backlink
• Cara Cek Template SEO Friendly
• Kelebihan dan Kekurangan Blog Nofollow dan Dofollow
• Cara Membuat Komentar Facebook dan Blog Berdampingan.
• Kode Script Widget Melayang
• Mempercepat Blog di Index Google
• Cara Membuat Header Blog sendiri
• Cek Kecepatan Blog
• Cara Membuat Menu Navigasi Melayang di Sudut Blog
• Cara membuat Menu Bar pada blog
• Cara membuat Kotak komentar disqus
• Cara Membuat gambar Maintenance di Blog
• Cara menambah kolom Widget diatas Header
• Membuat kotak Komentar Facebook Pada Blog
• Bagaimana membuat read more di blog

Posted in: Tutorial Blog

Share it to your friends..!