Membuat Related Post atau Artikel terkait dengan gambar yang bisa berjalan, Banyak sekali model-model related post, seperti model related post standart, model related post fungsi scroll dan lainnya. Dengan related post yang satu ini yakni related post bergambar atau dalam bahasa inggris thumbnail related post, dinamakan related post bergambar atau thumbnail related post karena tampilannya cukup menarik dengan adanya gambar atau thumbnail. Sehingga blog akan tampak lebih menarik dan merupakan salah satu cara untuk mempercantik blog yang kita miliki. Sebagai contohnya lihatlah gambar dibawah ini :
Bagaimana setelah anda melihat contoh diatas apakah anda tertarik untuk membuat-nya. Jika tertarik untuk membuat related post bergambar, langkah-langkahnya sebagai berikut :
Log in ke www.blogger.com dengan ID yang dimiliki
Bagaimana setelah anda melihat contoh diatas apakah anda tertarik untuk membuat-nya. Jika tertarik untuk membuat related post bergambar, langkah-langkahnya sebagai berikut :
Log in ke www.blogger.com dengan ID yang dimiliki
Klik Rancangan pada dashboard menu
Klik Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
Selanjutnya cari kode berikut </head>
Klik Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
Selanjutnya cari kode berikut </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.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, 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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Sekarang cari lagi kode dibawah
<div class='post-footer-line post-footer-line-1'>
<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.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, 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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Sekarang cari lagi kode dibawah
<div class='post-footer-line post-footer-line-1'>
Jika tidak menemukan kode diatas, coba cari kode seperti ini
<p class='post-footer-line post-footer-line-1'>
Kalau sudah ketemu anda tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang sobat temukan.
<!-- 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="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<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="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Langkah terakhir Simpan Template kemudian lihat hasilnya.
Keterangan : kode yang berwarna merah dapat diganti sesuai dengan yang sobat inginkan, #585858 (kode background), Angka 5 menunjukkan jumlah artikel yang tampil pada related post, Related Posts (Judul yang diinginkan).
Selamat mencoba.
0 comments:
Posting Komentar