Minggu, 27 Februari 2011

Membuat Related Post dengan Thumbnail

Selamat pagi sobat coffeebreak. Postingan kali ne mo bahas gimana caranya buat Related post dengan tampilan thumbnail, kayak yang pasang di bawah posting ini. langsung aja yah.


  1. Log In blogger 
  2. Pilih Rancangan terus pilih edit HTML 
  3. Centang pilihan Expand Widget Template 
  4. Buat jaga-jaga jika terjadi kegagalan, download dulu tepalte temen-temen dengan mengklik Download Template Lengkap 
  5. Cari kode :

                                                                     </head>

  6.  Letakkan kode berikut ini 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-->

  7.  Cari kode berikut ini :

    <div class='post-footer-line post-footer-line-1'>
    kalau tidak ada

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

  8.  Letakkan kode berikut ini tepat dibawah salah satu kode diatas 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>
    <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://cumacoffeebreak.blogspot.com/2011/02/Membuat-Related-Post-dengan-Thumbnail.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://cumacoffeebreak.blogspot.com/' 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-->


  9. Save deh
* Tambahan :
var maxresults=5 : Angka 5 menunjukan jumlah related post yang ditampilkan, jadi bisa diubah sesuai keinginan temen-temen
var relatedpoststitle="Related Posts" : Menunjukan judul related post temen-temen, juga bisa diganti sesuai selera temen-temen...

Semoga bermanfaat, selamat mencoba dan semoga berhasil...!!!







2 komentar: