Bismillah... pada kesempatan ini saya akan tulis kembali tentang cara membuat related post di blogger,  namun pada kesempatan ini saya akan menulis tentang related post dengan gambar, untuk membuat related post dengan gambar seperti di bawah caranya hampir sama seperti pada postingan yang terdahulu, namun ada sedikit penambahan script.
relateed post blogspot
Related post dengan Thumbail/Gambar
Oke sekarang kita langsung saja, langkah pertama untuk membuat related post dengan thumbail/gambar yaitu :
  • Sobat Login ke akun Blogger
  • Terus Sobat masuk ke area Design/Rancangan Blog
  • Langkah Selanjutnya Klik Tab Edit HTML
  • Terus jangan lupa sobat centang Expand Widget Templates
  • Terus sobat cari tag </head>, setelah ketemu tag </head> sobat copy kode di bawah ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.rthumbail{
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#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;
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://1.bp.blogspot.com/-djv2KDm4i1E/TnbxoZXbtpI/AAAAAAAAAOI/9faexSy8uZU/s746/noimages.gif&quot;;
var maxresults=12;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;&quot;;
</script><script src='http://bloggertutorial.googlecode.com/files/related-thumbail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Setelah itu sobat cari tag/kode <div class='post-footer-line post-footer-line-1'> atau yang menyerupai atau sobat juga bisa meletakannya di bawah tag <data:post.body/>, silahkan yang mana saja boleh yang penting bisa dipasang, setelah itu sobat copy kode di bawah ini dan letakan di bawah kode <data:post.body/> atau kode <div class='post-footer-line post-footer-line-1'>.

Kode Related Post Dengan Thumbail 
<div class='rthumbail'>
<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'/>
</b:if>
</div>
Langkah terakhir sobat save template blog nya, dan lihat hasilnya, semoga berhasil. Good Luck Happy Blogging
Axact

Z-PLATE

Terima Kasih Telah Berkunjung dan Berkanan Membaca artikel dari Blog Kami, Silahkan Masukan Komentar Untuk menambah Motivasi Kami.

Post A Comment:

0 comments: