Membuat Related Post Dengan Thumbnail (Yang Telah Disempurnakan)

Download template dulu sebagai jaga jaga jika terjadi kesalahan
Buka menu Design -> Edit HTML
Beri centang pada "Expand Widgets Templates"
Letakkan kode dibawah ini  diatas </head>

    <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.2em;
    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:#cccccc;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEGomBqS0chYLB59jyNXjUZCYVosPuEC9aZvALN2HZR3nQFIeSnuEONwf7mD23_cKnGQruODFnhJulzdOCz9JW9ceLx40ZoqusAVllQUhWRJKhccZY6Qh04rJQqW4HCCGtUYm_F7mHTrA/s400/noimage.png";
    var maxresults=29;
    var splittercolor="#cccccc";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://dedicahmad.googlecode.com/files/relatedpoststhumnailrisalahati.js' type='text/javascript'/>
</b:if>
  

4. Kemudian sobat cari kode berikut ini..

 <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>

5. Bila tidak ada maka cari kode ini.tiap template beda beda.

    <div class='post-footer-line post-footer-line-1'>
atau kode ini    

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

6. Jika sudah ketemu dari salah satu kode tersebut,letakkan dibawahnya kode berikut ini:

<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=29&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>


7. Pratinjau,jika berhasil simpan template

keterangan:

mengatur jumlah kotak yang ditampilkan kita ubah value dari kode berikut.
var maxresults=29;

mengubah jumlah post yang ditampilkan tiap label kita harus mengubah kode berikut.
max-results=29

mengubah title "Related Post" maka editlah kode berikut.
var relatedpoststitle="Related Posts"

mengubah warna pembatas ubahlah kode berikut.
var splittercolor="#cccccc"

mengganti tampilan gambar kosong bisa mengubah URL dari kode berikut.
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEGomBqS0chYLB59jyNXjUZCYVosPuEC9aZvALN2HZR3nQFIeSnuEONwf7mD23_cKnGQruODFnhJulzdOCz9JW9ceLx40ZoqusAVllQUhWRJKhccZY6Qh04rJQqW4HCCGtUYm_F7mHTrA/s400/noimage.png"

Cara kedua

Pastekan kode ini 

 <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=24&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'/>
<br/>
</b:if>


di antara kode

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>

<-Letakkan kode disini->

  </div>
</b:includable>

setelah itu pastekan kode ini tepat di atas kode </head>


<style>
#related-posts{
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
}

#related-posts h2{
text-shadow:1px 1px 0 #fff;
border-top:1px solid #aaa;
background:#f6f6f6;
font-size:17px;
color:#555;
font-family:Oswald, Georgia, serif;
margin:0 0 10px;padding:5px;
}

#related-posts a{
color:#000;
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
overflow:hidden;
display:block;
width:82px;
height:155px;
}

#related-posts a:hover{
background:#f5f5f5;
color:#000;
overflow:hidden;
}

#related-posts a img{
transition:.5s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
box-shadow:none;
padding:4px
}

#related-posts a img:hover{
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
margin-bottom:5px;
}

#rptxt{
padding-top:5px;
width:72px;
height:65px;
margin:3px;
border-top:1px solid #999;
font-style:italic;
font-family:Dosis,Arial;
font-size:11.5px;
}

#postcat{
padding:2px 5px;
background:#999;
border-radius:3px;
color:#fbfbfb;
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
}

#postcat:hover{
background:#fe8c25;
text-decoration:none;
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
color:#fbfbfb
}

</style>
<script type='text/javascript'>
//<![CDATA[
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHi5LQGmsXj7t6BMdyLBZ998SAvPuf3GvXxlRUOSVBj3lH8t5w4vWGxKDZbRrOfhRtqqLb2UBx3LjjtMlFiUYioXXju-tVVWPQOM58msRzHeG1pVi74SJdLw4UwcoaMC1GrVwjd7kXHQQ/s0/noimage.jpg';
var maxresults=20;
var splittercolor='#fff';
var relatedpoststitle='you might also like these posts';
//]]></script>
<script src='http://dedicahmad.googlecode.com/files/relatedpoststhumbnails.js' type='text/javascript'/>

Membuat Related Post Dengan Thumbnail (Yang Telah Disempurnakan)

Posted by: Risalahati Dedic Ahmad Updated at: 00:53