Warung Online

Wednesday, November 10, 2010

Membuat Artikel terkait dengan Thumbnail berjalan

Saya rasa semua telah mengetahui apa itu "Artikel terkait dengan Thumbnail",namun disini saya mengaplikasikan fungsi HTML ke dalam Script Related Post atau Artikel Terkait ini.
Inti dari "Artikel Terkait" adalah menampilkan beberapa link yang satu kategori dengan artikel yang baru saja anda baca,dan ditampilkan dengan gaya yang menarik,menggunakan gambar dan berjalan.

Dalam hal ini,ARtikel Terkait dengan Thumbnail berjalan akan mempercantik template Weblog Anda hanya dengan sedikit sentuhan Marquee.

Langsung saja kita praktek.

1.Buka Akun Blogger Anda.

2.Masuk "Design" >> "Edit HTML" dan beri tanda centang pada "Expand Widget Templates"

3.Cari kode  </head>

Hapus kode </head> dan ganti dengan kode dibawah ini
<!--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-->

4.Kemudian Cari kode : line post-footer-line-1
   Kode setiap Template mungkin berbeda-beda
   Di Template saya kodenya adalah <div class='post-footer-line post-footer-line-1'>
Lihat Screen Shoot
(Klik kanan Open new tab untuk mmperbesar)


Copy Kode dibawah ini 
<!-- Marquee Serbablog 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=11;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</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://agielweb.info' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.agielweb.info' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

dan Paste dibawah kode <div class='post-footer-line post-footer-line-1'> 

Kata Related Posts bisa anda ganti



5.Simpan settingan,dan selesai..Artikel terkait dengan Thumbnail Berjalan sudah terpasang.









Donasi Anda akan sangat berharga untuk Kami



ATAU di
LibertyReserve
U2815283


2 comments em “Membuat Artikel terkait dengan Thumbnail berjalan”

Post a Comment