Judul : Cara Membuat Realated Post dengan Gambar
link : Cara Membuat Realated Post dengan Gambar
Cara Membuat Realated Post dengan Gambar
Kali ini saya akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Ingin tahu caranya bukan? Dengan memberikan gambar pada artikel terkait pada blog kita maka blog akan terlihat lebih menarik,,, naah dengan itu mazinu akan memberikan tutorial blogger ini kepada kalian yang sebelumnya tutorial ini sudah saya pakai dan hasilnya lumayan bagus,, tapi mazinu lebih suka yang simpel2 saja seperti yang mazinu gunakan saat ini! yaitu dengan memasang Artikel Terkait dengan icon sendiri. Tapi semua itu selera sendiri-sendiri. benar kan?
yang hasil Realated Past-nya nanti seperti ini : (gambar disertai judul artikel)
Kalau kalian ingin memasang di Blog kalian,, silahkan ikuti cara yang mazinu berikan dibawah ini :
yang hasil Realated Past-nya nanti seperti ini : (gambar disertai judul artikel)
Kalau kalian ingin memasang di Blog kalian,, silahkan ikuti cara yang mazinu berikan dibawah ini :
- Login ke akun Blogger kalian.
- Klik Template >> Edit HTML >> Lanjutkan (centang Expand Template Widget).
- Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>
- Pastekan kode di bawah tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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.6em;
font-weight: bold;
color: black;
font-family: Georgia, Times New Roman , 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKYlQMPfdJ2IFgifefrkZok7uailH0qlIKbGGHYHPhbny-fUVv8ASrjtqybRs_LHZSaobdOkoWhVWAfFlEjW-JZhwVDgXIaSVfJwR3yWPKCT6ESsOUKrhuYYWYpdzVLavgo8YVrVMm8U/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<!-- remove --><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.6em;
font-weight: bold;
color: black;
font-family: Georgia, Times New Roman , 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoKYlQMPfdJ2IFgifefrkZok7uailH0qlIKbGGHYHPhbny-fUVv8ASrjtqybRs_LHZSaobdOkoWhVWAfFlEjW-JZhwVDgXIaSVfJwR3yWPKCT6ESsOUKrhuYYWYpdzVLavgo8YVrVMm8U/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
- Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode berikut tepat di bawah kode <data:post.body/>
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
- Simpan dan lihat Hasilnya! Semoga Cara Membuat Realated Post dengan Gambar ini Bermanfaat!...
Mohon maaf untuk sementara saya pasang script anti copas, untuk mendapatkan kode tentang Cara Membuat Realated Post dengan Gambar diatas silahkan bisa add saya di facebook, klik disini! atau bisa follow dan inbox google+ saya!
5 Responses to "Cara Membuat Realated Post dengan Gambar"
wah Nice tutor Ny Sob
follow back nya mas saya tunggu ?
wah kok gue coba berkali kali kok kagak bisa gan???
Makasih gan untuk tutornya, sangat membantu :)
http://goo.gl/yeUiCg
terimakasih informasinya :)
Post a Comment