Judul : Cara Memasang Related Post Dengan Thumbnail
link : Cara Memasang Related Post Dengan Thumbnail
Cara Memasang Related Post Dengan Thumbnail
Karena page view blog kita meningkat maka akan mengundang para pemasang iklan untuk memasang iklan-nya di blog kita. Dan efek buat SEO-nya adalah Google akan menyukai blog kita karena google suka blog yang memberikan fasilitas menu navigasi yang mudah di telusuri.
Ikuti langkah-langkah berikut ini.
1.Log in ke blogger.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru, klik template » edit HTML » centang kotak Expand Template Widget.
3.Cari kode </head> dan letakkan kode dibawah ini tepat diatas-nya.
<!--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/AVvXsEj4M_uJWuMWlUWdyGqeY6PWlH6L0L0WRfFdDW2TKBijOifHlARacucAB5QXbiT8InYUkeTRfLiOHb_zrmT9Lh8viFaw-DWsitTOBScpaODnXcjKt40fyHbyDx7OXpeYlGISblM0eb7sRfM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.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/AVvXsEj4M_uJWuMWlUWdyGqeY6PWlH6L0L0WRfFdDW2TKBijOifHlARacucAB5QXbiT8InYUkeTRfLiOHb_zrmT9Lh8viFaw-DWsitTOBScpaODnXcjKt40fyHbyDx7OXpeYlGISblM0eb7sRfM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Keterangan:
- Kode yang berwana merah adalah jumlah related posts yang akan di tampilkan, anda bisa merubahnya sesuai keinginan anda.
- Kode yang berwarna biru adalah judul dari widget related posts-nya, anda bisa merubah-nya sesuai keinginan anda.
<!-- 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
5.klik save template.
Selesai sudah langkah-langkah Cara Memasang Related Post Dengan Thumbnail bagaimana, mudah bukan? Semoga artikel ini bisa bermanfaat bagi anda.
Demikianlah artikel tentang Cara Memasang Related Post Dengan Thumbnail
Sekianlah artikel Cara Memasang Related Post Dengan Thumbnail kali ini, mudah-mudahan bisa memberi manfaat untuk pembaca semua.
Anda sekarang membaca artikel Cara Memasang Related Post Dengan Thumbnail dengan alamat link https://anakugoogle.blogspot.com/2012/03/cara-memasang-related-post-dengan.html
0 Response to "Cara Memasang Related Post Dengan Thumbnail"
Post a Comment