Baiklah disore hari yang dingin ini saya akan share tentang Cara Membuat Related Post. Ya lebih dikenalnya dengan sebutan artikel terkait yang biasanya diletakkan dibawah postingan blog.  Pada postingan sebelumnya saya juga telah share Cara membuat Artikel Terkait ditambah dengan fungsi scroll. Dan sekarang saya akan mengulas kembali Cara Membuat Related Post tapi dengan Thumbnail (Gambar). Pastinya akan lebih membuat tampilan blog kita lebih menarik lagi untuk dikunjungi. Yuu langsung saja kita menuju TKP untuk membuat sekaligus memasangnya di blog tercinta. hehehe, tapi sebelumnya bagi yang ingin melihat hasilnya silahkan kunjungi blog yang satu ini [Make Your Soundrenaline]
Langkah-langkahnya seperti biasa Sign in akun blognya masing2. Lalu klik Layout > Template > Edit HTML. dan selalu biasakan centang "Expand Widget Template". Jika sudah Selanjutnya cari kode </head> untuk mempermudah pencarian gunakan ctrl+f .
Lalu letakkan kode script dibawah ini tepat diatas kode </head> 
<!--Related Posts with thumbnails Scripts and Styles Start-->  <!-- remove -->

<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 type='text/javascript'>  var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18NfzV5vwkzuJDnQGUWBK_Y0dhgZsJhsnc3r9O4iPIfjDwmskuWQlsLa2OZ1ud_cOLssTIaBA-pJ_80v6vRc3rHKR5h2MKCrZWbkXTV0SV9s-YqebBl56s1-EcFozF6z-fM_mmqajuDk/s400/noimage.png";  var maxresults=4;  var splittercolor="#d4eaf2";  var relatedpoststitle="Related Posts";  </script>
<script src='http://blogergadgets.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-->
NB:
var maxresults=4 ini adalah jumlah related post yang ditampilkan, silahkan ganti sesuai dengan keinginan
var relatedpoststitle="Related Posts" adalah tittle dari related post, silahkan rubah sesuai dengan keinginan


Jika sudah, selanjutnya cari lagi kode <div class='post-footer-line post-footer-line-1'> (dan biasanya terdapat 2 kode <div class='post-footer-line post-footer-line-1'> yang sama dalam template, pilih kode yang kedua) Dan letakkan kode script dibawah ini tepat dibawah <div class='post-footer-line post-footer-line-1'>
<!-- 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if>
</b:if>  <!-- Related Posts with Thumbnails Code End--> 
 Jika sudah lalu save dan lihat hasilnya.
Dan selamat Related Post dengan Thumbnail berhasil dipasang di blog. Selamat Mencoba dan semoga bermanfaat . . . 4.5

