Membuat Related Post Versi 2

Related post, menampilkan judul posting yang terkait. Sebelumnya kita pernah membahas tutorial cara untuk membuat related post dengan gambar thumbnail, silahkan baca disini. Kali ini masih tetap pada tema yang sama, akan tetapi lebih sederhana. Artinya posting terkait yang ditampilkan nanti tanpa ada "Label" dan "Thumbnail", mirip dengan related post pada mesin wordpress

Untuk memasang "Related Post v.2" ini kita harus menanamkannya didalam struktur template yang kita gunakan, berikut langkah-langkahnya:
  1. Pada dashboard blogger, buka menu Design -> Edit HTML
  2. Beri centang pada "Expand Widget Templates" dan jangan lupa untuk membackup template terlebih dahulu dengan mengklik pada "Download template lengkap"
  3. Menggunakan ctrl+f, temukan kode ]]></b:skin>
  4. Letakkan kode berikut tepat diatas tag ]]></b:skin>
    #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. Selanjutnya cari </head> dan letakkan kode berikut di atasnya <script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>
  6. Temukan kode <p><data:post.body/></p> atau <data:post.body/> dan jika terdapat dua kode yang sama, silahkan pilih yang pertama
  7. Letakkan kode berikut di bawah <p><data:post.body/></p> atau <data:post.body/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <div style='font-size:18px'><b>Related Posts:</b></div>
    <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=5&quot;' type='text/javascript'/></b:if>
    </b:loop>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div>
    </b:if>
  8. Simpan template, dan lihat hasilnya
Teks berwarna biru, silahkan rubah menurut selera anda.

No comments:

Powered by Blogger.