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:

klik info mengatakan...

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

blog pendidikan mengatakan...

thengks infonya sangat bermanfaat. lam kenal

Techno Blog mengatakan...

Lam kenal juga, thanks atas kujungannya..

KulaKaliK mengatakan...

saya kok gak ada code nya ya?? gimana itu jd nya?

LP mengatakan...

tak coba dulu ya mas heheheh

3D LED Smart TV Reviews mengatakan...

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

Techno Blog mengatakan...

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

Uem Cuters mengatakan...

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

Toko Tas Putri mengatakan...

Kok nggak bisa diterapkan di toko online saya ya gan.

kaisartas.com mengatakan...

trims infonya...

laptop
xiaomi