Cara Membuat Related Post dengan Gambar / Thumbnail

Cara Membuat Related Post dengan Gambar / Thumbnail buat yang pengen menambahkan related post atau posting yang berhubungan dengan gambar silahkan mengikuti cara cara berikut ini

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCBOAdW_vogErKwGSkSCWc1BdIqVqooy5dCNoxXqacNYrW816KnMigrw0yNWxh_LDmSGN51Djc2FG8NtgDEunDVLykvfBRScuYaKL9NN6YDUVsAFkBmOUmpLjOn_UjVj26BiWRC2le9l8/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>
Share on :

8 comments:

Tempat Ilmu mengatakan...

Yakin Segala Usaha, Isnya Allah akan Sampai..

PutraSampit: www.putra-sampit.blogspot.com

Anonim mengatakan...

karya tulis yang menarik.. sukses selalu.. amin http://chery031.blogspot.com/

Anonim mengatakan...

Thx infonya gan

Follow n tuker link gan y,

Setia Abadi mengatakan...

gan saya bru pemula cara cari code head nya gi mana gan ko ga ktemu2

Unknown mengatakan...

nice info kang....

Zakia Maharani mengatakan...

Keren!

visit my blog ya! : zakia-maharani.blogspot.com

Unknown mengatakan...

Boleh dicoba nih......

Rysmah mengatakan...

gagal dengan sukses :(

Posting Komentar

Cara Ngeblog Copyright © 2011 | Template created by O Pregador | Powered by Blogger