Sabtu, 25 Juni 2011

Cara Membuat Related Post Marquee

Artikel Terkait atau Related Post adalah Artikel atau postingan yang memiliki label sama, misalkan saja artikel ini yang bang kahar kasih label "Tutorial Blog", nanti pada akhirnya postingan bang kahar lainnya yang memakai label "Tutorial Blog" juga akan menjadi artikel terkait dengan artikel yang ini.


disini ada sedikit menambahkan sedikit variasi, agar artikel terkait tersebut tidak statis atau hanya diam saja, disini artikel terkait akan bergerak kekanan dan kekiri atau menggunakan settingan marquee, tujuannya untuk memperindah blog dan mempermudah visitor mencari artikel yang diinginkan dengan label yang sama.

Disini bang kahar akan memberikan Tutorial Blog, Cara Membuat Artikel Terkait Bergambar Berjalan, simak dan praktekan :
  1. Login ke Blogger.
  2. Di halaman Dasbor, kita pilih Rancangan.
  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 Blogger Katro 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 Blogger Katro End-->

7. 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 (no.7)

<!-- Marquee Bang Kahar 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>
</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://kep-katro.blogspot.com/2011/06/cara-membuat-related-post-marquee.html' style='display:none;'>Related Post Marquee</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Bang Kahar Related Posts with Thumbnails Code End-->


9. Simpan

catatan : var maxresults=10 bisa kalian ganti dengan angka berapapun, 10 adalah jumlah posting yang akan ditampilkan di related post yang dibuat.

Demikian tutorial blog dari bang kahar, semoga bermanfaat :)

Tidak ada komentar:

Poskan Komentar