Artikel terkait dengan gambar


Artkel Terkait atau juga disebut Related Post yang biasanya disematkan dibawah Entri atau postingan, berfungsi untuk memberitahukan kepada pengunjung blog artikel apa saja yang berada dalam label yang sama, sehingga mempermudah pengunjung untuk dapat mencari artikel yang lebih cocok, untuk kali ini akan kita bahas cara membuat artikel terkait yang mrnggunakan gambar / thumbnail.. Oke, Langsung saja, cara membuat Related post pada blog ini kita bahas.

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

<!--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://gerbangmini-artikelterkait.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Cari kode di bawah ini Atau
<div class='post-footer-line post-footer-line-1'>
Jika tidak menemukannya cari kode berikut ini
<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

<!-- 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>
<h3><b><blink>Baca Juga Yang Ini:</blink></b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=20;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=20;
Berarti artikel terkait yang akan kita tampilkan adalah 20
<h3><b><blink>Baca Juga Yang Ini:</blink></b></h3>
Judulnya adalah Baca Juga Yang Ini

10. Simpan Template jika sudah selesai.

"SELAMAT MENCOBA SEMOGA SUKSES"

Post a Comment

wah bagus juga bang ini artikelnya,namun sekarang blogger ttorial mudah terancam karena algoritma baru google silakan lihat disini kalua gak percaya

http://www.ilham-am.co.cc/2011/03/awas-algoritma-baru-google-algoritma.html

dan salam kenal sebelumnya...

@Jasa Pembuatan RAdio Streaming ya gan ini lagi dikurangi jangka waktu postingnya

Ini dia yang ogut cari-cari. Udah berguru sampai ke negeri Cina, taunya di Little Gate tersedia. Hehe....:a:

Gunakan bahasa yang baik dalam berkomentar, No SPAM , SARA & IKLAN

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget