Memasang Artikel Terkait Bergambar di Bawah Posting

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Memasang navigasi artikel terkait di blogspot,(sekarang saya akan berbagi cara pasang artikel terkait dengan gambar horisontal),bagi para blogger sangat diperlukan di blognya. Untuk membantu para pengunjung mudah menemukan konten yang diinginkan. Dan biasanya menu ini diletakkan berdekatan dengan artikel yang memiliki label/kategori yang sama.   Kebanyakan menu artikel terkait di letakkan di bawah postingan agar langsung dapat terlihat oleh pembaca artikel mana yang masih berhubungan dengan yang telah dibacanya. Jadi intinya penting begitu.....! Dengan demikian akan membuat pengunjung merasa betah dan senang untuk balik lagi,tentu akan menjaga trafik/meningkatkannya.

Kurang lebih seperti ini:

Sekarang bagaimana cara memasangnya bagi anda yang ingin membuat artikel terkait di posting. Ikuti langkah dibawah cara memasang kode script nya yang saya ambil dari blog tetangga elfianda.

1. Masuk dasboard > pilih blog yang akan dipasangi (bila blognya lebih dari 1) > Pilih template > klik Edit HTML dan cari kode </haed> . Lalu kopi kode di bawah dan letakkan 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.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

2. Terus anda cari kode seperti ini:

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

Bila anda menemukan lebih dari satu,anda pilih yang awal atau pertama dan letakkan kode di bawah tepat di bawah <div class='post-footer-line post-footer-line-1'/>.

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Baca juga Artikel Terkait Menarik Yang Lain:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

3.  Jika sudah,sekarang klik save/simpan,selesai. Silahkan lihat hasilnya. Semoga berhasil. Untuk tulisan berwarna silahkan anda ganti dengan yang anda inginkan.

Untuk anda yang ingin memasang artikel terkait di letakkan di sidebar tunggu artikel berikutnya...!

Silahkan berbagi dengan tombol share di bawah,mungkin orang lain lebih membutuhkan artikel ini:

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَاٰلَمِين