41 Widget Related Post With Thumbnails

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Related post atau postingan terkait tentu sudak kita ketahui bersama fungsi dan manfaatnya, karena sebelumnya saya pernah mengetengahkan tutorial cara menambahkan related post pada blogger. Widget ini sebagaimana widget lainnya memang memiliki banyak versi, kalau yang sebelmnya hanya dilengkapi judul, widget berikut dilengkapi juga dengan thumbnails (image/gambar) yang dapat mempercantik tampilan related post pada blog anda. Widget ini juga bisa dengan mudah anda atur dan sesuaikan jumlah artikel terkait yang ingin ditampilkan atau merubah jenis huruf dan background hover dari link dll.

Widget berikut mirip pula dengan widget related post yang disediakan oleh link within, nah jika anda tidak ingin menggunakan widget dari pihak ketiga silahkan mencoba tutorial berikut: related post with thumbnails

1. seperti biasa, silahkan loggin dahulu ke account blogger anda, pada dasbor pilih atau klik rancangan >>> edit HTML >>> jangan lupa untuk mencentang kotak kecil disamping tulisan Expand Template Widget.

2. Tekan control F dan cari kode </head>

3. Selanjutnya letakkan kode berikut diatas kode nomor dua tadi:

<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://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Kemudian cari kode berikut:

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

atau

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

atau

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

atau

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

5. Selanjutnya letakkan kode berikut setelah kode atau dibawah kode nomor 4 tadi:

<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://amatulla83.blogspot.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=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

Kode diatas bisa anada rubah lagi untuk menyesuaikannya dengan blog anda.

6. Selesai, silahkan simpan template dan lihat hasilnya diblog anda.

Hasil tutorial ini bisa anda lihat diblog saya "Jejak-jejak hati"

Terimakasih, semoga bermanfaat.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

41 komentar :

  1. Admin yth, minta tlg dong bgmana cara pasang foto thumbnails di postingan blog, sy coba tapi hasil gambarnya terletak di paling bawah halaman posting.(nih contohnya: http://warnainfo.blogspot.com/ ).
    bagaimana yah biar dihalaman posting gambarnya letaknya diatas. Cara ya selama ini sy buat thumbnails dgn kode TR-TD dsb. Mohon klu ad cara lain. trmksih. (Di balas yah..coz butuh bnget buat tampilkan produk yg mo djual. thanks)
    email: elyhr@ymail.com

    BalasHapus
    Balasan
    1. Coba setting editor post blogger yang terbaru atau ngeblog dengan windows live writter, insyaAllah untuk upload foto dan setting posisi image sgt mudah.

      Hapus
  2. Fungsi related article sudah sama-sama kita tahu sangat membantu sekali untuk menaikkan page impression artikel sebuah blog. Jadi sangat disarankan untuk memasang related article kalau kita ingin pengunjung betah berlama-lama di blog kita.

    Terima kasih tipsnya, Mbak Amatullah. Saya jadi tahu caranya bikin related artikel dengan image. Memang kelihatan menarik secara visual kalau ada imagenya.

    Untuk kecepatan loadingnya sendiri gimana, Mbak? Apa tidak berat dibandingkan dengan related article biasa?

    BalasHapus
    Balasan
    1. Menambah kode CSS, HTML script pada blog pasti akn menambah pula waktu loading. Klu blm bnyk script di blog anda, penambahan widget diats mgkn tdk akn terlalu bnyk mmpengaruhi kecepatan loading blog anda!

      Hapus
  3. thx mbak buat tutorialnya. Nanti di coba deh, tapi klu skarang kyknya ane mau konsen tuk memperbaiki postingan ane dulu ketimbang tampilan.

    BalasHapus
  4. wow, artikel ny berguna bgt nih sob.. cocok bgt bwt mnmbh wawasan ku seputar tema ini..

    sob, mengingt blog ni sngt bermanfaat bgt q.. tukeran link yok!!

    link blog kamu sudah terpasang di blogku, link balik yach :) silahkan di liat di blogku!!

    ntar pasang link ku dengan anchor text "Naruto Soundtrack" yach,

    dan jdi follower q juga y, siapa thu aja dgn kehadiran blogger se-hebat kamu, blog ku bisa
    sedikit rame dan berwibawa gtu.he3

    ntar secara berkala q bakal sering-2 silaturahmi kesini..

    d tunggu kehdirannya yach :D

    salam dari blogger indonesia setengah bule.he3

    makasih..

    BalasHapus
  5. Tutorial yang bagus Mbak.. sudah lama saya tidak mengunjungi blog ini dan sudah lama pula kita tidak saling blogwalking. Salam blogger Tasikmalaya

    BalasHapus
  6. Terima kasih tutorialnya. Insya Allah akan saya coba nanti.
    Maaf saya baru bisa berkunjung lagi ke blog favorit saya ini.
    Thanks.

    BalasHapus
  7. wah...sangat sangat membantu mba..aku share lagi codingnya y..
    Oy aq juga dah follow mba,mba follow back donk.hehe

    BalasHapus
  8. Selamat Idul Fitri 1 Syawal 1431 H. Taqobbalallohu Minna Wa Minkum, Mohon Maaf Lahir dan Bathin.

    Sahabat

    BalasHapus
  9. info yang bermanfaat, artikel yang berkaitan memang sangat penting dalam artikel sebuah website, thank's udah share :)

    BalasHapus
  10. Artikel terkait yang kayak di atas ini ada tutorialnya ga friend?
    AKU BICARA

    BalasHapus
  11. keren-keren sekali dan mantap,trims bro.aku udah pasang jg di htt://deha08.blogspot.com,semoga bro mau trs berbagi ilmunya

    BalasHapus
  12. ia nih mas tutorial kren boleh nanti saya coba... lam kenal ya mas

    BalasHapus
  13. wadu saya gak punya kode kaya di no 4
    udh saya cari ke4nya pakai ctrl+f
    gak ketemu juga ada yang bisa bantu enggak???

    BalasHapus
  14. mba blog saya ga bisa dibuat related post, saran mba ? ganti theme atau edit html, atau ganti dgn theme mba punya ?

    BalasHapus
    Balasan
    1. Coba lagi, bisa menggunakan related post diatas atau seperti yang ada diblog ini, atau klu tdk bs edit HTML silahkan gunakan widget related post pihak ketiga, contoh widget dr link within!

      Hapus
  15. waaaw blognya keren banget nih.... saya masih belajar buat blog untuk monetize di www.virtualltyreal.blogspot.com

    BalasHapus
  16. lapor sudah dipraktekkan Gan, syukron

    BalasHapus
  17. keren juga nih informasinya, sangat bermanfaat sekali gan salam kenal aja yah

    BalasHapus
  18. Salam sahabat, mau nyampaikan bahwa tutorial ini sudah dipraktekkan Gan dan alhamdulillah berhasil dengan baik, Gan bisa melihat hasil tutorial dan ditunggu ya krn kunjungan dan komentar Gan sangat berarti banget, sukses terus ya Gan, semoga Gan beserta keluarga sehat-walafiat selalu, amiin

    BalasHapus
  19. Saya dah pake tipsnya,berhasil.Trims.

    BalasHapus
  20. waahh,,,saya baru membuat blog,,dan masi kurang tahu tentang cara mendesainnya,,walau mungkin terasa sulit bagi saya tapi terima kasih buat informasinya,,,seenggaknya saya sudah tahu nama itu widget related post,,soalnya saya tidak tahu,,,hehehe
    maklum newbie nih...

    BalasHapus
  21. memang widget related post banyak membantu supaya traffic jadi kenceng ya. ijin nyoba ya :)

    BalasHapus
  22. gan,,saya udah mencobanya,,disana ada kalimat 'sebelum anda mengedit template mungkinanda mnyimpan sebuah salinan',,maksudnya gimana saya masi belom mngerti,,
    terima kasih

    BalasHapus
  23. thks ya atas artikelnya..
    http://habibmtk.blogspot.com

    BalasHapus
  24. Tricknya berjalan dengan baik, thanks ya.

    BalasHapus
  25. Met sore sista, widget sudah berhasil ane aplikasikan ke blog, cuma ane ada sedikit masalah,
    Masalah yg pertama :
    Setalah ane memakai widget related post, Time Stamp blog ane bergeser jauh ke pinggir.

    Masalah yg kedua :
    Bagaimana Cara merubah gambar related post agar ukurannya proposional seperti layaknya thumbnail?

    Untuk lebih jelasnya berikut ane berikan link penampakan permasalahannya :
    http://i1256.photobucket.com/albums/ii497/gbmagshop/Others/Relatedpostcopy.jpg

    Kalo boleh, ane minta email sista, karena ada yg ingin ane tanyakan sehubungan tutorial2 yg udah sista share namun tidak dapat ane aplikasikan.

    Akhir kata, ane ucapkan terima kasih atas waktu yg sista berikan untuk menjawab pertanyaan ane. Salam sejahtera.

    BalasHapus
    Balasan
    1. Wah klu mslhnya seperti itu anda harus edit CSS widget dan time stamp pada template anda. Untuk email ke amatullah.syukur@gmail.com. Maaf telat sekali membalas komentar anda!

      Hapus
  26. kayaknya bagus juga nih untuk blog,,
    tp ini ngaruh gx bwt kecepatan blog......

    BalasHapus
  27. postingan yang sangat bermanfaat sob, salam kenal

    BalasHapus
  28. Thanks tutorialnya sob.. Mantap blognya!

    BalasHapus
  29. Balasan
    1. Sama-sama mbak. Thanks jg kunjungannya!

      Hapus
  30. untuk mengatur ukurannya gimana mas sualnya teks judul acak"an

    BalasHapus
  31. MAss kok aneh dengan blog saya..
    udh berapa kali saya cari "Releated Post" tapi gada yg bisa..
    aneh termasuk yg ini juga gabisa..
    [-(
    Ada solusi mas..??

    BalasHapus
  32. kalo di simpan langsung ada related post nya apa harus bikin posting baru dulu?

    BalasHapus
  33. mba kalo cara buat bikin related postnyabiar kaya punya mba ini gimana yah [-(

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!