Sunday, October 23, 2011

CARA MEMBUAT ARTIKEL TERKAIT/ RELATED POST DENGAN THUMBNAIL BERJALAN

Sobat Blogger,  Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikeL yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi meningkat, orang akan betah untuk berlama-lama di blog kita.



Cara Membuat Artikel Terkait dengan Disertai Thumbnails

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML (Jangan lupa Download template dulu yaaa)
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://blogergadgets.googlecode.com/files/relatedthumbs21.js'/>
<type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->



7. Lalu cari kode di bawah ini

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

Atau 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.
<!-- Marquee Restana 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</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=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<a href='http://restana-asta.blogspot.com/2011/10/cara-membuat-artikel-terkait-related.html' style='float:right;' target='_blank'>Thumbnail Related Post Berjalan (Marquee)</a></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://restana-asta.blogspot.com/' style='display:none;'>RESTANA ASTA</a>
</b:if>
</b:if>
<!-- Marquee Restana Related Posts with Thumbnails Code End-->

10. Simpan Template jika sudah selesai.

Keterangan.
Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=10; --> Berarti artikel terkait yang akan kita tampilkan adalah 5

<h3><b>Related Posts</b></h3>";  --> Judulnya adalah Related Posts. bisa di ubah sesuka hati.(Jika bisa) heheheh... jangan asal ubah yaa.. nanti bisa rusak lhooo


Kalau post ulang, mohon isi link sumber yaaa.... soalnya sulit lhooo buat ini... hargailah saya...heheheh

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. mas,,pas yg di kotak pertama itu,,
    yang dibagian type='text/javascript'/
    kok pas aku simpan template muncul kayak gini yaaa???
    Element type "type" must be followed by either attribute specifications, ">" or "/>"

    itu kenapa yaaaa??
    padahal aku cuma kopas" aja,,gak da di rubah" ;((

    ReplyDelete

Silakan Berkomentar sesuka Hati Anda Demi Kelancaran Kami Membangun Blog Ini.

Related Posts Plugin for WordPress, Blogger...

BERJALAN MENDAKI GUNUNG EVEREST, TERTATIH BERJALAN DI GURUN SAHARA, BERLAYAR MENYEBRANGI LAUTAN HINDIA,HANYA UNTUK MELIHAT RESTANA'S BLOG