Teman-teman, Cara membuat
artikel terkait dengan gambar di Blog atau Related Post gampang-gampang susah lho. Tapi, di sini saya coba ngasih satu cara saja. Sebelumnya saya sudah membuat tips cara memberi warna background dan sesuai permintaan pengunjung kepada saya tolong
di informasikan cara membuat artikel terkait dengan gambar maka saya
harus menempati janji. Berikut ini contoh artikel terkait yang saya akan
rencanakan. Simak baik - baik cara membuatnnya sebagai berikut : Lansung ke TKP aja.....
1. Login ke blog kamu2. Klik Template > Edit HTML centang Expand Template Widget
3. Cari </head> Copy code di bawah ini lalu paste kan tepat di atas </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond="data:blog.pageType == "item"">
<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, “Times New Roman”, 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</script>
4.
Selanjutnya Cari <div class='post-footer'> atau <div
class='post-footer-line post-footer-line-1'/> Biasa nya terdapat
masing-masih 2 buah code di atas tersebut di dalam template, kamu letakan saja
di bagian yang pertama. Lalu kamu copy code di bawah ini dan paste kan diatas
code <div class='post-footer'> atau <div
class='post-footer-line post-footer-line-1'/><b:if cond="data:blog.pageType == "item"">
<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, “Times New Roman”, 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</script>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond="data:blog.pageType ==
"item"">
</b:if><br />
<div id="related-posts">
<b:loop values="data:post.labels"
var="label">
<b:if cond="data:label.isLast !=
"true"">
</b:if>
<b:if cond="data:blog.pageType ==
"item"">
<script
expr:src=""/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6""
type="text/javascript"></b:if></b:loop>
<script type='text/javascript'>
var
currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Baca juga
Artikel Terkait yang mungkin kamu cari";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</b:if></b:loop></div>
<div style="clear: both;">
</div>
<!-- Related Posts with Thumbnails Code End-->
6. Selesai,
sekarang coba kamu buka salah satu artikel untuk melihat apakah pekerjaan kamu berhasil atau tidak.
Silahkan ganti var maxresults=5; untuk jumlah artikel yang ingin di tampilkan.
Thanks buat :
http://basecampari.blogspot.com/2012/11/cara-membuat-arikel-terkait-di-bawah.html
-->
Posting Komentar
Terima kasih telah membaca, mudah-mudahan apa yang anda baca ada manfaatnya. Dengan senang hati, jika anda berkomentar pada tempat yang disediakan dengan bahasa yang santun..