Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Artikel Terkait dengan Disertai Thumbnails

Membuat  Artikel Terkait  dengan Disertai Thumbnails
Salam blogger :) Sebelumnya kita sudah pernah membuat artkel terkait, yaitu menampilkan postingan-postingan yang berkaitan dengan berdasarkan label yang sama. Jika yang kita pelajari dulu adalah related articel yang hanya menampilkan judul-judul terkait di bawah postingan yang kita buka/lihat. Maka berbeda dengan sekarang. yaitu Artikel terkait (Related Post) kita tampilkan beserta dengan thumbnail (Mini Gambar) yang ada di postingan kita.

Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita. :D

Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=5;
Berarti artikel terkait yang akan kita tampilkan adalah 5
var relatedpoststitle="Related Posts";
Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai.

80 komentar untuk "Membuat Artikel Terkait dengan Disertai Thumbnails"

  1. template aku malah kedua2nya nggak ada, apa ada cara lain soalnya aku emang udah lama pengen bikinnya..

    BalasHapus
  2. Selamat sore,
    Selamat hari Rabu,
    Semoga tetap semangat dalam berkarya dan sukses selalu,

    Salam Hangat,
    AbulaMedia

    BalasHapus
  3. Thanks sob informasinya, sangat bermanfaat... kunjungi juga blog saya sob...

    BalasHapus
  4. artikel yg sngat brmanfaat, trims atas tips & trik-nya sob..

    BalasHapus
  5. makasih infonya,,,,di templateku kenapa post komentarnya ga bisa langsung nampang seperti ini ya...mohon infonya

    BalasHapus
  6. rasanya pengen punya blog kayak gini, bagus sich. gimana ya?

    BalasHapus
  7. langsung nyoba ahh . . .

    BalasHapus
  8. PUTU:
    LAM KENAL,
    BAGAIMANA YA CARA BIKIN JUDUL POSTINGAN SEPERTI TAMPILAN INI, THANK

    BalasHapus
  9. makasih yah,akhirnya bisa belajar lbih jauh lagi tentang ngeblog,sukses buat anda,

    BalasHapus
  10. makasih buat info nya, saya sudah menerapkan trik ini

    BalasHapus
  11. Bos kok aku coba ga bisa keluar ya.. hasilnya kosong.. coba lihat disini http://nofianto777.blogspot.com/

    BalasHapus
  12. Gan gimana sih bikin 3 tab ky di kolom sidebar tuh, share dunk gan,,,

    BalasHapus
  13. sama kenal semua master blog yang koment disini, mohon bimbingannya

    BalasHapus
  14. kalo tampilkan posting terbaru untuk label tertentu dan ada gambarnya gimana ya bos?

    BalasHapus
  15. cara buat labelnya jadi animated globe gitu gimana ?? TY

    BalasHapus
  16. bermanfaat!!
    terima kasih ;)

    BalasHapus
  17. sudah dicoba lancar, cuma nggak mau muncul thumbnail-nya. gemana gan, ada soulusi? kalau pakai linkwithin mau muncul.

    BalasHapus
  18. keren mas silahkan kunjungin blog

    http://herfinitha.blogspot.com/

    aku udah pasang jadi liat aja yg udah jadi

    BalasHapus
  19. thanks bos infonya, udah dicoba dan hasilnya kereen

    BalasHapus
  20. thanx infonya..
    mampir ke blog ane gan
    Http://heriie.blogspot.com

    BalasHapus
  21. thnx banget gan. ;)
    (lama2 gak asik juga pake linkwithin. jadi banyakan link keluarnya)

    BalasHapus
  22. lihat blogku juga yaa.., http://glorygloryislam.blogspot.com

    BalasHapus
  23. mau pasang dulu di blog saya ! trms bnyak atas info nya !

    BalasHapus
  24. Ass. postingannya mantap , tapi untuk diterapkan diblog aku scriptnya tidak jadi, mungkin templetnya blog aku g ngedukung kali ya, thank's infonya...!!!!

    BalasHapus
  25. saya sudah coba persis seperti tutorial diatas tetapi kenapa ga berhasil ya . Tolong penjelasaanya pak . terimakasih

    BalasHapus
  26. bagus pisan, kakaaaa :D
    thanks :3

    BalasHapus
  27. butuh surat-surat kunjungin bog ane sob

    BalasHapus
  28. thx infonya,,, mampir dunk ke blog qw
    bloggiesukasuka.blogspot.com,,hhe

    BalasHapus
  29. wah keren keren ternyata bisa saya asalalkan ikut petunjuk yang ada secara benar

    BalasHapus
  30. infonya berguna banget gan , tapi ko pas ane coba malah gak ada yah?

    BalasHapus
  31. Blog punya agan keren.. Download dimana templatenya, gan? By masarkandas

    BalasHapus
  32. ijin coba dulu gan, somoga sukses di blog sya.

    BalasHapus
  33. makin cantik dengan di kasih tumnail bikin tambah merangsang pengen klik, hehehhe :)mantep sobat

    BalasHapus
  34. sob mengapa kalo pake html, ga keluar apa2 ya?

    BalasHapus
  35. ok gan saya akan coba caranya

    BalasHapus
  36. pusing juga kalau ga di praktekan ya gan?

    BalasHapus
  37. Udah di coba mas, hasilnya mantep.
    Good luck buat mas Kurnia.

    BalasHapus
  38. Pusing sih yaa kalo di praktekin mas, tp hasilnya udah jadi. Trims

    BalasHapus
  39. Haduh mas susah yah :(

    Gampang-gampang susah euy.

    BalasHapus
  40. Terima kasih mas, ane udah bisa ama cara2 di atas.

    BalasHapus
  41. Trimakasih infonya
    salam

    BalasHapus
  42. thanks infonya broo
    tak cobain dulu related postnya

    BalasHapus
  43. artikel yang bgus mas, boleh dicoba nihh ilomunya.....

    BalasHapus
  44. Terimakasih infonya Ka.... Sangat Membantu,..

    BalasHapus
  45. * Untuk menampilkan emoticon, ketik kodenya, contoh: =))
    * Karena banyaknya SPAM, terpaksa kami tampilkan verifikasi kata
    Jangan sampai komentarmu dihapus karena tidak mematuhi aturan!

    BalasHapus
  46. wah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..

    BalasHapus
  47. wah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..

    BalasHapus
  48. wah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..

    BalasHapus
  49. wah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..

    BalasHapus
  50. Sudah betahan disini...
    Mas ... kok ga mau tampil ya?? padahal udah sesuai intruksi:(

    BalasHapus

Berlangganan via Email