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/AVvXsEhpsFlSTVsGet_v7zxLOExH3rkfeb6uEje_iEFVG41sZTnHl3rm4mfT4ET9K5NbMSFHeIVs1pZWZlfSrcm3x4fH5DQoPul44TZyB4ckkLV_rYdZYTWkqjewFjmWBt46J7f9kHrWa9XRbRw/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.
Bagikan :
Jika Anda menyukai informasi yang ada di blog ini, silahkan daftarkan email Anda untuk berlangganan informasi terbaru via email dengan begitu Anda akan mendapat kiriman informasi setiap ada postingan terbaru yang terbit dari blog Tips Trik Komputer. Sebelum berlangganan artikel terbaru dengan blog ini, silakan baca dulu Cara Berlangganan Artikel Blog. Terima kasih sudah berlangganan postingan terbaru dari blog ini.
 |
