Cara Memasang Widget Related Post Dengan Thumbnails.
Pada postingan kali ini saya mau coba share tips blog lagi dimana
postingan ini sedikit melengkapi catatan saya sebelumnya tentang related post dari layanan linkwithin.
Widget related post atau artikel terkait memang merupakan salah satu
widget yang wajib dipasang pada blog (menurut saya). Selain memudahkan
pengunjung untuk membaca artikel-artikel lainnya, juga akan berpengaruh
pada optimasi seo on page suatu blog. Untuk hal seo blog saya
kira sudah menjadi salah satu agenda utama blogger pada blog yang
sementara dikelolah. Widget related post ini pun mempunyai berbagai
macam model yang bisa kita pasang pada blog tergantung dari selera kita
agar sesuai juga dengan tampilan blog. Nah, langkah-langkah memasangnya
pada blog, sobat bisa ikuti cara-cara berikut.Langkah Pertama
Seperti biasa silahkan login dulu ke akun bloggernya trus pada halaman dasbor blog klik nama blognya. Pada halaman ikhtisar atau overview, silahkan pilih menu template dan klik Edit HTML trus klik lagi lanjutkan. Pada halaman edit HTML, centang pilihan Expand Widget Template. Kemudian silahkan cari kode </head> lalu letakkan kode di bawah ini tepat di atas kode </head>.
<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.6em; 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqYDPDMliTfjdCeSwiSssAz0mMwfZDfrirwDg6i_9f3phivKBYVq9QnnFUOsIlLUA1SsQyvA8Tzi0MWXFBgcHKntWqoe5LrBnphJuDCVwjnLnwSWYovXJQ5LyIdZ7Q-JXdcMW42DumOMs/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='https://share-with-agung-talaga.googlecode.com/files/kode-related-post-with-thumbnail.js' type='text/javascript'/>
Untuk kode di atas, sobat bisa merubah angka yang saya kasih warna biru dengan keinginan sobat berapa artikel yang akan ditampilkan pada widget related post-nya serta silahkan juga ganti kata Related Posts dengan judul widget yang sobat inginkan. Kemudian link gambar yang saya kasih warna biru merupakan link gambar default yang akan ditampilkan pada widget related post jika artikel pada blog sobat tak disertakan dengan gambar. Sobat bisa menggantinya dengan link gambar yang sobat inginkan.
Langkah Kedua
Pada langkah kedua ini, silahkan cari lagi kode <div class='post-footer-line post-footer-line-1'>, pada template blog saya kode ini ada dua maka silahkan letakkan kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.
<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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div style='clear:both'/>
</b:if>
Jika sudah selesai semuanya diatur sesuai dengan tampilan blognya, silahkan save templatenya dan coba buka salah satu artikel sobat, apakah widgetnya sudah muncul atau belum. Jika belum muncul, silahkan tanyakan kembali. Kurang lebih hasil pemasangan kode di atas seperti gambar di bawah ini.
Posted by , Published at 20.12 and have
0
komentar
Tidak ada komentar:
Posting Komentar