Membuat Related Posts dengan Thumbnail - 2
Banyak cara membuat dan memasang Related Posts dengan Thumbnail. Selain memasang dengan cara otomatis, Related Posts dengan Thumbnail ini juga bisa dipasang secara manual.
Selain customisasi yang bisa disesuaikan dengan selera, Related Posts dengan Thumbnail ini juga cukup lumayan cepat dalam loading. jika anda tertarik memasangnya, ikuti saja tutorial berikut 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'>
<script src='https://sites.google.com/site/archivesiugi/javascr/PostThumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Selain customisasi yang bisa disesuaikan dengan selera, Related Posts dengan Thumbnail ini juga cukup lumayan cepat dalam loading. jika anda tertarik memasangnya, ikuti saja tutorial berikut ini.
Cara Memasang Related Posts dengan Thumbnail-2
- Login ke blogger
- Tata Letak
- Edit HTML, centang Expad Widget Templates
- Cari kode </head> dan
- Letakkan kode script di bawah ini tepat diatas 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/AVvXsEhZgotsuEL9H3krs6p3-4ZzwHanPLCpUdD5-0RTLffcCM-y3DAkSP1mDYGOAhO-b2fOHeY3PZmrZ_cX87wdlR52AH5GfNj-kcaMgdKwBi8CDsLWCwC9snvCGB625o72nFMZ2WyXGMCdH8Y/s400/noimage.png";
var maxresults=5;var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script><script src='https://sites.google.com/site/archivesiugi/javascr/PostThumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Keterangan:
- Warna Hijau, Untuk mengubah thumbnail default
- Warna Merah, Untuk menyesuaikan jumlah maksimum posting terkait yang ditampilkan
- Warna Biru, Untuk mengubah warna
- Warna Kuning, Untuk mengedit judul widget
- Sekarang cari lagi kode dibawah ini
<p class='post-footer-line post-footer-line-1'>
- Kemudian letakan kode dibawah ini tepat dibawah salah satu dari kode diatas
<!-- 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-->
- Lalu simpan dah lihat hasilnya
Selesai, selamat mencoba...!!!
Terimakasih tutornya
ReplyDeleteSukses selalu yach
@Lulus Sutopo
ReplyDeleteiy sama-sama mas