Menampilkan link ke posting terkait bersama dengan thumbnail pos yang sesuai akan membantu Anda meningkatkan tampilan halaman blog anda. Pengguna akan tergoda untuk pergi untuk posting yang bersangkutan pada saat mereka disajikan menarik dengan thumbnail.
Berikut adalah langkah-langkah rinci untuk menginstal widget posting terkait untuk blogger dengan thumbnail:
Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Backup Template Blog untuk mengantisipasi kegagalan modifikasi template
Langkah 4
Jangan lupa check "Expand widget template"
Langkah 5
Cari kode dibawah ini :
</head>
Copy Paste (CoPas) kode dibawah ini tepat diatasnya :Langkah 5
Cari kode dibawah ini :
<!--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/AVvXsEjG10eVHI0wtLNKPS_u2Fe8RhuOymjrMbWW-SqgeFoPCkKUh5W41n6syIv66nQGIJhzzo20aKRqB5EpyPbKNc8_3_Mjcpt_vu9HA9WaG73szEVghUYap05kxazp_KNl25udld4S_O6Qa6o/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.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-->
Sekarang cari kode berikut:<!-- 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/AVvXsEjG10eVHI0wtLNKPS_u2Fe8RhuOymjrMbWW-SqgeFoPCkKUh5W41n6syIv66nQGIJhzzo20aKRqB5EpyPbKNc8_3_Mjcpt_vu9HA9WaG73szEVghUYap05kxazp_KNl25udld4S_O6Qa6o/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.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-->
<div class='post-footer-line post-footer-line-1'>
Jika tidak ditemukan cari kode dibawah ini:<p class='post-footer-line post-footer-line-1'>
Copy Paste (CoPas) kode dibawah ini tepat diatasnya :<!-- 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://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.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://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Anda dapat menyesuaikan jumlah maksimum posting terkait yang ditampilkan dengan mengedit baris ini dalam kode berikut:
var maxresults=5;
Untuk mengedit judul widget Anda dapat mengubah baris kode ini berikut:
var relatedpoststitle="Related Posts";
Untuk mengubah gambar thumbnail, Anda dapat mengedit baris kode ini:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG10eVHI0wtLNKPS_u2Fe8RhuOymjrMbWW-SqgeFoPCkKUh5W41n6syIv66nQGIJhzzo20aKRqB5EpyPbKNc8_3_Mjcpt_vu9HA9WaG73szEVghUYap05kxazp_KNl25udld4S_O6Qa6o/s400/noimage.png";
Untuk Mengubah Warna Garis Splitter, anda bisa mengedit kode ini:
var splittercolor="#d4eaf2";
Selamat mencoba........
