Index»
artikel
»
bergambar
»
berjalan
»
membuat
»
terkait
»
tidak
»
Membuat artikel terkait bergambar tidak berjalan
Membuat artikel terkait bergambar tidak berjalan
Kamis, 07 November 2013
Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita.
Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini 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-->
<!--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-->
7. Lalu cari kode di bawah ini
<div class=post-footer-line post-footer-line-1>
Atau jika tidak menemukannya cari kode berikut ini
<p class=post-footer-line post-footer-line-1>
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.
<div class=post-footer-line post-footer-line-1>
Atau jika tidak menemukannya cari kode berikut ini
<p class=post-footer-line post-footer-line-1>
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.
<!--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-->
<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-->
Keterangan.
Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=5; --> Berarti artikel terkait yang akan kita tampilkan adalah 5
var relatedpoststitle="Related Posts"; --> Judulnya adalah Related Posts
10. Simpan Template jika sudah selesai.
Sumber:http://www.uttafreak-987.co.cc/
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar