Cara Membuat Related Post Dengan Thumbnail di Bawah Posting Blog

Melanjutkan Tips Blog Tentang Cara Pasang Related Post Bergerak Pada Sidebar Blog kemarin,kali ini shilopedia.net akan memberikan tips yang sama seputar related post dengan thumbnail,namun kali ini letaknya yang berbeda yaitu dibawah postingan blog sobat.Tips kali ini adalah Cara Membuat Related Post Dengan Thumbnail di Bawah Posting Blog seperti gambar dibawah penampakannya.

Langsung saja berikut langkah cara pembuatannya :

1. Log in ke account blogger anda.
2. Klik "Template" lalu "Edit HTML". lanjutkan
3. Centang "Expand Template Widget"
4. Cari kode </head> dan Copy kode di bawah ini lalu Paste tepat di atas </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: 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://galang.googlecode.com/files/relatedposts.js' type='text/javascript'/></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Setelah itu cari kode <div class='post-footer-line post-footer-line-1'>, lalu Copy kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.

<!-- 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>yuk kita baca yang lainnya</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://celoteh-galang.blogspot.com/2011/04/membuat-artikel-terkait-thumbnails.html' style='display:none;'>Thumbnail Related Post</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

keterangan: tulisan yang berwarna merah tebal diatas bisa sobat ganti dengan kata-kata sobat sendiri
6. Simpan template anda dan lihat hasilnya. 

Demikian Tips Blog dari shilopedia.net tentang Cara Membuat Related Post Dengan Thumbnail di Bawah Posting Blog.Semoga bermanfaat.

Artikel Cara Membuat Related Post Dengan Thumbnail di Bawah Posting Blog ini dipublish pada hari . tolong di share sekalian kalau suka dengan artikel ini.Terimakasih atas kunjungan Sobat silahkan tinggalkan komentar. pada kontak komentar yang sudah ada,. jangan lupa untuk klik like fb dan follow twitter kami ya,.

Ikuti @bujang_online

Artikel Terkait: