Widget artikel terkait untuk Blogger / Blogspot

Widget artikel terkait  untuk Blogger  adalah Widget untuk menampilkan posting terkait di bawah setiap posting blog Anda.  Artikel  Terkait dipilih dari posting lain dalam kategori yang sama / label / tag. Dengan Widget ini memudahkan   pembaca atau pengunjung Blog Anda melihat artikel terkait yang merka cari/baca. ( Baca Juga : Mengedit Header Menu Di Template The Mez )

Screenshot  Widget artikel terkait  untuk Blogger / Blogspot :
Widget artikel terkait  untuk Blogger / Blogspot
Cara menambahkan Widget artikel terkait untuk Blog Anda :
  1. Pergi ke Layout> Edit HTML di Dashboard Blogger Anda. 
    Dashboard Blogger EDIT HTML 
  2. Download Full Template Anda yang sudah ada sebelum membuat perubahan!
    Download Full Template 
  3. Pastikan untuk menceklist kotak "Expand Template Widget". Expand Widget Templates 
  4.  Cari tag </ head>.
  5. Tambahkan kode berikut sebelum tag </ 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(&quot;http://goo.gl/GwfUt&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://javascript-1.googlecode.com/files/Artikel_terkait.js' type='text/javascript'/>
  6. Sekarang cari kode  <data:post.body/>. Dalam beberapa template kode ini mungkin terlihat seperti ini
    <div class='post-body>
    atau
    <data:post.body/> 
  7. Tambahkan kode berikut persis di bawah kode <data:post.body/>. atau salah satu dari kode diatas yang sama dengan template yang anda pakai.
    <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>
  8. Simpan Template / save template.
Catatan :
untuk mengubah jumlah maksimum artikel terkait yang ditampilkan untuk setiap label/Tag, Anda tinggal  mengubah nomor "max-results = 5" ke nomor yang anda diinginkan.

Referensi :
Author    : John Smith 
Load disqus comments

1 Komentar: