Senin, 23 Januari 2012

Cara membuat Related Post pada Blogger



Kali ini saya ingin berbagi Cara membuat Related Post atau Related Article pada blog yang letaknya di bawah postingan atau artikel yang kita buat. Widget ini akan sangat membantu pembaca yang telah selesai menyimak artikel untuk menemukan artikel terkait. Dengan demikian blog kita makin sering mendapatkan hits. Link related post ini berdasarkan pada label atau kategori artikel.

Berikut ini Cara membuat Related Post pada Blog :
Login ke Blogger dengan account anda.
Setelah berada di Halaman Dasboard Blogger, lalu :
  1. Klik Rancangan (Layout), lalu klik tab Edit HTML
  2. Klik (centang) chekckbox Expand Widget Template
  3. Cari Tag </head> (gunakan ctrl+F untuk pencarian cepat)
  4. Lalu Copy code script berikut ini diatas 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-0PTHzxHm4ucc3LhCKM-GqU5_UKQCDJgtzpQDra4rn3AGaHb_2AwfQjO8fW-F_yj10cN65axXaN5cDgQJn00jn0Ul3ivQS3qJtNcUkBv2BecORk8XQkXaUjj4xTDIY5cYzGESw8HOBF4/") 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://techno-herry.blogspot.com/' type='text/javascript'/>

5. Sekarang cari <data:post.body/>
6. Lalu sisipkan code script berikut ini tepat dibawahnya

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

7. Simpan Template

Lihat hasilnya...

Demikian tips Cara membuat Related Post pada Blog.
Selanjutnya simak pula Cara membuat Recent Post

10 komentar:

  1. ok...makasih atas infonya. lam kenal..

    BalasHapus
  2. thengks infonya sangat bermanfaat. lam kenal

    BalasHapus
  3. Lam kenal juga, thanks atas kujungannya..

    BalasHapus
  4. saya kok gak ada code nya ya?? gimana itu jd nya?

    BalasHapus
  5. tak coba dulu ya mas heheheh

    BalasHapus
  6. kalau data.post body/-nya ada 3 atau 4 bagaimana sob?

    BalasHapus
  7. @ 3D LED Smart TV Reviews : Coba sisipkan di bawah bagian yang terakhir, sejauh ini anda telah menerapkannya di blog anda dengan baik, nampaknya tinggal pengelompokan label aja agar lebih specific. Semoga berhasil.

    BalasHapus
  8. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
  9. Kok nggak bisa diterapkan di toko online saya ya gan.

    BalasHapus

Jika ada yang kurang lengkap pada artikel di atas silahkan anda berkomentar, agar anda bisa berbagi dengan saya atau dengan lainnya.
Terima kasih atas kunjungannya, sedapat mungkin saya akan berkunjung balik.