Cara membuat Related Post Dengan Gambar Berjalan

Penulis Muh Akram Diterbitkan 7/08/2012

Saya Akan Menjelaskan Cara membuat Related Post Dengan Gambar Berjalan , Anda Bisa Lihat Hasinya Seperti Gambar Di Bawah Ini Atau Yang Lebih Jelasnya Lihat Saja Yang Terpasang Pada Blog Ini Jika Anda Tertarik Untuk Membuatnya Silahkan Ikuti Langka Langka Berikut Ini

• Login keBlog Anda

• Lalu masuk ke Rancangan

• Lalu Edit HTML

• Centang Expand Template Widget

• Download Terlebi Dahulu Template Blog Anda Suapaya Lebih Aman Dan Kalau Ada Kesalahan Bisa Dikembalikan Kesemula

• Cari kode </head> (untuk mempermudah pencarian silahkan tekan CTRL + F pada keyboard)

• Copy kode dibawah ini dan letakan tepat diatas kode </head>

<!--Related Post Dengan Gambar 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: #585858; -box-shadow:0 2px 2px 2px #4eabff;-moz-box-shadow:0 2px 2px 2px #4eabff;-webkit-box-shadow:0 2px 2px 2px #4eabff;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:#4eabff;

}

#related-posts a:hover{

color:#000000;

}

#related-posts a:hover {

background-color:#d4eaf2;-box-shadow:0 2px 2px 2px #4eabff;-moz-box-shadow:0 2px 2px 2px #4eabff;-webkit-box-shadow:0 2px 2px 2px #4eabff;

}

</style>

<script src='http://v-script.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>

</b:if>

<!--Related Post Dengan Gambar Scripts and Styles End-->

• Selanjutnya cari kode yang seperti ini <div class='post-footer-line post-footer-line-1'>

•  Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas :

 

<!-- Marquee Vion 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 Post :</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'>

</b:if>

</b:if>

<!-- Marquee Vion Related Posts with Thumbnails Code End-->

•  Setelah Itu Simpan Template 

Keterangan : 

1. Warna Biru Anda Bisa Ganti Demgan Kata Kata Yang Lain Yang Anda Inginkan
2. Warna Merah Adalah Jumlah Artikel Yang Akan Di Tampilkan