Cara Membuat Related Post Thumbnails Blogger

Jika sebelumnya infonetku sudah berbagi Tips Cara Menambahkan Google Translator Widget di Blog 
kali Infonetku akan berbagi tips Membuat Widget Artikel Terkait / Related post pada blog. 

Tips Menghias blog ini akan membuat seperti gambar diatas, untuk contoh nyatanya lihat dibawah postingan ini..
Oke langsung saja yah..
1.Langkah pertama masuk dulu ke blogger dasbor sobat, lalu back up atau download terlebih dahulu template sobat, untuk jaga jaga jika sobat mengalami kesalahan, kemuidian edit HTML dan centang "Expand Widget Templates"
2.Kemudian cari code dibwah ini, gunakanlah Ctrl + F untuk memudahkan sobat mencari
</head>

Setelah ketemu gantikan dengan kode dibawah ini..

<!--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 type='text/javascript'>
var defaultnoimage=" https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Jangan Lewatkan Artikel Lainnya";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Setelah itu cari lagi kode berikut..

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

jika sobat tidak menemukan kode seperti diatas coba cari kode dibawah ini..

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

Setelah itu letakkan kode dibawah ini setelah kode yang tadi atau tepat dibawah kode yang tadi.

<!-- 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>
<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=5&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'/>
</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-->

Kemudian jangan lupa untuk save..lalu lihat hasilnya..

4.Kalau sobat ingin menambah atau mengurangi jumlah artikel terkait atau related post yang akan ditampilkan sobat tinggal menggantikan nomor seperti kode dibawah, gantikan nomor sesuai dengan yang sobat ingin tampilkan.

var maxresults=5;

Untuk mengubah jumlah label yang akan diperlihatkan sobat tinggal edit kode sperti dibawah ini

max-results=5

5.Untuk merubah judulnya sobat bisa edit kode seperti kode berikut.

var relatedpoststitle="Related Posts";

6.Untuk postingan yang tidak ada photo, supaya terlihat ada photonya gantilah url photo yang sobat ingin tampilakan supaya nanti jika secara otomatis untuk postingan yang tidak memiliki photo akan menampilkan photo yang sobat mau

var defaultnoimage="https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";

7.Editlah kode warna dibawah ini kalau sobat ingin mengganti warna framenya

var splittercolor="#d4eaf2";

jika belum juga berhasil, jangan panik yah, sobat bisa hubungi saya dengan cara berikan komentar sobat, dengan senang hati akan bantu.Selamat Mencoba yah...Salam Infonetku.
Source Blogger Plugins
Cara Membuat Related Post Thumbnails Blogger Cara Membuat Related Post Thumbnails Blogger Reviewed by Doet Simarmata on 12:15 AM Rating: 5

21 komentar:

  1. terimakasih sobat atas ilmunya tapi kode kode di atas [ < c lass='post-foo ter-line pos t-foo ter-lin e-1 ' > ] dan satunya lagi tidak ada di html ku gimana ya? ada solusi

    BalasHapus
  2. "Expand Widget Templates" udah di centang g sob?

    BalasHapus
  3. makasih mas ganteng tutorialnya

    BalasHapus
  4. gan kog di blogku gg muncul ya??

    BalasHapus
  5. kok gk ada juga muncul gan, sundul dulu..!!

    BalasHapus
  6. Makasih om infonya

    BalasHapus
  7. Saya sudah ikuti step by step tapi kok nggak muncul ya gan di toko online saya.
    Terima Kasih

    BalasHapus
  8. Beberapa template emang nggak bisa
    tapi coba letakkan kodenya di bawah kode ini
    <data:post.body/>
    jangan di
    <div class='post-footer-line post-footer-line-1'>

    BalasHapus
  9. akhirnya ketemu juga tutorialnya,, langsung ane praktekkan gan ^_^

    BalasHapus
  10. thanks infonya..dah tk coba tp kok ada tulisan link blogger template di homepage ku ya

    BalasHapus
  11. thanks infonya gan, skarang blog ane udah bisa n berhasil! follback y gan, blog agan udah ane follow. thx http://tipes64mes.blogspot.com/

    BalasHapus
  12. ya elah di blog ini aja gak ada related post nya :D ngasih tutorial buat related post with thumbnai lagi wkwkwkwk :D cobain sampe buntung juga gak mungkin keluar

    BalasHapus
  13. Keren sob artikelnya sangat bermanfaat. Terimakasih akan saya coba langsung di blog saya perawatan wajah

    BalasHapus

Diberdayakan oleh Blogger.