Cara Membuat Artikel Terkait Dengan Icon Gambar kecil di Postingan Blog

Berikut ini Cara Membuat atau memasang Related Post / Artikel Terkait Dengan Icon Gambar kecil di bawah postingan. Dengan memasang Related Post atau Artikel Terkait dibawah postingan akan memudahkan mesin pencari melacak blog anda. Sehingga setiap postingan kita akan mendapatkan posisi yang bagus dimesin pencari seperti google (amin...). Disamping mendapatkan itu dengan memasang artikel terkait, page view dan trafik blog kita akan semakin tinggi. Karena akan mempermudah pengunjung/visitor blog kita menemukan artikel yang berhubungan atau berkaitan dengan artikel yang dilihat. Related Post yang saya maksud seperti gambar dibawah ini.

Atau lebih jelasnya lihat Artikel Terkait dibawah postingan ini. Gimana? Tertarik mau memasangnya diblog kamu? Caranya gampang, langkah-langkahnya sebagai berikut :

 

1. Login ke Blogger anda

2. Masuk ke menu Template >> Edit HTML >>   Centang Expand Template Widget (Jika ada)

3. Cari kode </head> (gunakan ctrl + F untuk mempercepat pencarian), setelah ketemu letakkan kode dibawah ini tepat diatas kode </head>

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{width:100%;font-size:12px Palatino Linotype;margin: 15px 0 7px 0;}
#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:16px;padding:0;}
#related-posts ul li{display:block;background:url(http://www.cinsay.com/images/icon-play.png) no-repeat;
padding:0 0 1px 21px;margin-bottom:3px;line-height:1.6em;
border-bottom:1px dotted #cccccc;}
#related-posts ul li a{background:#fff;display:block;}
#related-posts ul li a:hover{background:#E9F5FB;}
</style>
<script src='http://putrabatak.googlecode.com/files/relatedpost-icon.js' type='text/javascript'/>
</b:if>

4. Ganti kode warna merah dengan URL icon kamu. berikut ada beberapa pilihan yang mungkin bisa kamu suka..

URL : http://assets3.text4freeonline.com/images/play-icon.gif

URL : http://www.eastvillageradio.com/images/icon/player1.gif

URL : http://eba.benefitnews.com/media/ui/rss_icon_20x20.gif

URL : http://labs.bible.org/files/images/blogger.gif

5. Selanjutnya, cari kode <data:post.body/>

6. Letakkan kode dibawah ini tepat setelah kode <data:post.body/> (jika ada 2 kode <data:post.body/>, pilih kode yang ke-2 )

<!-- Start Related post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Palatino Linotype' size='3'><b>Artikel lain yang Berkaitan dengan <u><a expr:href='data:post.url' expr:title='data:blog.pageName'><data:blog.pageName/></a></u> : </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>
<!--End Related post-->

Keterangan, kode 5 = Jumlah postingan yang ingin ditampilkan.

7. Terakhir Save/ Simpan Template anda, dan lihat hasilnya.

Selamat mencoba, semoga berhasil.

Tweet