Cara Buat Thumbnail Artikel Terkait Blog

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.

thumbnail-artikel-terkaitUntuk pembuatan Thumbnail artikel terkait pada blog bisa sobat lihat caranya di bawah ini.
1. Login Blogger => Rancangan => Edit HTML
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 == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
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.

Cukup sekian postingan saya tentang Cara Membuat Thumbnail Artikel Terkait Blog , Semoga bisa bermanfaat.
Previous
Next Post »

17 Komentar

Write Komentar
Unknown
AUTHOR
September 20, 2012 at 4:54 AM delete

oh jadi seperti itu yach cara membuat thumbnailnya sobat...

Reply
avatar
September 20, 2012 at 11:08 PM delete

Mantef tuh bang Fattah tutornya..hahahyyy

Reply
avatar
Unknown
AUTHOR
September 21, 2012 at 12:55 AM delete

@Asis Sugianto
ya, begitu lah sobat, moga bisa bermanfaat sobat :)

Reply
avatar
Unknown
AUTHOR
September 21, 2012 at 1:23 AM delete

eemm datang lagi bang... tuk lihat yang baru...

wahhh dulu ane sempat gunakan ini... tapi cukup berat juga nih pake ini bang....

Reply
avatar
Unknown
AUTHOR
September 21, 2012 at 3:00 AM delete

@Ehwansah Jailani
kw mank berat blognya udah di ambang batas kewajaran mending jangan pasang bang :)

Reply
avatar
Ulan News
AUTHOR
September 22, 2012 at 12:30 AM delete

wah klo itu saya mah sudah punya sob,,
nice sharing sobat xD

Reply
avatar
September 22, 2012 at 2:11 AM delete

Saya sudah pernah memakai widget tambahan itu bang hanya saja karena optimasi berat blog jadi saya copot

Reply
avatar
Unknown
AUTHOR
September 22, 2012 at 3:04 AM delete

@Ilmu Komputer dan Teknologi
heee....blog aku berat,pa karna ini ya :)

Reply
avatar
Abed Saragih
AUTHOR
September 22, 2012 at 4:36 PM delete

Kalau saya pakai list label sob,,,tapi terima kasih udah mau berbagi tutorialnya. :)

Reply
avatar
Unknown
AUTHOR
September 22, 2012 at 4:39 PM delete

@Abed Saragih
sama2 sobat, mank lebih ringan pakek list label c sobat :)

Reply
avatar
September 22, 2012 at 5:43 PM delete

keren sob, saya juga pakai ini :D

Reply
avatar
Unknown
AUTHOR
September 22, 2012 at 5:49 PM delete

@Cirebon-Cyber4rt
iya sobat, jadi makin kece sobat, hehehhehe

Reply
avatar

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