Cara Membuat Related Post dengan Gambar Pada Blogspot

Cara membuat related post ini artinya sendiri adalah artikel terkait, sehingga yang baik adalah menunjukkan artikel yang terkait dengan postingan, sehingga menambah wacana pembaca.
Cara membuat related post dengan gambar pada blogspot, banyak macamnya. Ada yang memakai  judul tulisan saja, ada juga kotak gambar dengan judul, sehingga terlihat lebih menarik. Nah sekarang kita akan mencoba membuat related post disertai dengan gambar berjalan, penampilannya akan bergerak ke kanan kiri. 

Pembuatannya dengan media html pada template blogspot. Sebenarnya ada cara simple dengan related post media linkwithin tetapi katadang-kadang tidak sesuai dengan tema postingan.

Berikut inilah langkah-langkah delam pembuatanya;

1. Login ke Blogger dengan menggunakan akun anda

2. Lalu masuk ke Rancangan

3. Lalu Edit HTML

4. Centang Expand Template Widget

5. Jangan lupa untuk mendownload dulu template anda. dan kalau ada kesalahan bisa dikembalikan kesemula

6. Kemudian cari kode </head> (untuk mempermudah pencarian silahkan tekan CTRL + F pada keyboard)

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

<!--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://sundaboy.googlecode.com/files/relatet%20post.txt' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

8. Selanjutnya cari lagi kode yang mirip dengan kode dibawah ini

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

9. Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas

<!-- 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>Artikel Terkait</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=8;

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-->

10. Simpan template dan lihat hasilnya

Catatan :

Angka 8 merupakan jumlah artikel terkait yang akan ditampilkan, anda bisa merubahnya sesuai keinginan anda.

sumber