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 )
<!-- Start Related post-->
<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>
<!--End Related post-->
Keterangan kode 7 = Jumlah postingan yang ingin ditampilkan.
7. Terakhir Save/ Simpan Template anda, dan lihat hasilnya.
Selamat mencoba, semoga berhasil.
Keren ni bisa dipasangi pula dengan logo blog kita
BalasHapusterima kasih mas bro
ia setuju sama ramzi
BalasHapuscobain ah..
BalasHapusnice share :D
Kok Gak Bisa Ya...mohon cek nya
BalasHapusthanks banget gan
BalasHapusmantap dah
http://taufanbagusdpa.blogspot.com/