Cara membuat Relatet Post Bergambar -->

Cara membuat Relatet Post Bergambar

,
Selamat malam sobat Multi Blog selamat ketemu lagi dengan blog serba serbi dunia kehidupan agen pulsa Tutorial blogger jasa bikin blog tempat download template/aplikasi/software dan yang lainya.
pada kesempatan ini saya akan sedikit memberikan panduan blogger tentang Cara membuat Related post dengan gambar 

Related Post adalah alat untuk menampilkan cuplikan judul-judul posting yang masih ada kaitanya sama posting yang sedang di bukanya.
dalam hal ini sangat membuka peluang untuk memudahkan bagi para pembaca yang masuk dalam blog kita dan untuk tampilan Related post seperti pada gambar di bawah ini

contoh related post bergambar

dan untuk cara pembuatan related post bergambarbya silahkan simak panduanya di bawah ini :
1.Buka blog anda lalu masuk kedalam dashboard blog
2.pilih template dan klik edit html
3.lalu copi kode di bawah ini dan pastekan di bawah kode </head>

<style type='text/css'>
#related-posts {
margin: 1px 0px !important;
background-color: #ACFA58;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
height: 180px;
width:550px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 0px !important;
padding: 10px !important;
color: rgb(255, 255, 255);
font-weight: normal;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111); 
text-decoration:none!important;   

}
#related-posts a{

font-weight:bold!important; 
color: white;
font-family: arial!important;
border-right:0px!important;
margin: 7px 0px 7px 7px !important; 

}
#related-posts a:hover{
border-right:0px!important;
margin: 7px 0px 7px 7px !important;
background:transparant!important;
text-decoration:underline!important;
    
}

#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 70px !important;
height: 50px !important;
margin-right: 15px !important;
overflow: hidden;
background:#ACFA58!important;     
}

#related-posts img:hover{
opacity:0.5;
    
}

#attb{
font-size:5px!important;
padding-top:200px;
padding-bottom:5px;
padding-left:550px;
  }
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#ACFA58&quot;;
var relatedpoststitle=&quot;Related post:&quot;;
</script>
<script src='https://related-posts-atb-brandnew.googlecode.com/files/related%20posts%20js.js' type='text/javascript'/>

4.copi lagi kode di bawah ini dan pastekan di bawah kode <data:post.body/> yang ke 3 karena kode <data:post.body/> ada 3 buah bahkan kadang lebih dari 3 

<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script><div align='bottom-right' id='attb'><a href='http://www.mahadewapulsa.com'>Related post</a></div>
</div>

5.selanjutnya klik pratinjau dulu untuk mengecek kode nya sudah benar belum menempatkanya , jika sudah benar / tidak eror baru simpan template nya 
6.selesai...

sampai disini tutorial dari Multi Blog Tentang cara membuat Related Post Bergambar jika ada kesulitan silahkan berkomentar saja , nanti saya akan pandu sampai berhasil , Terimakasih.... 



TerPopuler