Widget Related Post atau Link Terkait Untuk Blogger / Blogspot

10/26/2011

Ada sebuah hack template untuk widget blogger yang cukup bagus untuk menampilkan link ke related posts / link terkait tepat di bawah setiap postingan blog. Artikel yang berkaitan dipilih dari posting lainnya di dalam category/label/tag yang sama. Dengan demikian diharapkan pengunjung blog anda akan tetap betah berlama-lama ketika mereka melihat link dari posting terkait yang mungkin saja bisa menarik minat mereka.

Hasil Tampilan dari Related Posts Links:


Bagaimana cara menambahkan Widget tersebut ke Blog Anda?

  1. Langsung menuju ke bagian Layout >Edit HTML di dalam Dashboard Blogger anda.
  2. Jangan lupa untuk selalu melakukan Back up Template sebelum membua perubahan apapun!
  3. Yakinkan untuk mencentang kotak "Expand Widget Templates".
  4. Cari kode </head> Gunakan Ctrl+F untuk memudahkan pencarian.
  5. Tambahkan kode berikut ini tepat sebelum kode </head> yang baru saja anda temukan tadi.

  6. <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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") 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://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

  7. Sekarnag cari kode <data:post.body/>. Dalam beberapa templates kode ini bisa terlihat sepertikode berikut <div class='post-body>
    atau
    <data:post.body/>
  8. Tambahkan kode berikut tepat di bawah kode yang baru saja anda temukan tadi.
        <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>

  9. Sekarang Simpan atau Save Template anda dan selesai!

Pengaturan

  • Untuk merubah angka maksimum dari related posts yang sedang ditampilkan untuk setiap label, Cari kode di bawah (di dalam kode diberikan angka 7) dan rubah menjadi angka "5" atau jumlah berapapun sesuai keinginan anda.
  • max-results=5
UPDATE -- Error Fix:
    Jika related posts anda tidak bekerja dengan benar:
    1. Cari baris kode URL berikut (gunakan Ctrl + F): http://theblogtemplates.com/scripts/Related_posts_hack.js
    2. Ganti URL di atas dengan : https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js
       
    Sumber



==================================
Bingung Bikin Blog, Percayakan Pada Kami.
Murah, Cepat, Full Support dan Berkualitas
==================================

     

All posts here about online store, tips, tricks, SEO, Store Service, store builder with Blogspot, Wordpress or Opencart.
Contact me if You need help or more question about service. Enjoy reading.....

Artikel Terkait

Previous
Next Post »