Langkah-langkah pasang related post with thumbnail:
1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit HTML dan centang kotak "Expand Template Widget"
2. Cari kode </head> dan ganti dengan kode di bawah ini
4. Jika sobat ingin mengganti berapa banyak related post yang akan ditampilkan maka sobat harus mengganti kode atau script di bawah ini.
5. Jika sobat ingin mengganti title atau judul dengan yang sobat inginkan maka sobat cukup mengganti kode atau script di bawah ini
Selesai deh membuat related post with thumbnail. Ok blog belajar seo blogspot ini akan membahas lebih banyak lagi tentang blogger tutorial untuk itu sering-seringlah mampir lagi ok.
Selamat mencoba...
1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit HTML dan centang kotak "Expand Template Widget"
2. Cari kode </head> dan ganti dengan kode di bawah ini
<!--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.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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
3. Kemudian cari kode<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
<div class='post-footer-linepost-footer-line-1'>
jika tidak ditemukan coba cari kode di bawah ini<p class='post-footer-linepost-footer-line-1'>
4. Sekarang tinggal meletakkan kode di bawah ini sesudahnya<!-- Related Posts with Thumbnails Code Start-->
<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>
<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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<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>
<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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
4. Jika sobat ingin mengganti berapa banyak related post yang akan ditampilkan maka sobat harus mengganti kode atau script di bawah ini.
var maxresults=5;
5. Jika sobat ingin mengganti title atau judul dengan yang sobat inginkan maka sobat cukup mengganti kode atau script di bawah ini
var relatedpoststitle="Related Posts";
Selesai deh membuat related post with thumbnail. Ok blog belajar seo blogspot ini akan membahas lebih banyak lagi tentang blogger tutorial untuk itu sering-seringlah mampir lagi ok.
Selamat mencoba...

Title : Membuat Related Post Thumbnail Di Blogspot
Description : Langkah-langkah pasang related post with thumbnail: 1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit H...
Description : Langkah-langkah pasang related post with thumbnail: 1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit H...
0 Response to "Membuat Related Post Thumbnail Di Blogspot"
Posting Komentar