Cara Membuat Related Post Dengan Gambar Berjalan

Setelah Hari Kemarin Kita Membahas Masalah Cara membuat Random Post dengan Gambar di Blogspot Kali ini kita akan Membahas Cara Membuat Related post atau Artikel terkait dengan Gambar berjalan kesamping. Related post bergambar Atau Thumbnail ini tentu akan lebih menarik lagi dan Membuat Tampilan Blog anda Lebih terlihat Profesional. Namun Kekurangan dari Widget related post bergambar ini adalah related post ini terlalu memakan tempat pada halaman blog anda dan Mungkin akan sedikit berat. Sehingga kita tidak dapat menampilkan jumlah artikel secara maksimal Paling maksimal biasanya 10 Artikel saja.

Keuntungannya adalah anda dapat menampilkan artikel blog dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan. Untuk membuatnya widget ini ikuti langkah-langkah berikut ini :
Log in ke blogger.com dengan ID yang dimiliki

Klik Rancangan pada dashboard menu
Klik Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"

Selanjutnya cari kode berikut </head>
Letakkan kode di bawah ini sebelum kode tersebut :
<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#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--> 

Setelah anda menerapkan kode CSS diatas Selanjutnya cari kode berikut ini :

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

Jika tidak ketemu cari alternatif ini :

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

Jika sudah ketemu salah satu kode diatas, letakkan kode dibawah ini setelah salah satu kode diatas.

<!-- Marquee Nobi 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'>

</b:if>

</b:if>
<!-- Marquee Nobi Related Posts with Thumbnails Code End-->

Langkah terakhir Simpan Template kemudian lihat hasilnya

Keterangan kode yang berwarna Merah dapat diganti sesuai dengan yang sobat inginkan, Angka 10 menunjukkan jumlah artikel yang tampil pada related post.

Semoga artikel ini bermanfaat

• facebook
• twitter
• google+
• tumblr
• linkedin
• pinterest
• Whatsapp
• blackberry