Cara Pasang Related Post Gambar / Thumbnail

Cara Pasang Related Post Gambar / Thumbnail -  
Assalammualaikum wr wb 
wich.... posting lagi nich, mumpung ada kesempatan posting
kali ini saya akan berbagi ilmu sedikitlah tentang "Cara pasang artikel terkait gambar"
oke enggak usah lama-lama berikut adalah caranya:
  • Langkah pertama yaitu login ke blog anda > Design > Edit HTML > Centang expand widget templates.
  • Cari kode </head> dan kalau sudah ketemu silahkan paste kode di bawah ini tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Sekarang anda cari kode ini
<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
Nah kalau sudah ketemu, sekarang paste kode berikut di di bawah kode tadi
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&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'/>
<!-- remove --></b:if>


Berikut ini adalah kode yang bisa anda ganti sebelum menyimpan template (ganti tulisan yang berwarna merah)


jumlah artikel terkait muncul
var maxresults=5;


Jumlah artikel terkait / label
max-results=6


Judul artikel terkait
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";


Warna tulisan pada artikel yang terkait, silahkan anda ganti sesuai keinginan anda. Cari kode warna
var splittercolor="#d4eaf2";


Nah kalau sudah selesai anda bisa klik save template dan selesai :).


Artikel Terkait dengan Gambar / Thumbnail ini hanya muncul pada halaman posting, jika anda ingin Artikel Terkait dengan Gambar / Thumbnail ini muncul di semua halaman blog, anda bisa menghapus kode
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> dan <!-- remove --></b:if>

6 Responses to "Cara Pasang Related Post Gambar / Thumbnail"

  1. Ini hasil akhirnya itu yg dibawah postingan ada gambar berjajar itu ya mas? kalau bisa kasih preview dikit dunk mas, hehehe thanks ilmunya ya, selalu bermanfaat!

    BalasHapus
  2. iya gan gambar berjajar, software untuk capture backgraundnya lagi eror gan, maaf ya gan...........

    BalasHapus
  3. related postnya ntar apa bisa berjalan ya, akunya mau cari yang seperti itu
    nice share mas bro..

    BalasHapus
  4. makasi gan..ane coba ya..

    BalasHapus

Jangan Menulis Komentar Mengandung
SPAM, SARA, P*RNO Atau KATA KASAR..!!