Wednesday, February 26, 2014

Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog

Posting terkait atau yang lebih akrab disebut dengan artikel terkait mempunyai peran yang sangat penting bagi jumlah pageview blog (Baca: Cara Meningkatkan Pageview Blog dengan Mudah). Hal itu dikarenakan dengan memasang related post diakhir postingan, akan menarik minat baca para visitor kita. Apalagi bila tampilan artikel terkait berbentuk gambar (tumbnail), tentu visitor akan semakin penasaran ingin membacanya lebih lanjut. Oleh karena itu eksistensi widget posting terkait menjadi sangat penting bagi kemajuan suatu blog.

Pada beberapa waktu yang lalu, saya sudah memposting tata Cara Membuat Artikel Terkait Tanpa Tumbnail yang mana widget tersebut berupa judul-judul artikel saja disetiap akhir postingan, dalam kesempatan kali ini saya ingin membahas tentang tata Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog. Hal tersebut dimaksudkan agar anda tidak membuat Artikel Terkait secara manual di blog. Dengan menerapkan cara yang saya berikan ini, posting terkait akan muncul dengan sendirinya (otomatis) disetiap akhir postingan. Berikut langkah-langkahnya.

Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog

1. Silahkan anda Log In ke blog anda masing-masing dengan menggunakan username dan pasword anda. Setelah itu, pilih menu tab Template, kemudian pilih Edit HTML.
Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog
2. Setelah masuk ke Edit HTML, silahkan anda cari kode </head>. Untuk mencari kode tersebut, silahkan Klik Control F pada keybord komputer anda, nanti akan muncul Kotak Pencarian di Pojok Kanan Atas. Silahkan masukkan kode </head> pada kotak pencarian, dan kemudian Klik Enter.

3. Setelah kode </head> sudah anda temukan, silahkan letakkan Kode Berikut ini tepat diatas kode </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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/AVvXsEjOpugJv9UWcgpr0VYH66Ug8oFIswM3KjGBCQ05HEkOM7KsTgMmAKdEArv1FlEu_QSTQAOKQfMYXNsas9Gj_SopoZ1X8Po-q37w7NB4lgKyE4cAKNi24POD_pYNpJRKqADZsfk59juCndU/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Keterangan:
var maxresults=5 adalah jumlah artikel yang ditampilkan dalam posting terkait
var relatedpoststitle="Related Posts" adalah tampilan tulisan artikel terkait

4. Untuk selanjutnya, silahkan anda cari kode <data:post.body/>. Biasanya jumlah kode <data:post.body/> itu lebih dari satu. Silahkan pilih kode yang kedua atau yang ketiga. Setelah ketemu, silahkan Letakkan Kode Berikut ini tepat dibawah kode <data:post.body/>.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Setelah itu, Klik Save dan lihat hasilnya. Apabila sudah berhasil, hasilnya akan terlihat seperti gambar dibawah ini.
Contoh Widget Artikel Terkait Bergambar di Blog
Demikian panduan tentang bagaimana Cara Membuat dan Memasang Widget Related Post Tumbnail di Blog. Apabila ada kekeliruan dalam tata tulis maupun substansi, saya mohon maaf yang sebesar-besarnya. Atas atensinya saya sampaikan ucapan terimakasih. Salam. Jangan lewatkan posting menarik lainnya di Ririn's Blog tentang Cara Memasang Iklan di Bawah Judul Postingan Blog.
Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg

17 komentar:

  1. Ini cara editan dengan template yang baru nenk??

    ReplyDelete
  2. Saya sudah ada mbak, request dong cara buat tombol share text. Hehe

    ReplyDelete
  3. Widget ini sangat bagus untuk mengarahkan pembaca pada artikel di halaman lain yang terkait ya mbak ..

    ReplyDelete
  4. Saya udah pasang Mbak, emng berguna ni related post..

    ReplyDelete
  5. ini berurusan dengan html yah mbak Ririn,terkadang saya suka gimana gitu kalau berurusan denga kode yang ini hehe,tapi saya akan coba juga soalnya penasaran gitu hehehe

    ReplyDelete
    Replies
    1. iya memang agak sulit pak untuk edit-edit kode di template blog :)

      Delete
  6. ijin nyimak aja mbak
    saya lebih suka yang tidak tumbnail soalnya saya kalau posting tidak ada gambarnya
    hehe

    ReplyDelete
  7. Untuk template blog sekarang memang sudah menyediakan related post bergambar atau thumbnail tapi sebagian ada juga sebaliknya,jadi kalau membuatnya tinggal menerapkan tutorial dan kode dari mbak diatas :)

    ReplyDelete
    Replies
    1. iya mas, ini tutorial khusus yang template nya nggak ada widget artikel terkait nya. Jadi harus pasang sendiri :)

      Delete
  8. Sama seperti mas onqi kalau artikel jarang ada gambarnya, nyimak dulu mbak

    ReplyDelete
  9. saya membuat Random Post dengan tumbnail tapi kadang kutipan teksnya tidak muncul malah ada tulisan "Normal 0 false false false EN-US X-NONE X-NONE ..." apa yang salah ya Mbak Rin?

    ReplyDelete
    Replies
    1. mungkin data yang di simpan di hosting nya sudah dihapus mas :)

      Delete
  10. ini blog banyak banget,, wah wah pke blogspot lagi ya,,

    ReplyDelete
  11. Nah kalau thumbnail related post saya memasangnya karena lebih greget kalau dari gambarnya.

    Makasih mbak udah mengulasnya.

    Datang juga ya ada postingan baru lanjutan kemarin.

    ReplyDelete
  12. Hasilnya bagus dan paatinya berguna untuk para pengunjung..nantinya ya mbak
    Terima ksh mbak Ririn buat ttitorialnya :)

    ReplyDelete