Cara Memasang Related Post dengan Thumbnail Gambar - Artikel Kali ini akan Membahas Bagaimana Cara Memasang Related Post ( Artikel Terkait ) dengan Thumbnail Gambar. Cara Pemasangannya cukup mudah, dengan menambahkan kode HTML yang telah disediakan, Dan menempatkannya dengan Pas. Related Post Berhubungan dengan Label, jadi jika ingin Memasangnya, maka Anda harus memasang Widget Label/Category Terlebih Dahulu. Sebelum Ke Penjelasannya ada baiknya utntuk Mengetahui Apa itu Related Post ? .. Related Post atau yang biasa disebut Artikel Terkait adalah Widget yang kebanyakan terpasang dibawah setelah Postingan. Related Post menjelaskan Artikel terkait dengan Artikel yang sedang kita baca.
Fungsi dari Related Post sendiri ada banyak, Salah satunya adalah untuk membuat Pengunjung Penasaran sehingga ingin melihat Artikel tersebut, jadi usahakan jika Membuat Artikel, Judulnya harus Unik dan Penasaran agar menarik perhatian pengunjung.
Untuk Related Post yang saya jelaskan ini yaitu, Related Post disertai dengan gambarnya, supaya terlihat lebih menarik di mata pengunjung.
Pemasangannya tidak terlalu rumit sebetulnya dan tidak menggunakan HTML/JavaScript. alasan tidak menggunakan HTML/java Script supaya tidak memperlambat Loading.. Blog itu sendiri, karena jika banyak Widget yang terpasang apalagi menggunakan HTML/JavaScript akan memperlambat Loading.. Blog, karena Mesin Pencari Google harus membaca kode satu-persatu.
Langsung saja ke Cara Pemasangannya, Jika belum terpasang Widget Label, maka harus dipasang Dulu ( lihar caranya )
Cara Memasang Widget Label
- Pergi ke Dasbor Blogger
- Tata Letak ==>Tambahkan Gadget
- Lalu Pilih Icons bertuliskan "Label"
- lalu Simpan
Cara di atas hanya untuk Blog yang belum terpasang Widget Label/Category, Jika sudah lewati saja langkah-langkahnya
Cara Memasang Related Post + Thumbnail
- Template ==> Edit HTML
Jangan lupa untuk Back Up (download template lengkap )Template terlebih dahulu, agar jika ada kesalahan anda bisa menggantinya
- Cari Kode </head> , tekan CTRL + F untuk memudahkan pencarian.
(tekan CTRL + F nya harus didalam kolom Edit HTML )
- Setelah Ketemu Kode </head> nya, Silahkan Copy kode dibawah ini, Lalu letakan di atas kode </head> nya
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;padding-left:5px;}
#related-posts h2{
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black; }
#related-posts a:hover{
color:black;
}#related-posts a:hover {
background-color:#d4eaf2;}
</style>
<script src='http://kangdansen.googlecode.com/files/relatedpostwiththumbnail.js' type='text/javascript'/>
</b:if>
4. Selanjutnya Cari Kode Gunakan Dibawah ini
<div class="post-footer-line post-footer-line-3"/>
Gunakan CTRL + F, dan Simpan Kode dibawah ini tepat dibawah Kode <div class="post-footer-line post-footer-line-3"/>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&max-results=6"'
type='text/javascript'/></b:if></b:loop><a
href='http://www.omseoli.com' style='display:none;'>Related Posts
with thumbnails for blogger</a><a
href='http://www.bloggerplugins.org/' style='display:none;'>blogger
widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Postingan Terkait Tutorial Seo Blog";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
5. Simpan Template, Selesai
Terima Kasih
- Blogger