Cara membuat related post with thumbnail. Seperti halnya posting sebelumnya yang telah dibahas yaitu
cara membuat related post by categories (artikel yang berkaitan melakui kategories), posting kali ini tidak jauh beda, letak perbedaan yang signifikan pada
cara membuat related post with thumbnail adalah gambar. Related post yang ini artinya di lengkapi dengan gambar sehingga akan mempercantik tampilan posting sobat. Untuk lebih jelasnya sebaiknya langsung ke TKP yuk.
Langkah-langkah pasang related post with thumbnail:
1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit HTML dan centang kotak "Expand Template Widget"
2. Cari kode </head> dan ganti dengan kode di bawah ini
<!--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: black;
font-family: Georgia, “Times New Roman”, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
3. Kemudian cari kode
<div class='post-footer-linepost-footer-line-1'>
jika tidak ditemukan coba cari kode di bawah ini
<p class='post-footer-linepost-footer-line-1'>
Sekarang tinggal meletakkan kode di bawah ini sesudahnya
<!-- 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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<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-->
4. Jika sobat ingin mengganti berapa banyak related post yang akan ditampilkan maka sobat harus mengganti kode atau script di bawah ini.
var maxresults=5;
5. Jika sobat ingin mengganti title atau judul dengan yang sobat inginkan maka sobat cukup mengganti kode atau script di bawah ini
var relatedpoststitle="Related Posts";
Selesai deh membuat related post with thumbnail. Ok blog belajar seo blogspot ini akan membahas lebih banyak lagi tentang blogger tutorial untuk itu sering-seringlah mampir lagi ok. Selamat mencoba...
Awalnya berita menggembirakan yang datang dari google yaitu update pagerank (PR) pada akhir bulan juni 2011 tepatnya tanggal 29. mendengar kabar yang baik tersebut langsung saya cek semua blog dummy yang dibangun dengan susah payah, dan ternyata banyak yang mendapat pr 2 dan 3. hehehe...
