Cara Membuat Artikel Terkait Dengan Teks dan Gambar

Mari kita belajar bagaimana cara membuat Artikel terkait dengan thumbnail (teks dan gambar) pada blogspot anda. Cara ini akan menampilkan artikel yang lain dari blog anda dan akan muncul pada bagian bawah postingan/halaman blog. Berikut (dibawah ini) adalah kode yang harus anda pasang pada Template blog dan langkah cara membuat artikel terkait dengan thumbnail yang perlu dilakukan. Mari kita simak tentang langkah/cara membuat artikel terkait dengan thumbnail sebelum anda mempraktekkannya. Caranya cukup mudah, dan sebelum anda melakukan edit sebaiknya anda back-up dahulu kode scriptnya agar jika terjadi kesalahan kode tersebut masih bisa dikembalikan lagi. Inilah langkah cara membuat Artikel terkait dengan thumbnail (teks dan gambar) pada blogspot selengkapnya.



Membuat artikel dengan thumbnail (teks dan gambar:

* Login dan masuk dashboard Blogspot.
* Klik pada '' Template / Rancangan ''
* Klik '' Edit HTML '' lalu klik '' Lanjutkan ''
* Klik/centang pada kotak '' Expand Template Widget '' (diatas)
* Silakan cari kode  </head>  caranya tekan Ctrl + F , akan muncul kotak find (kiri bawah, lalu masukkan kode </head>
* Paste kode dibawah ini pada posisi di atas kode </head>

<!–Related Posts with thumbnails Scripts and Styles Start–>
<!– remove –><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 type=’text/javascript’>
var defaultnoimage=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR6WaoFZcp3qf1Zwn2CjfTC4Hhx5ZItxEwUIrFp6zmFs2YQXk38O0fzo15uj1BHyXzxEWash3Zo1EQLQ2FN13mdmhyphenhyphenYQAB1o3dqF4zKIwrZ-PRzCUreA8a9zEymrORSx3rps09REB7kHk/s400/noimage.png”;
var maxresults=5;
var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Artikel Terkait”;
</script>
<script src=’http://andreykusanagi.googlecode.com/files/related-posts-thumbnail.js’ type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>


* Langkah selanjutnya, anda cari kode berikut ini

<div class=’post-footer-line post-footer-line-1′>

atau kode ini

<p class=’post-footer-line post-footer-line-1′>

* Setelah ketemu, masukkan kode di bawah ini di atas kode <div class=’post-footer-line post-footer-line-1′> atau <p class=’post-footer-line post-footer-line-1′>


<!– Related Posts with Thumbnails Code Start–>
<!– remove –><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>
<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:loop>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style=’clear:both’/>
<!– remove –></b:if>
<b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’>
<a href=’http://www.andreykusanagi.com’><img style=”border: 0″ alt=”Cara membuat Artikel terkait dengan Thumbnail” src=”http://image.bloggerplugins.org/blogger-widgets.png” /></a>
</b:if></b:if>
<!– Related Posts with Thumbnails Code End–>



* Setelah itu klik '' Simpan Template ''

Untuk mengubah jumlah artikel yang akan tampil, silakan ubah kode var maxresults=5;  dan untuk merubah judul widget silakan ubah tulisan Artikel Terkait pada kode var relatedpoststitle=”Artikel Terkait”; diatas, serta, demikian juga anda dapat merubah warna dari splitter line pada kode var splittercolor. Semoga bisa membantu dan selamat mencoba. Perlu diketahui cara membuat artikel dengan thumbnail ini mungkin tidak bisa diterapkan untuk semua Template (masing-masing template bisa berbeda). Sumber dari link sahabat http://www.andreykusanagi.com. Terima-kasih, salam sukses.