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 Komentar
Write Komentaroh jadi seperti itu yach cara membuat thumbnailnya sobat...
ReplyMantef tuh bang Fattah tutornya..hahahyyy
Reply@Asis Sugianto
Replyya, begitu lah sobat, moga bisa bermanfaat sobat :)
@Icahbanjarmasin
Replyheeeee...mkasih bang icah :)
eemm datang lagi bang... tuk lihat yang baru...
Replywahhh dulu ane sempat gunakan ini... tapi cukup berat juga nih pake ini bang....
@Ehwansah Jailani
Replykw mank berat blognya udah di ambang batas kewajaran mending jangan pasang bang :)
wah klo itu saya mah sudah punya sob,,
Replynice sharing sobat xD
keren sob, nice post ^_^
ReplySaya sudah pernah memakai widget tambahan itu bang hanya saja karena optimasi berat blog jadi saya copot
Reply@Ulan News
Replyheee....thanks sobat
@Senja Berita
Replyterimakasih sobat
@Ilmu Komputer dan Teknologi
Replyheee....blog aku berat,pa karna ini ya :)
Kalau saya pakai list label sob,,,tapi terima kasih udah mau berbagi tutorialnya. :)
Reply@Abed Saragih
Replysama2 sobat, mank lebih ringan pakek list label c sobat :)
keren sob, saya juga pakai ini :D
Reply@Cirebon-Cyber4rt
Replyiya sobat, jadi makin kece sobat, hehehhehe
@goyang patah patah
Replyhehhe siip :D
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 EmoticonEmoticon