Cara Membuat Related Post dengan Thumbnails pada Blog

Bookmark and Share
Assalamualaikum sobat blogger semua, gimana kabarnya? semoga baik-baik saja yah.. Hmm.. Kali ini saya akan memberikan tips dan trik blogger tentang Cara Membuat Related Post dengan Thumbnails pada Blog. Jika sebelumnya sobat hanya melihat related post hanya menampilkan judul postingannya saja, maka sekarang akan ada perubahan yaitu ditambahkan thumbnails atau gambar. Wah.. Tentunya hal ini bisa membuat blog sobat semakin keren dah, sobat juga pasti sudah tau kan kalau memasang related post merupakan salah satu teknik SEO On page?

Cara Membuat Related Post dengan Thumbnails pada Blog

Nah, bagaimana cara membuat relate post dengan thumbnails ini? Langsung saja ke TKP:

  • Login ke akun blogger sobat.
  • Pilih menu Template, jangan lupa backup template sobat.
  • Klik Edit HTML
  • Cari Kode </head>, kemudian letakkan kode diberikut tepat diatas kode </head>



<!--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-->


  • Kemudian, cari lagi kode <div class='post-footer-line post-footer-line-1'> dan letakkan kode berikut ini tepat diatas kode <div class='post-footer-line post-footer-line-1'>:

<!-- 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 widgets</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-->

  • Simpan template blog sobat.
Demikianlah tips dan trik blogger tentang  Cara Membuat Related Post dengan Thumbnails pada Blog dari saya, semoga bermanfaat bagi sobat blogger semuanya. Jangan lupa juga baca postingan saya sebelumnya tentang:

  1. Cara Memasang Emoticon pada Komentar Blog
  2. Cara Membuat Reply Comment pada Blog
  3. Meta Tag Dinamis Terbaik
  4. Cara Membuat Highlight pada Postingan
  5. Cara Mempercepat Loading Halaman
  6. Cara Mengubah Blog Nofollow menjadi Dofollow
  7. Kelebihan dan Kekurangan Blog Dofollow

{ 9 comments... Views All / Send Comment! }

download pc games said...

mo tanya sob... koq di blog ane ga bisa ya?
error terus tuh...

Arif Hidayatullah said...

coba lebih teliti lagi sob..
mungkin masalah penempatan kodenya sob..

PREKDUT said...

hello ... im Adam. I like your blog. I intend to exchange links blog. So that we can mutually grow your friends .. I wait for your arrival and we hope to exchange links
PrekdutTop Liga BolaDongkrak AntikTop Soal Jitu

muhaiminabd said...

Saya sudah coba beberapa tips mengenai hal ini dan hasilnya ERROR dan membuat saya harus mengupload template saya kembali. Alhamdulillah, setelah mengikuti tutorial dari blog ini, saya berhasil memasang related post-nya... Pertanyaan saya, bisakah saya menambah jumlah related post yang ditampilkan??? mohon pencerahannya...

Mr.MuchAsk said...

Mas..mohon maaf kalo saya salah..
Saya salah satu newbie blogger yang pake handphone.. Dengan memasang versi mobile blog nya mas cepet di akses..niat nya udah bagus.. :)
Tapi kode2 yang mas kasih di atas masih tidak bisa terlihat semuanya di handphone saya.. Ya sekedar permintaan.. Kalau mau ngasih kode2 seperti di atas, bisa ngga pakai text area yg mobile friendly.. Terimakasih telah memperhatikan blogger yang memakai ponsel.. :D
Mohon maaf kalau saya so tau..xixixi

Rudy Hartono said...

muantab sob

Yustin Annisa said...

Thanks gan. Sangat berguna, saya sudah coba n berhasil. :12

http://infoiki.blogspot.com

kuceng21 said...

Sangkyu, mau langsung ane praktikkan gan,,,

kuceng21 said...

wah gan maaf dobel post nih, tp linknya udah expired,

:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Post a Comment

Terima kasih telah berkunjung. Jika ada yang mau disampaikan silahkan tuliskan komentar sobat dibawah ini. Komentar sobat sangat berarti bagi blog ini. Tapi tolong jangan SPAM. Karena saya sangat membenci SPAM.
Best Regards
Tips dan trik Blogger