Cara Membuat Related Post

on Sunday, 14 October 2012

Cara Membuat Related Post-Dalam postingan blog kali ini Cara Design Blog akan memberika tutorial blogger cara membuat related post. Sebelum memberikan tutorial membuat related post pada blog. 
Perlu dijelaskan dahulu apa itu related post dan apa fungsi dari related post.
Related post diartikan sebagai sekumpulan link artikel yang terkait dengan artikel yang sedang dikunjungi. Artikel ini terkait karena kesamaan tema. Dalam postingan terdahulu Cara Design Blog membuat tutorial blog cara membuat label blog. Disinilah peran label blog. Label blog menghubungkan halaman yang kita kunjungi dengan halaman lain yang terkait atau memiliki label yang sama.
Lihat tampilan screenshoot related post Cara Design Blog berikut: 




Sekarang apa fungsi atau manfaat dari related post tersebut. Realated post memudahkan pengujung blog untuk mencari dan menemukan artikel yang terkait dengan halaman yang dikunjungi. Fungsi lain dari related post lainya membuat blog lebih SEO friendly. 

Bagaimana cara mudah membuat related post?
Mari simak tutorial blogger cara membuat related post berikut ini:
1. Masuk Dasbor Blog kamu.
2. Klik: Template >> Edit HTML > Lanjutkan >  Expand Widget Template.
3. Cari kode]]></b:skin>
Cara mudah mencari: CTR+F, Find: ]]></b:skin>

4. Letakan kode berikut Tepat di atas kode ]]></b:skin>

 #related-posts { float : left; width : 468px; margin-left : 5px; font-size: 12px; line-height : 1.8em; 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 { margin : 10px 5px 5px 20px; padding : 0; }
5. Cari kode: </head>
6. Letakan kode berikut tepat di atas kode no.:5.
<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'
7. Cari kode<data:post.body/>
Jika kode itu ada dua, pilih yang ke dua.

8. Letakan kode berikut tepat dibawah kode  <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>
</b:if>
Keterangan: Tulisan "Related Post" yang saya tulis hijau di atas bisa kamu ganti dengan More About, Baca Selengkapnya atau More. Terserah kamu mana yang kamu sukai.

9. Save Template.
Selesai, silahkan lihat tampilan blog kamu.

Cara Membuat Related Post 5 Wid WS Sunday, 14 October 2012 Cara Membuat Related Post -Dalam postingan blog kali ini Cara Design Blog akan memberika tutorial blogger cara membuat related post. Sebelum...
       


2 comments: