Sebelumnya saya sudah berbagi dengan anda cara membuat Artikel terkait dibawah posting, yang hanya menampilkan judulnya saja dan sekarang saya akan berbagi lagi dengan anda cara membuat Artikel Terkait yang disertai dengan Thumbnails / image / gambar mini yang ada dipostingan kita.
Disamping juga sesuai dengan janji saya sebelumnya, untuk itu mari kita langsung saja menuju TKP
Cara Membuat Artikel Terkait yang berisi Thumbnails
Cara Membuat Artikel Terkait yang berisi Thumbnails
- Seperti biasa Login ke Blogger dengan ID anda.
- Pada halaman Dasbor, pilih Tata Letak.
- Kemudian pilih Edit HTML
- Backup / simpan template anda dulu.
- Beri tanda centang pada Expand Template Widget
- Cari kode </ head>
- Copas (copy-paste) kode script berikut dan simpan / taruh persis di atasnya
<!--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-->
|
- Cari kode <div class='post-footer-line post-footer-line-1'> atau jika tidak ditemukan cari kode berikut ini <p class='post-footer-line post-footer-line-1'>
- Jika sudah ketemu, copas (copy-paste) kode script berikut ini, taruh di bawah salah satu kode tersebut tadi
<!-- 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 tutorials</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-->
|
- Kita Juga dapat mengganti beberapa kode scriptnya, seperti :
- var maxresults = 5; berarti artikel yang akan ditampilkan adalah : 5 =?
- relatedpoststitle var = " Related Posts "; Bisa diganti dengan Artikel Terkait atau Nama Lainnya
- Simpan template anda dan lihat hasilnya
 |
| CONTOH: Tampilan |
Bagaimana menurut anda postingan / artikel ini, berikan saran / komentar anda sebagai memotivasi saya dan Terima kasih sebelumnya.
Waaah... Mas. kl yg ni lbh bgus kyanya d psang d blog saya.
BalasHapustp mang gk bs d psng d blog saya y Mas?
kira2 knp Mas?
oh y Mas, saya mnta maff, kirain tu muslim.
Saya bnr2 berterima ksih bnyk M Mas yg udh bnyk mmbantu saya.
"Tidak Ada Kata Perceraian Dalam Pertemanan"
trims mas RaY, silahkan dicoba saja soal yang terhapus bisa ditambahkan kembali dibawah <div class='post-footer-line> atau pasang saja dibawah junplink [read more]
BalasHapusAkhirnya berhasil sob. Hhe...
BalasHapusTambah k'ren dah blog saya berkat bantuan Mas.
Och y, artikelnya boleh saya copas di blog saya g Mas? hhe...
Terima kasih banyak.
Salam Sukses buat Mas Putu.
trims kawan sudah berkenan dan berhasil menerapkannya, saya sangat senang bisa berbagi, :@
BalasHapussoal copas untuk publish di blog tidak masalah asal kawan menyertakan sumbernya [numpang Link itu biasa] :x