Cara Membuat Artikel Terkait dengan Gambar / Thumbnail
Related Post. Salah satu yang menarik dari sebuah artikel terkait adalah adanya foto atau gambar pada tiap artikel terkait. Artikel terkait model ini sangat bagus diterapkan pada blog-blog bertema lifestyle, olah raga dan juga blog berita. Meskipun demikian tidak ada masalah jika diterapkan pada blog apa saja yang penting pada artikel-artikel yang dimuat pada blog tersebut selalu ada foto atau gambar agar mendukung tampilan artikel terkait dengan gambar jadi lebih sesuai dan bagus.
Tetapi jika blog anda hanya berisi artikel saja tanpa ada gambar atau foto maka tidak dianjurkan memasang artikel terkait dengan gambar seperti ini karena akan membuat tampilan blog menjadi kurang sedap dipandang mata akibat dari kolom thumbnail yang kosong. Jadi pastikan artikel anda memang selalu memiliki gambar atau foto meskipun hanya satu sebelum memutuskan untuk memasang artikel terkait dengan gambar ini.
Bagaimana Cara Membuat Artikel Terkait dengan Gambar di Blogspot?
Langkah cara membuat artikel terkait dibawah postingan dengan thumbnail atau gambar sama dengan langkah-langkah pemasanga artikel terkait yang lain hanya saja pada kode html sudah ditambah kode khusus yang akan memunculkan gambar pada artikel terkait selama artikel yang ada di blog memang memuat minimal 1 buah foto atau gambar.
Langkah Pertama tentu saja login ke blog anda, masukk ke menu template lalu klik edit HTML, kemudian carilah kode </head>.
Copy + Paste kode di bawah ini DI ATAS kode </head>
<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->
Catatan: kode berwarna biru adalah ukuran gambar/foto yang akan ditampilkan, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.
Langkah berikutnya cari kode <div class='post-footer'>
Copy + Paste kode di bawah ini DI ATAS kode <div class='post-footer'>
<!-- 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=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</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=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Catatan: kode berwarna biru adalah jumlah related post, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.
Jangan lupa SAVE Template! Kemudiann refresh blog anda untuk mengetahui apakah pemasangan artikel terkait dengan gambar bekerja dengan baik dan bisa muncul dibawah postingan. Selamat mencoba!
(Sumber kode html pada artikel: http://contohblognih.blogspot.com)
