Cara membuat related post dengan Thumbnail
Nah kali ini saya menjelaskan cara membuat Related post/ Thumbnail dengan menambahkan gambar didalamnya. Jika sobat berminat untuk membuatnya mari ikuti langkah-langkahnya.
1. Buka menu Design =>Edit HTML
2. Beri centang pada "Expand Widgets Templates"
3. Lalu kalian cari kode berikut ini </head> agar memudahkan pencarian sobat gunakan ( CTRL + F )
4. Taruh kode berikut ini tepat diatas kode </head>
<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:black;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_vEw7DvsCUkICMlvUfnVV1zBtXIB-mOBh06BV0NxjBemJburjhSnL1h0iVUMmcl7r_H76uSSuuMvZxoqqs9WZZtFyLq2a4oHQxFOS7-ivxNlLoex_ZLsQ257he7zT4e2WrLaa0-Tpa_ux/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:black;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_vEw7DvsCUkICMlvUfnVV1zBtXIB-mOBh06BV0NxjBemJburjhSnL1h0iVUMmcl7r_H76uSSuuMvZxoqqs9WZZtFyLq2a4oHQxFOS7-ivxNlLoex_ZLsQ257he7zT4e2WrLaa0-Tpa_ux/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->
5. Bila sudah selanjutnya kalian cari kode seperti ini <p class='post-footer-line post-footer-line-1'/>
tapi jika kode tidak ditemukan coba dengan kode seprti ini post-footer-line
6. Lalu taruh kode berikut ini tepat di bawah kode nomor 5.
<!-- 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>
<!-- 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>
<!-- Related Posts with Thumbnails Code End-->
7. Jika sudah simpan hasil kerja sobat.
Tapi jika kalian tidak ingin capek membuatnya bisa kok dengan cara yang satu ini.
1. Sobat tinggal masuk saja ke situs ini http://www.linkwithin.com/learn
2. Terus nanti kalian akan disuruh mengisi form data anda.
: Email = Isi alamat email sobat.
Blog Link = Isi alamat blog sobat
Flatform = sobat pilih other
Width = Pilih jumlah postingan yang akan ditampilkan.
3. terus sobat beri centang pada kotak kecil bila sobat memliki tamplate blog yang gelap.
4. Lalu sobat klik Get Widget
5. Terus sobat Copy paste kode yang di berikan dan tempatkan kode tersebut di atas kode </body> jika sudah simpan hasil kerja sobat.
6. Selesai.
0 komentar:
Posting Komentar
Catatan :
1. Usahakan Komentar tidak mengandung kata kasar
2. Komentar SPAM akan dihapus segera setelah admin review
3. Berkomentarlah sesuai dengan artikel di atas
4. Jika anda memiliki masalah dengan artikel di atas diharapkan berkomentar.
5. Jika ada link hidup di dalam komentar akan segera admin hapus
6. Dilarang menyebarluaskan artikel tanpa persetujuan dari admin
7. Pastikan untuk klik " Berlangganan lewat email" untuk membantu membangun blog ini lebih maju.
Terima kasih untuk anda yang sudah berkomentar dengan baik, Jika ada link yang error pada artikel di atas segeralah berkomentar dengan mengklik tombol balas pada kolom komentar nanti admin akan segera memperbaikinya.