Cara Membuat Artikel Terkait Dengan Animasi Gambar Bergerak

Punya hobi ngeblog memang menyenangkan apalagi banyak mendapat teman dari blog serta dapat membagikan apa yang bisa dibagi sehingga dapat membawa manfaat untuk orang lain. Ok kali ini saya akan berbagi tutorial blogspot mengenai Membuat Artikel Terkait Dengan Animasi Gambar Bergerak. Sepertinya banyak macamnya related post atau artikel terkait untuk dipasang di blog, salah satu postingan saya yaitu membuat related post di dalam postingan dan juga tentang membuat related post linkwithin.

Bagaimana untuk Membuat Artikel Terkait Dengan Animasi Gambar Bergerak di blogspot? Artikel terkait ini jika dipasang di blog tentunya akan membuat tampilan blog anda semakin menarik, karena gambar / thumbnail dari postingan yang sudah anda buat akan bergerak dan akan berhenti apabila disorot mouse, menarik bukan? Simak tips dan triks blogspot cara membuat dan memasang related posts di bawah postingan.

Berikut langkah Membuat Artikel Terkait Dengan Animasi Gambar Bergerak

1. Login ke Blogger.
2. Pilih Templates 
3. Klik Edit HTML
4. Backup dulu template untuk jaga-jaga kalau ada yang salah 
5. Beri tanda centang pada kotak kecil dekat Expand Template Widget
6. Gunakan F3 untuk mencari kode </head>
7. Kalau sudah dapat lalu letakkan kode dibawah ini tepat diatas kode </head>

<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:#FF5E00;
}
</style>
<script src='https://sites.google.com/site/blogrudyhartono/js/relatedposts.js' type='text/javascript'/>
</b:if>

8. Langkah selanjutnya cari kode seperti di bawah ini :

<div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>

9. Lalu letakkan kode dibawah ini tepat dibawahnya

<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://teknik-blog-tutorial.blogspot.com/2012/09/membuat-artikel-terkait-dengan-animasi.html' style='display:none;'></a>
</b:if>
</b:if>

Keterangan :
1. var maxresults=10; merupakan artikel terkait yang akan ditampilkan, silahkan anda ubah
2. Related Posts kalau mau dirubah dengan artikel terkait, silahkan saja

Selamat dicoba tutorial Membuat Related Posts Dengan Gambar Animasi Bergerakpada blog anda, semoga aja bermanfaat untuk anda yang mau mencobanya, happy blogging.