DUNIA BLOG MEMBUAT RECENT POST PER LABEL

Recent Post per Label-Dunia BlogDUNIA BLOG kali ini akan berbagi tips-trik tentang cara membuat recent post per label yang dilengkapi dengan thumbnail (gambar postingan kecil). Trik ini DUNIA BLOG dapatkan dari sahabat blogger abdu-green yang telah memposting artikel ini. Tips trik ini sangat berguna dan sekaligus membantu kita menginventarisir artikel-artikel blog yang kita miliki secara lebih rapi untuk ditampilkan pada halaman home-page blog. 

Berikut ini cara-cara membuatnya, tolong anda pelajari secara hati-hati.

Cara Membuat Recent Post Per Label With Thumbnail

1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>
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{}
5. Lalu cari kode </head> dan letakkan kode di bawah ini tepat di atas
<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>
6. Simpan Template jika sudah selesai.

Langkah-langkah di atas adalah untuk mengkostumisasi template. Jika sudah selesai kita ke langkah berikutnya untuk menambahkan recent post per label, yaitu:

7. Pilih Tata Letak lalu Tambah Gadget >> HTML/Javascript
8. Kemudian masukan kode berikut ini:
<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>
9. Kita dapat menkostumisasi tampilan dengan mengubah kode yang berwarna merah. Dan ganti teks NAMALABEL dengan nama label yang akan ditampilkan.

10. Simpan jika sudah selesai.
Teriring salam persahabatan dari DUNIA BLOG, kami ucapkan selamat mencoba, semoga berhasil dan juga semoga dapat bermanfaat.
Sumber : http://abdu-green.blogspot.com/2012/05/membuat-recent-post-per-label-thumbnail.html

0 comments:

Post a Comment