Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail

Bismillahirrohmanirrokhim ..

Sebelumnya saya pernah menulis Artikel tentang "Tutorial  Membuat Artikel Terkait Pada BlogSpot" dimana artikel ini menampilkan "Judul" artikel terkait pada setiap postingan Sobat ..
Sekarang ini saya akan mencoba menampilkan Artikel sejenis yaitu "Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail" dimana artikel tidak ahanya  menampilkan "Judul" saja pada setiap artikel yg terkait .. tetapi juga di barengi dengan sebuah gambar pada artikel yg terkait pada postingan sobat .. jadi intinya sobat tinggal memilih satu di antara 2 artiket tersebut .. pilih yg sesuai dengan design Blogspot sobat ..

yuk .. kita melangkah pada tutor nya ..

*Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail*

1. Login ke Bloggger sobat ==> Dasbor ==> Template ==> Edit HTML ==> Lanjutkan dan centang kotakan kecil yg ada di atasnya ..

2. Cari Code </head> [Tekan F3 pada keybord sobat  untuk mempermudah pencarian] .. dan bila sudah ketemu .. letakkan Code di bawah ini , tepat di atas Code </head>

Untuk melihat file Click Spoiler

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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/AVvXsEg2f3B1Zadwi6r5j6hd1bJee2NlIiyuaYqcAM1J0izz24H5ofgRt6L0ML5NE5cKy7JBKULEO5iOpMIgDGRP_0PlCPDsl-bJEc3WahL1pQvY_WLEKwXX1sd5RrOqv-69PzID-gERV-2CTWo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Keterangan :
- Code yg saya tandai dengan warna biru itu adalah untuk menampilkan Gambar/Thumbnail di setiap halaman .. jadi apa bila sobat tidak ingin menampilkan di setiap halaman, maka hapus saja 2 code biru di atas ..
- Rubah/ Ganti setiap Code yg saya tandai dengan warna merah menurut selera sobat

3. Selanjutnya carilah kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> [di karenakan Code template di masing" Blogger  berbeda, maka silakan cari salah 1 dari 2 code di atas] Bila sudah ketemu, letakkan Kode di bawah ini, tepat di bawah salah satu Code di atas ..

Untuk melihat file Click Spoiler

<!-- 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>

Ket :
- Ganti code yg saya tandai dengan warna merah menurut selera sobat ..
- Ganti Juga Tulisan yg seperti Code warna biru di atas .. Bila ingin menampilkan di halaman Posting saja ..

4. Click Preview untuk melihat apakah ada yg Error .. bila tidak ada yg Error , sialkan sobat click "Simpan Template"

Nah sampai di sini dulu Artikel tentang "Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail"
Apabila sobat masih sedikit tidak mengerti tentang tutorial di atas .. silakan tanyakan melalui post komentar di bawah ini ..

Semoga artikel ini memeberi manfaat untuk kita semua ..

Dan semoga Rahmat serta Hidayah-NYA akan selalu tercurah untuk kita semua .. amin ..



<a href="http://nicroganteng.blogspot.com/2012/11/tutorial-menampilkan-artikel-terkait-dengan-gambar-atau-thumbnail.html">Tutorial Menampilkan Artikel Terkait Dengan Gambar/Thumbnail</a>