Cara Memasang Related Post Bergambar

Assalaamu'alaikum...Sahabatku semua..Kali ini kita akan membuat dn menampilkan artikel tentang menambahkan related post (artikel terkait) dengan menampilkan gambar (thumbnail). Dimana dengan adanya tampilan ini akan membuat blog kita menjadi lebih atraktif dan menarik, sehingga bisa membuat pengunjung Sahabat akan terus merangsek blog sahabat dari related post ini. hehehe..



Sudah pasti ini akan bagus bagi blog Sahabat, karena bila pengunjung merasa blog adalah salah satu referensi yang bagus untuk dibaca, maka mungkin sahabat mendapatakan semacam promosi gratis dari kunjungan para pengguna lain.

Berikut Cara Memasang Related Post Bergambar;

Untuk memasangnya Sahabat perlu melakukan beberapa langkah. Berikut adalah langkah dalam memasangnya di blog Sahabat. Oiya artikel kali ini kita beri judul Memasang Related Post (Artikel Terkait) Bergambar (Thumbnail).

Pesan saya, sebelum melakukan perubahan pada halaman HTML Template, sebaiknya Sahabat mem-backup template sahabat terlebih dahulu biar nggak hilang.

Step 1
Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode </head>

<!-- hapus --><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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quothttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN73KTHFu3idc96YaKfxoJgkaXqetOt6pNe8YQdF4albL5fzmCfrzjnfKizfGmcucShcdLry0mSmmR-96Q3alGPhxV0SoKrBREgIUx0ei9ro5exp1AkiL-NNMFwC9kz-Ssspb5IBnbBZI/s84/no%2520image.png&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://the-kampoeng-blogger.googlecode.com/files/relatedpostbergambar.js' type='text/javascript'/>
<!-- hapus --></b:if>

Step 3

Letakkan kode berikut tepat di atas kode <div class='post-footer'> ***

<!-- Awal Kode Related Posts Bergambar-->
<!-- remove --><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>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://thekampoengblogger.blogspot.com'><img alt='Tips Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG3jboHxL8jP5NVCzec9QEfee0XTPZqQF3uHXyVCBqmfwp2XH6NNF_m4u28T603vhs24DL4aSrdy8X1MWgUHelmM0pQn268IA_pRXYHvSTCrMmuAwXFdnFFW0BzEja4LksFPFnXmUZC_O5/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Step 4

Klik Save Template

Gimana sahabatku semua...silahkan dicoba ya...kalo masih ada yang error maka dicoba lagi ya..Semoga bermanfaat.

Cara Memasang Related Post Bergambar 2014-04-21T20:56:00+07:00 Rating: 4.5 Diposkan Oleh: galeri