50 komentar:

  1. Kunjungan sore sobattt
    Wow jadi related postnya ada gambarnya
    Makasih infonya sobat ^^

    ReplyDelete
  2. Iyoo sama2 sobatt . . .
    mksih udah mampir disini ^_^

    ReplyDelete
  3. menarik gan.. lalu cara membuat yang mirip related post tapi di halaman utama gimana gan?

    salam kenal
    www.adib21.com

    ReplyDelete
  4. infonya bagus banget .... makasih yahhhh >>>>>

    ReplyDelete
  5. adib_Maksudnya Y seperti apa gan ?
    ok salam kenal juga dari AF Sahabat Artikel
    Sandara_Ok sama2 Sandara

    mksih atas khadiran sobat dan kesediaan'a comment di blog sederhana ini

    ReplyDelete
  6. tapi kog di blog ini related post nya malah makek Link Within?? :P

    ReplyDelete
  7. klo blog Y ini emank pake linkwithin sob,, klo Cara Y ini ane trapin di blog Y satu lg

    ReplyDelete
  8. thanks gan, related post imagenya berhasil..salam kenal

    ReplyDelete
  9. info yang menarik sekali gan,,,,
    salah satu tips seo yang keren,,,,,
    mampir ya gan di gubug saya

    ReplyDelete
  10. Zetiawan_nice ..!! ok salam kenal juga sob mksih udah mampir
    Panduan blogspot_ok2 sob ditunggu ya digubug'a
    Andrey_ok sob saya mampir2 juga thanks udah mampir

    ReplyDelete
  11. Performance artikelnya, salam kenal and visit me back

    ReplyDelete
  12. Tips yang bermanfaat :)

    sudah kucoba dan berhasil !

    Terima kasih dan sukses untuk Anda, kawan ! :)

    ReplyDelete
  13. thanks gan . . . .
    ditunggu kunjungan baliknya ya....

    ReplyDelete
  14. ente buat tutorial blog tapi di blog ente di pasang blog auto link yang berisi sumber, mana bisa gitu bro... yang ada mala error trus waktu pastekan code2 yang ente kasi...

    emang kenapa sih harus make script gituan?ente takut di copas???? apakah artikel ini artikel asli ente???

    ReplyDelete
  15. @indoPhotoshop: kaya'a gada masalah dlm proses paste,,,,
    kan bgus'a paste di notepad dulu baru paste di template, klo maslah link sumber kan tinggal di apus ajj klo emank ga seneng sama artikel saya

    klo emank gagal ya ga usah di ikutin tutorial diatas, masih ada Y otomatis lainnya sob ga usah repot2

    ok thanks buat masukkannya

    ReplyDelete
  16. info yang bagus, langsung dicoba... thank's

    ReplyDelete
  17. Naice om..
    Bisa om d'blog ane....

    ReplyDelete
  18. kok gak bisa ya sob,^^
    scripnya dah tak pasang di blog jualan baju korea ku,,tapi gak muncul, kenapa ya,,

    ReplyDelete
  19. sob ane baru di blogger
    . . lo leh mnta tips n trick nya ntuk bkin
    blog archive kaya agan tu gmna cranya?
    biar bsa isi scrol bar
    tankz

    ReplyDelete
  20. Makasih ya gan atas infonya, jangan lupa ya untuk visit blog saya... ramazxc.blogspot.com

    ReplyDelete
  21. infonya sangat bermanfaat

    ReplyDelete
  22. gan gimana klu related post yang kayak agan punya?? hehehe

    ReplyDelete
  23. Kunjungin blog aku sobat
    http://robinurhadi.blogspot.com/

    ReplyDelete
  24. gan knp yh setiap kali sy mencoba membuat related pos dg gambar selalu gagal?

    ReplyDelete
  25. bro kalo yang kod kdua gak ada gimna???

    ReplyDelete
  26. bro itukan khusu label klo khusus semua posting gimana

    ReplyDelete
  27. di blog saya ngak bisa dipasang sob, gimana nih ?

    kreasibonar.blogspot.com

    ReplyDelete
  28. susah banget, yang simpel aja?

    ReplyDelete
  29. lagsung ane coba gan, moga aja berhasil

    ReplyDelete
  30. hmmm, bisa jadi praktis dan menarik nich tampilan blogku....trim's gan

    ReplyDelete
  31. Tips yang bermanfaat :)

    sudah kucoba dan berhasil !

    Terima kasih dan sukses untuk Anda, kawan ! :)

    ReplyDelete
  32. mantap ini yg saya cari, ijin copas ya gan

    ReplyDelete
  33. Blog walking...:)

    ExchangeHits
    Promote your Social Networks and Websites for FREE!

    Direct Downloads
    FREE Full version Software Downloads, FREE Games, FREE Movies, FREE Video Lesson, FREE Music and Whatever you need.

    ReplyDelete
  34. enggak bisa e om... gimana niH? coba dong kalau ada waktu cek di blog ku puntodamar.blogspot.com... makasih ya, kutunggu balasannya ^^

    ReplyDelete
  35. gan, di template ane kagak ada div class='post-footer-line post-footer-line-1'

    mohon solusinya..
    ~Salam www.our-animestudios.blogspot.com~

    ReplyDelete
  36. Saya coba ya sob.pelan-pelan biar gak salah nantinya biar gak bingung buat related postnya

    ReplyDelete
  37. Makasih infonya gan, langsung coba dipraktekan..

    ReplyDelete
  38. Ini dia yang ane cari, dicoba dulu ya gan... :D

    ReplyDelete

Terima Kasih atas kunjungan dan komentarnya pada Blog ini. Thanks atas setiap Komentar, Masukkan, Saran, dan Kritik Y dapat membangun blog ini agar lebih baik lagi kedepannya. Berkomentarlah sesuai dengan Isi Bahasan Artikel. Mohon dengan Sangat Kepada Sobat-sobat untuk tidak berkomentar Y berbau unsur:
- Sara
- Pornografi
- No Spam !!! [Komentar menyertakan link aktif akan otomatis terdelete]
Terima Kasih atas Kunjungannya Sobat,,
Salam Sukses dari AF Sahabat Artikel

 
Top