Monday, 5 September 2011

Membuat Artikel Terkait dengan Gambar (Thumbnail)


Pada postingan Blog Trik kali ini, saya akan membahas cara membuat artikel terkait dengan gambar.
Nah biasanya ini akan muncul klo kita membuka salah satu postingan di blog, dan di bawah postingan itu akan muncul judul-judul artikel yang 1 label dengan postingan yang kita buka, sebagi contoh liat di bawah postingan di blog saya ini.
Baiklah tanpa panjang lebar langsung saja kita mulai tutorial ini.



1. Masuk ke akun blogger sobat
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>


<!--Related Posts with thumbnails Scripts and Styles Start-->

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

<!--Related Posts with thumbnails Scripts and Styles End-->


Kalau sudah, cari kode berikut



<div class='post-footer-line post-footer-line-1'>

Dan letakkan kode berikut ini di BAWAH kode di atas


<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


Kemudian Save dan Selesai

Widget Related Post / Artikel Terkait dengan Gambar / Thumbnail akan menampilkan 5 Artikel terkait berdasarkan label artikel. Jika ingin menambah atau mengurangi jumlah Related Post yang di tampilkan, silahlkan ganti angka 5 (Lima) pada kode var maxresults=5; menjadi lebih banyak atau lebih sedikit.

Jika ingin mengganti tulisan Artikel Terkait dengan kata / kalimat lain, silahkan ganti tulisan Artikel Terkait ( jangan menghapus tanda petiknya) pada kode var relatedpoststitle="Artikel Terkait";


Mungkin anda juga menyukai artikel di bawah ini

3 Komentar:

trikblog4u said...

THANKS YA iNFONYA.,

Mampir juga ke blog Ane : trikblog4u.blogspot.com :D

Fazan said...

thanks gan ... monggo mampir ke blogku juga gan

BritSem said...

mantep flsback www.britsem.blogspot.com

Terima kasih telah berkunjung, Pembaca yang baik adalah yang bersedia meluangkan waktunya untuk meninggalkan komentar