Cara Membuat Related Posts Dengan Gambar

Cara Membuat Related Posts Dengan Gambar

Posting sebelumnya dari vallery Cara Memasang Kotak Iklan Melayang di BlogSetelah beberapa hari ini saya selalu update mengenai Berita serta Olahraga dan tadi membuka arsip coment ada pengunjung yang menanyakan tentang bagaimana Cara Membuat Related Posts Dengan Gambar di blog mereka, soalnya saya belum pernah memposting artikel ini sebelumnya saya pernah memposting Cara membuat related post dibawah posting blogger nah di situ ada teman yang menanyakan hal tersebut jadi kali ini saya akan membagi informasi yang mungkin juga berguna bagi teman teman blog kutulis lainnya juga yah. Cara Membuat Related Posts Dengan Gambar Thumbail ini cukuplah mudah dan simple namun jika anda belum menguasai mengenai kode script dan juga cara pemasangannya mungkin akan mengalami sedikit kendala, namun jangan khawatir teman jika kamu belum paham silahkan anda belajar karena dengan belajar semuannya akan terasa mudah.

Oke daripada saya kebanyakan omong silahkan di ikuti langkah langkahnya ya teman, silahkan di ikuti langkah di bawah ini.

1. Masuk ke akun blogger sobat

2. Klik design kemudian edit HTML

3. Centang kotak kecil di kanan atas Expand Widget Templates

4. Untuk menghindari kesalahan sebaiknya download full template dulu

5. Setelah itu letakkan kode berikut 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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

Kalau sudah, cari kode berikut

<div class='post-footer'> 

Dan letakkan kode di bawah ini di atas kode di atas

<!-- 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=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

 Nb_ Var maxresults=8 adalah jumlah artikel terkait yang muncul, silahkan di sesuaikan _ Anda bisa mengganti warna tulisan sesuka anda ( background-color:#d4eaf2;) background anda.

Simpan dan lihat hasilnya.

Gimana nih teman Cara Membuat Artikel Terkait Dengan Gambar ini mudah bukan? jika sudah berhasil selamat ya sekarang blog anda semakin bagus dan juga lebih menarik sehingga pengunjung blog semakin betah di blog anda dan juga dengan memasang related post di blog bisa meningkatkan pageviews blog kita lho. Saya rasa cukup sekian tips dari blog kutulis ini dan semoga apa yang saya tulis kali ini bermanfaat bagi teman teman semuannya yah. Makasih dan keep blogging.

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara Membuat Related Posts Dengan Gambar. Anda bisa bookmark halaman ini dengan URL https://portalsolo.blogspot.com/2012/09/cara-membuat-related-posts-dengan-gambar.html. Terima kasih!

Ditulis oleh: Unknown - Wednesday, September 19, 2012