Membuat artikel terkait dengan gambar merupakan salah satu cara dan teknik untuk memanjakan pengunjung dengan beberpa artikel yang saling terkait dan memang artikel menarik untuk dibaca,sehingga akan menambah jumlah dari pageview setiap postingan yang kamu buat tentunya.Dengan adanya artikel terkait dengan gambar atau artikel dengan thumbnail membuat semua artikel kamu semakin hidup dan semakin tertarik untuk dibaca.
Untuk membuat artikel terkait dengan gambar atau biasa kita sebut related post thumbnail maka dibawah ini saya berikan cara terbaiknya dan sudah saya gunakan untuk artikel terkait gambar untuk blog 4kom ini.Mungkin ini saya bisa kasih contoh bentuknya.
Berikut caranya :
- Masuk ke Blog Kamu
- Klik Template > Edit HTML centang Expand Template Widget
- Cari </head> Copy code di bawah ini lalu paste kan tepat di atas </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<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.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Selanjutnya cari kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/> Biasa nya itu terdapat 2 buah kode yang sama di atas,di dalam template anda, kamu letakan saja di bagian pertama. Lalu kamu copy kode di bawah ini dan pastekan saja diatas kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Baca juga Artikel Yang Mungkin Kamu Cari";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
- |Setelah itu jangan langsung disave dulu templatenya,tapi ada baiknya klik Pratinjau dahulu untuk memastikan kode yang kita letakkan pas dan benar adanya.Sehingga tidak terjadi error atau kesalahan pada template kita.Silahkan juga untuk mengganti jumlah artikel yang terkait yang mau ditampilkan pada kode var maxresults=5; ubah sesuai lebar template anda.
- Jika sudah Pas,langsung simpan template.
- Ok sudah jadi.
Inilah cara membuat artikel terkait dengan gambar yang bisa dijelaskan disini.Semoga membawa manfaat besar ya.
Advertisement
Judul : Membuat Artikel Terkait Dengan Gambar
Deskripsi : Membuat artikel terkait dengan gambar merupakan salah satu cara dan teknik untuk memanjakan pengunjung dengan beberpa artikel yang sa...