Home » , » Cara Membuat Related Post With Thumbnail Di Blog

Cara Membuat Related Post With Thumbnail Di Blog

Written By Ku Copas on Wednesday, 18 April 2012 | 4/18/2012 01:53:00 pm

KUCOPAS - Cara Membuat Related Post With Thumbnail Di Blog. Setelah lama tidak update posting, sekarang saya akan posting lagi trik blog tentang Cara Membuat Related Post with Thumbnail di Blog atau cara membuat artikel terkait bergambar di bawah setiap postingan blog.

Mungkin sobat sudah pernah melihat dan bahkan sudah menerapkan atau memasangnya di blog sobat, namun seperti pengalaman saya yang sudah pernah memasang related post with thumbnail di bawah posting blog, berangsur-angsur akan hilang dan sudah tidak pernah muncul lagi related post with thumbnail di bawah posting blog. Penyebabnya adalah dikarenakan kode script related post sudah di hapus oleh sipembuat atau juga bisa dibanned, jadi ya mau tidak mau kode script yang kita pasang di blog kita juga tidak bisa berfungsi lagi dengan baik.

Kali ini saya punya solusinya untuk sobat semua, karena baru kemarin saya baru menggantinya dengan script yang baru dan saya terapkan pada artikel blog ini. Untuk melihat contohnya silahkan sobat lihat gambar screenshot di bawah ini.

Cara Membuat Related Post With Thumbnail Di Blog

Untuk Cara Membuat Related Post With Thumbnail Di Bawah Setiap Postingan Blog, silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan Masuk >> Login ke akun blog sobat
2. Lalu klik Menu>> Template >> kemudian >> Edit HTML
3. Silahkan sobat cari kode </head> gunakan CTRL+F untuk mempercepat pencarian.
4. Setelah ketemu, kemudian sobat letakkan semua kode berikut tepat di atas atau sebelum kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start By KUCOPAS -->
<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:#00FF00;}
</style>
<script src='http://kucopas-js.googlecode.com/files/releatedimage.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End By KUCOPAS -->

5. Kalau sudah, masih dalam Edit HTML. Silahkan sobat cari kode yng berwarna biru berikut dibawah ini.

<div class='post-footer-line post-footer-line-1'> (Gunakan CTRL+F untuk mempermudah pencarian).

6. Kemudian sobat letakkan kode di bawah ini tepat di bawah atau sesudah kode <div class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails Code Start By KUCOPAS -->
<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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
var relatedpoststitle="Related Post";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End By KUCOPAS -->

7. Sebelum di simpan, silahkan sobat preview atau pratinjau terlebih dahulu.
8. Silahkan di SIMPAN atau Save, jika hasilnya sudah oke seperti yang sobat inginkan.
9. Selesai dan lihat hasilnya.

Keterangan:
  • var maxresults=7; = angka 7 adalah related post yang akan di tampilkan, silahkan sobat ganti angkanya.
  • background-color:#00FF00; = adalah warna Background bila tersentuh Mouse, silahkan sobat ganti kode warnanya seperti yang sobat iginkan.
Jika sobat sudah berhasil memasang Related Post with Thumbnail di bawah posting Blog, jangan lupa di Like yach... Bila sobat masih belum jelas, silahkan bertanya dan di comment postingan ini.

Artikel Terkait:

thumbnail Title: Cara Membuat Related Post With Thumbnail Di Blog
Posted by:Ku Copas
Published :2012-04-18T13:53:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Related Post With Thumbnail Di Blog
Comments
9 Comments

9 comments:

  1. saya sudah ikuti semua intruksi tapi kok gak muncul kenapa ya?mohon bantuanya saya sangat membutuhkan bantuan.ini blog saya http://hasilsepakbolaonline.blogspot.com

    ReplyDelete
  2. @jiro >> Mungkin kode yang belum sobat terapkan atau salah penempatanya. jadi related post with thumnail tidak bisa berfungsi dengan sempurna. Silahkan di teliti lagi sob...

    ReplyDelete
  3. thanks sob, udh work nih


    http://christiandwiwijaya.blogspot.com/

    ReplyDelete
  4. nice post sob
    kunjungi blogzets.blogspot.com

    ReplyDelete
  5. Thanks Infonya..
    Izin cobal

    http://fhirman-ilham.blogspot.com

    ReplyDelete
  6. Gan kalau mau ubah size bentuk kotakan postnya itu gmn??
    Thx...

    ReplyDelete
    Replies
    1. Buka kode JS nya di notepad sob...
      http://kucopas-js.googlecode.com/files/releatedimage.js
      Edit size-nya kemudian upload kembali di hosting kamu.
      lalu tempel kembali kode js nya seperti pada artikel di atas.
      cara upload kode JS nya sobat bisa lihat caranya pada artikel berikut:
      http://kuc0pas.blogspot.com/2013/01/cara-meringankan-loading-blog-dengan-google-code.html

      Delete
  7. Info yang baguz sekali untuk disimak.....
    Bermanfaat sekali untuk saya....

    Mohon kunjungan baliknya yaa....
    Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

    Title: Zamrud News
    ( www.zamrudnews.com )

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger