Cara Membuat Artikel Terkait Dengan Gambar Berjalan

Cara Membuat Artukel Terkait Dengan Gambar Berjalan

Apabila kita membuka dan kemudian membaca artikel yang terdapat pada sebuah blog, maka hampir dapat dipastikan bahwa di bawah setiap artikel yang dibuka dan dibaca tersebut terdapat beberapa tautan dengan berisikan daftar judul artikel yang memiliki keterkaitan kategori atau label dengan artikel yang dimaksud. Dimana model daftar artikel yang ditampilkan pun sangat bervariasi. Mulai dari yang hanya menampilkan daftar tautan, menampilkan daftar link dengan fungsi scroll, menampilkan daftar tautan disertai dengan gambar, dan bahkan dengan menampilkan kombinasi beberapa model tersebut, yang secara umum daftar semacam ini disebut sebagai daftar artikel terkait.
pada kesempatan kali ini saya akan menjelaskan bagaimana Membuat Related Post Dengan Gambar Berjalan.
cara-caramembuat Related Post atau artikel terkat dengan Gambar berjalan:

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: 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://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8. lalu cari kode berikut:

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

-jika tidak menemukannya cari kode berikut ini

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

9. jika sudah ketemu dari salah satu kode diatas, copy paste kode berikut tepat di bawah nya:

<!-- 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>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://bakalan-tlogorejo-city.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

10. Simpan template dan lihat hasilnya

Catatan :

Tulisan yang berwarna "Related Posts" yang berwarna merah diatas bisa anda ganti dengan kata-kata lain

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

Nah itulah Cara Membuat Related Post Dengan Gambar Berjalan, semoga artikel ini dapat bermanfaat untuk anda...!!!