| Tweet |
Patah Online - Setelah kemarin sudah membahas seputar blogger tentang Cara Menghitung Jumlah Karakter Judul Posting Blog, kali ini saya akan membahas tentang Cara Membuat Thumbnail Artikel terkait. Memodifikasi dengan memberikan Thumbnail atau gambar pada Artikel terkait atau related pos, terkesan lebih menarik dan bagus untuk tampilan blog. Tak jarang juga dengan Artikel terkait blog kita dikemas dengan gaya Thumbnail atau gambar akan merangsang dan menambah penasaran pengunjung tuk melihat artikel yang lainya di blog kita.
Untuk pembuatan Thumbnail artikel terkait pada blog bisa sobat lihat caranya di bawah ini.2. Kemudian Contreng Expand Widget Templates.
3. Cari Kode </head> pada Templates blog anda kemudain tempatkan
kode di bawah ini tepat 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: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
4. Lalau cari kode <div class='post-footer'>, kemudian tempatkan kode di bawah ini tepat di atasnya<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: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<!-- 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>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
5. langkah terakhir Simpan Tempalates, dan lihat hasilnya.<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>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Cukup sekian postingan saya tentang Cara Membuat Thumbnail Artikel Terkait Blog , Semoga bisa bermanfaat.
17 comments
oh jadi seperti itu yach cara membuat thumbnailnya sobat...
Mantef tuh bang Fattah tutornya..hahahyyy
@Asis Sugianto
ya, begitu lah sobat, moga bisa bermanfaat sobat :)
@Icahbanjarmasin
heeeee...mkasih bang icah :)
eemm datang lagi bang... tuk lihat yang baru...
wahhh dulu ane sempat gunakan ini... tapi cukup berat juga nih pake ini bang....
@Ehwansah Jailani
kw mank berat blognya udah di ambang batas kewajaran mending jangan pasang bang :)
wah klo itu saya mah sudah punya sob,,
nice sharing sobat xD
keren sob, nice post ^_^
Saya sudah pernah memakai widget tambahan itu bang hanya saja karena optimasi berat blog jadi saya copot
@Ulan News
heee....thanks sobat
@Senja Berita
terimakasih sobat
@Ilmu Komputer dan Teknologi
heee....blog aku berat,pa karna ini ya :)
Kalau saya pakai list label sob,,,tapi terima kasih udah mau berbagi tutorialnya. :)
@Abed Saragih
sama2 sobat, mank lebih ringan pakek list label c sobat :)
keren sob, saya juga pakai ini :D
@Cirebon-Cyber4rt
iya sobat, jadi makin kece sobat, hehehhehe
@goyang patah patah
hehhe siip :D
Post a Comment
Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar