sample andry surya's blog

Artikel berhubungan dengan gambar (thumbnail image)

Jika kemarin saya posting tentang cara pasang artikel berhubungan/terkait biasa artinya hanya teks judul saja yang tampil, tetapi sekarang saya posting tentang cara pasang artikel berhubungan dengan gambar dan judulnya, dengan artikel berhubungan beserta gambar akan semakin mempercantik tampilan blog anda pada bagian halaman single postnya. Nah artikel berhubungan dengan gambar ini akan mengambil judul posting dan gambar pertama dari postingan tersebut dengan menampilkan artikel yang terkait mengambil dari sebuah kategori-kategori yang sama dari artikel yang sedang ditampilkan.

Jika blog sudah memiliki artikel berhubungan versi biasa atau tanpa gambar, sebaiknya hapus dulu agar lebih rapi! kamu bisa menghapus melalui tertarik membuatnya? silahkan ikuti caranya dibawah ini:

1. Masuk ke akun blogger kamu
2. Klik Rancangan---> Edit HTML
3. Beri tanda check  pada  "Expand Template Widget"
4. Cari kode </head> "untuk mempermudah pencarian tekan Ctrl+F"
5. Jika sudah ketemu letakkan kode berikut tepat diatasnya "langkah 4"

<!--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 src='http://u-sup.googlecode.com/files/artikelberhubungandengangambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6. Cari kode <div class='post-footer-line post-footer-line-1'>
-Jika tidak ketemu cari <p class='post-footer-line post-footer-line-1'>
-Atau jika tidak ketemu lagi cari saja <data:post.body/> (jika anda sudah memakai readmore ada dua kode <data:post.body/> jadi letakkan setelah kode yang kedua)

7. Jika sudah letakkan kode berikut tepat dibawah kode tersebut "langkah 6"

<!-- 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'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</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://u-sup.blogspot.com/2011/05/artikel-berhubungan-dengan-gambar_22.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://u-sup.blogspot.com/" style='display:none;'>blogspot tutorials</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

8. Sekarang simpan template kamu
9. selesai lihat hasilnya!


Keterangan :
-  var maxresults=5 rubahlah angka 5 untuk menentukan jumlah artikel yang akan ditampilkan
- var relatedpoststitle="Related Posts" anda bisa merubah dengan sesukamu misalnya : "Artikel yang terkait" dll
- Kamu juga bisa merubah tampilannya dengan mengedit / memodifikasi kode CSSnya kode CSS terletak pada "langkah 5"

from: http://u-sup.blogspot.com/2011/05/artikel-berhubungan-dengan-gambar_22.html

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!

Posted in: Tips Blogging