Cara Membuat Berita Terkait dibawah setiap posting bergambar di Blogger

Salam sob,, kali ini saya akan berbagi tentang bagaimana cara membuat berita terkait atau related post dibawah setiap posting kita di blogger/blogspot. mungkin artikel sudah banyak di bahas di blog temen yg lainnya, sebenarnya caranya hampir sama kok cuman bentuk dan style nya mungkin seditkit yang berbeda, untuk yang saya bahas kali ini seperti dibawah ini :

Nah Bagaimana caranya? gampang saja kok Sob :D

• Pertama sobat Loggin dulu ke blog sobat
• Sebelum Sobat masuk untuk langkah pengeditan html, alangkah baiknya sobat untuk membackup Script template sobat, biar jika nantinya ada eror atau jaringan putus dan sobat pas lagi ngesave templatenya, itu akan jadi masalah besar sob :)). caranya gampang kok .Dasbord>> Template >> Cadangkan/Pulihkan (di kanan paling atas, dibawah porfil sobat) >> Unduh template Lengkap(sobat sudah selesai backup)
• Dasbord >>Template >>Edit Html
• Sobat silah kan cari code <head/> sobat juga bisa pakai cara search dengan tekan Ctrl + F (klick dulu di dalam script html nya) Lalu masukkan <head/> lalu enter
• setelah sobat sudah menemukannya maka langkah selanjut nya adalah Copy dan pastekan code dibawah ini Tepat di atas <head/>       

<!--Related Posts blogsobat.blogspot.com 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 blogsobat.blogspot.com Styles End-->

untuk yang berwarna ungu, sobat bisa gantikan dengan url blog sobat.

• Kemudia Sobat cari lagi code  <data:post.body/> Sobat juga bisa pake denan pencarian Ctrl+ F, jika sobat sudah menemukannya, mungkin yg pertama di tampilkan adalah yang pertama, coba sobat scroll ke bawah lagi, karna itu bisa saja lebih dari satu atau dua, saya sarankan sobat cari yang kedua saja itu agak kebawah lagi , nah jika sobat sudah dapatkan yang kedua, sebaiknya sobat Paste kan Kode dibawah ini pas di Bawah <data:post.body/> tadi :

<!--Related Posts blogsobat.blogspot.com Styles 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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</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://blogsobat.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>
<!--Related Posts blogsobat.blogspot.com Styles End-->

Penjelasan : -code warna Ungu sobat gantikan dengan alamat url blog sobat

                        -code yang warna Hijau sobat gantikan dengan kata seperti : "Berita terkait: " atau "Baca juga :"

                        -code warna biru sobat ganti dengan jumlah posting terkait sobat yang ingin sobat buat, terserah sobat .

Oke , sampai disitu juga saya berbagi artikel tentang  cara membuat related post/berita terkait dengan gambar. Semoga artikel ini bisa membantu sobat, Salam Sukses !

Categories: Desain Template, Tips Blog