Cara Membuat Artikel Terkait Bergambar Di Blog||Trik Desain

Artikel terkait bergambar

Oke Kali Ini Syarip Van Delay Akan Menjelaskan
Cara membuat artikel terkait bergambar di blog - Artikel terkait di blog sangatlah penting, karena akan memudahkan pengunjung untuk mencari artikel yang tetap berada pada kategori yang sama. Sebelumnya saya sudah menuliskan tetantang membuat recent post ini juga sangat penting bagi blog.

Kini saya akan berbagi membuat Artikel terkait dengan gambar. Banyak bloggers ingin menggunakan seperti ini karena terlihat menarik. Apalagi blog yang memilik kategori berbagi template ini sangat di rekomendasikan bagi anda.

Mulai saja cara pembuatan Artikel terkait bergambar :

1. Login blogger
2. Pilih Rancangan => Edit html => centang Expand Widget Template
3. Letakkan code di bawah ini sebelum 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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

 4. Setelah itu, silahkan masukkan kode di bawah ini, tepat di atas kode <div class='post-footer'>

<!-- 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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

NB : pilih berapa jumlah artikel yang anda keluarkan, untuk menggantinya cari kode ini di atas dan gantilah dengan yang anda inginkan var maxresults=8; angka di ganti

Selamat mencoba, semoga berhasil. untuk contohnya seperti milik saya ini.