Related Post / Artikel Terkait Dengan Icon Gambar Kecil

Related Post / Artikel Terkait Dengan Icon Gambar Kecil - Pada kesempatan kali ini, Blog karaokebatak akan membahas 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 kok, langkah-langkahnya sebagai berikut :

1. Login ke Blogger anda

2. Masuk ke menu Rancangan >> Edit HTML >> Centang Expant Template Widget

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

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{width:100%;font-size:12px tahoma;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 )

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' 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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Keterangan kode 7 = Jumlah postingan yang ingin ditampilkan.

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

Selamat mencoba, semoga berhasil.

Nah itu dia langkah-langkah Cara Membuat atau Memasang Related Post/Artikel Terkait Dibawah Postingan. Jika ada pertanyaan, silahkan bertanya dikotak komentar. Sekian dulu semoga artikel ini bermanfaat. Salam...

Selasa, 21 Agustus 2012