Artikel berhubungan dengan gambar

By Unknown | Sabtu, 07 Juli 2012

Sebelum Membaca, Ayo Berbagi :

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"

<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://u-sup.googlecode.com/files/artikelberhubungandengangambar.js' type='text/javascript'/>
</b:if>

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"

<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>
<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:loop>
<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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href=http://pusat-cara.blogspot.com/2011/07/artikel-berhubungan-dengan-gambar.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://pusat-cara.blogspot.com/" style='display:none;'>blogspot tutorials</a>
</b:if></b:if>

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

PLEASE ATTENTION !

Untuk memperbaiki dan mengembangkan blog ini menjadi lebih baik, mari bersama - sama kita bangun, caranya? Apabila kamu menemukan link yang mati/sudah tidak berfungsi atau gambar yang sudah tidak muncul/expire, silahkan hubungi kami disini. Laporan anda sangat berpengaruh pada perkembangan blog ini.Tanks atas perhatiannya thanks