Patah Online - Cukup lama juga tidak membuat posting seputar blogger, kali ini saya bermaksut berbagi tentang cara membuat thumnail disetiap label blog, dimana di postingan sebelumnya saya sudah cukup banyak tentang desain grafis diantaranya Tracing gambar dengan Coreldraw dan Mencerahkan Gambar Buram dengan Plug-in Photoshop.
Memberi sedikit modifikasi pada label di blog dengan menambahkan Thumbnail atau gambar pada label blog, pastinya akan memberikan kesan tersendiri bagi blog kita, blog akan lebih terlihat menarik serta dengan diberikanya sedikit modifikasi pada lebal blog akan cukup merangsang visitor atau pengunjung untuk membaca artikel di blog kita yang terkait dengan label tertentu.Berikut adalah cara menambahkan Thumbnail atau gambar pada label blog kita :
1. Login Blogger => Rancangan => Edit HTML
2. Contreng Expand Widgate Tamplates
3. Kemudian Cari kode ]]></b:skin> kemudian letakan kode di bawah ini tepat di atasnya.
img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}
4. Setelah itu cari lagi Kode </head> kemudain letakan kode di bawah ini tepat di atasnya lagiimg.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}
<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>
5. Lalu simpan Templates6. Masuk ke elemen halaman => tambah Gatget => HTML/Javascript , lalu salin kode dibawah ini setelah itu klik Simpan.
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Note : Ganti tulisan yang berwarna merah sesuai dengan nama label di blog anda.<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Cukup sekian Postingan saya tentang Cara Membuat Thumbnail atau Gambar disetiap Label Blog, semoga bisa bermanfaat.
14 Komentar
Write KomentarKeren nih tumbnailnya sbat...
Reply@Asis Sugianto
Replymkasih sobat :)
ini yang saya cari mas....
Replymakasih ya :D
@Limit Post
Replysomoga bisa membantu sobat :)
Terima kasih sahabat berbagi pengetahuannya ini. jadi kelihatan bagus ada thumbnailnya dalam labelnya
Reply@Blog Keperawatan
Replyuke sobat, moga bisa bermanfaat sobat :)
terima kasih atas tutorialnya..
Reply@tour and travel
Replysama2 sobat,moga bisa bermanfaat sobat :)
gambarnya keputer om ~_~
Replycara nonaktifkannya gimana yaa ???
@Limit Postkalo bisa sih percis sama kaya demonya :D
Reply@Limit Post
Replygambar yang mana ya, apa maksutnya gambar tumnail pada tiap artikel ya, kw iya setiap gambar akan disesuaikan pada gambar yang ada dalam suatu posting tertentu sobat
@goyang patah patahya mas gambar thumbnailnya keputer nonaktifkannya gimana ??
Replythanks tutornya sob.. bermanfaat sekali,jadi nggak berasa bosan bolak balik ke blog ini..
Reply@sigit hermawan
Replysenang jiga blog ini bisa menjadi manfaat buat sobat :)
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