Cara membuat related post bergambar , related post adalah sama artinya dengan artikel Terkait , jadi jika postingan itu di buka lalu di akir postingan / di bawah jika kita membuat related post akan muncul judul-judul postingan yang ada kaitanya sama postingan yang sedang dibuka.
fungsi menampilkan atau membuat related post adalah memberikan kemudahan untuk para pembaca yang ingin mencari berita di dalam blog atau situs.
Related post ini bisa berupa cuplikan judul-judul posting atau cuplikan judul posting disertai gambar yang ada dalam postingan tersebut, namun pada kesempatan ini Blog Jasa Murah Bikin Website akan memberikan panduan tentang Cara Membuat Related Post bergambar , sedangkan untuk cara membuat related post hanya dengan deretan judul anda bisa membuka panduanya Cara Membuat Related post
penjelasan tentang related post di atas saya kira cukup tapi jika ingin mau menanyakan lagi silahkan berkomentar pada kolom komentar di bawah posting ini.
dan untuk Cara Pembuatan Related Post Bergambar silahkan simak langkah-langkah nya di bawah ini :
1.Buka Blog anda lalu klik desain
2.pilih template dan klik edit HTML
3.Copi kode di bawah ini dan pastekan / tempelkan di bawah kode </head>
<style type='text/css'>
#related-posts {
margin: 1px 0px !important;
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);
height: 200px;
width:630px!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: 10px 0px 10px 10px !important;
}
#related-posts a:hover{
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
background:none!important;
text-decoration:underline!important;
}
#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 50px !important;
margin-right: 15px !important;
overflow: hidden;
background:#444!important;
}
#related-posts img:hover{
opacity:0.5;
}
#attb{
font-size:5px!important;
padding-top:200px;
padding-bottom:5px;
padding-left:560px;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBw2J8mnlVvXe087LWwfx4WdeKaehxlo79BNKxHQ-HGl8-VGhvS3IPyW1MVGVNR7B3BohewLLDxBOkqvpiflJt907HFcDgtx3c5_0RfnwOk0w6nHbJDK0j8VJTQxONW-2mIiQ2RmciQGwD/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related post:";
</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 / letakan di bawah kode <data:post.body/> ( kode tersebut ada 3 buah bahkan ada yang lebih dari 3 buah jadi pastekan di bawah kode <data:post.body/> yang terakir
<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 id='attb' align='bottom-right'><a href="https://jasabikin-website.blogspot.com/2014/08/membuat-related-post-bergambar.html" target='_blank'>Related post</a></div>
</div>
5.untuk menghindari kesalahan penempatan kodenya silahkan klik Pratinjau dulu , jika tidak ada masalah pada kode HTML nya selanjutnya silahkan simpan template nya
6.selesai..
dan silahkan cek hasil pembuatan related post bergambarnya
sampai disini panduan Blogger tentang cara membuat related post bergambar , jika ada pertanyaan silahkan berkomentar saja nanti saya akan pandu sampai berhasil , Terimakasih...
fungsi menampilkan atau membuat related post adalah memberikan kemudahan untuk para pembaca yang ingin mencari berita di dalam blog atau situs.
Related post ini bisa berupa cuplikan judul-judul posting atau cuplikan judul posting disertai gambar yang ada dalam postingan tersebut, namun pada kesempatan ini Blog Jasa Murah Bikin Website akan memberikan panduan tentang Cara Membuat Related Post bergambar , sedangkan untuk cara membuat related post hanya dengan deretan judul anda bisa membuka panduanya Cara Membuat Related post
untuk tampilanya related post bergambar yang ingin saya bagikan cara pembuatanya pada postingan ini contohnya seperti pada gambar di bawah ini
penjelasan tentang related post di atas saya kira cukup tapi jika ingin mau menanyakan lagi silahkan berkomentar pada kolom komentar di bawah posting ini.
dan untuk Cara Pembuatan Related Post Bergambar silahkan simak langkah-langkah nya di bawah ini :
1.Buka Blog anda lalu klik desain
2.pilih template dan klik edit HTML
3.Copi kode di bawah ini dan pastekan / tempelkan di bawah kode </head>
<style type='text/css'>
#related-posts {
margin: 1px 0px !important;
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);
height: 200px;
width:630px!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: 10px 0px 10px 10px !important;
}
#related-posts a:hover{
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
background:none!important;
text-decoration:underline!important;
}
#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 50px !important;
margin-right: 15px !important;
overflow: hidden;
background:#444!important;
}
#related-posts img:hover{
opacity:0.5;
}
#attb{
font-size:5px!important;
padding-top:200px;
padding-bottom:5px;
padding-left:560px;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBw2J8mnlVvXe087LWwfx4WdeKaehxlo79BNKxHQ-HGl8-VGhvS3IPyW1MVGVNR7B3BohewLLDxBOkqvpiflJt907HFcDgtx3c5_0RfnwOk0w6nHbJDK0j8VJTQxONW-2mIiQ2RmciQGwD/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related post:";
</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 / letakan di bawah kode <data:post.body/> ( kode tersebut ada 3 buah bahkan ada yang lebih dari 3 buah jadi pastekan di bawah kode <data:post.body/> yang terakir
<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 id='attb' align='bottom-right'><a href="https://jasabikin-website.blogspot.com/2014/08/membuat-related-post-bergambar.html" target='_blank'>Related post</a></div>
</div>
5.untuk menghindari kesalahan penempatan kodenya silahkan klik Pratinjau dulu , jika tidak ada masalah pada kode HTML nya selanjutnya silahkan simpan template nya
6.selesai..
dan silahkan cek hasil pembuatan related post bergambarnya
sampai disini panduan Blogger tentang cara membuat related post bergambar , jika ada pertanyaan silahkan berkomentar saja nanti saya akan pandu sampai berhasil , Terimakasih...