Membuat recent post berdasarkan label dengan thumbnail

Santri Balaghy kali ini akan melanjutkan postingan tentang trik blogger yang sudah diulas kemaren. Sebelumnya sudah dibahas kalau membuat recent post perlabel menurut sesuai dengan apa yang balaghy ketehui ada 3 kategori. Nah, ini adalah kategory yang kedua, membuat recent post perlabel dengan thumbnail. Fungsinya sama saja dengan yang kemaren, terserah sih mau digunakan untuk apa. Urusan desain kembali pada diri masing-masing. Seperti apa sih triknya, langsung aja yuk.

Demo

1. Seperti biasa yang pertama dilakukan adalah login ke akun blogger sahabat.
2. Selanjutnya masuk ke menu template => edit html
3. Setelah masuk pada setelah html template, cari kode ]]></b:skin>
4. Untuk mempermudah pencarian, gunakan f3 atau ctrl+f
5. Kalau udah ketemu kodenya, silahkan masukkan kode CSS di bawah ini tepat di atas kode tadi.

/* LABEL CHOOSE ================================================ */ img.label_thumb{ float:left; padding:5px; border:1px solid #F3F3F3; 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; padding:0} ul.label_with_thumbs li{ padding:8px 0; min-height:65px; margin-bottom:10px; list-style:none; } .label_with_thumbs a{} .label_with_thumbs strong{}

6. Setelah itu, cari kode </head> dan masukkan kode di bawah ini tepat di atasnya.

<script src='http://tipstrikblogging.googlecode.com/files/newslabelchoice.js' type='text/javascript'/>

7. Langkah selanjutnya adalah simpan setelan html sahabat.
8. Kemudian, masuk pada menu Tata letak => Tambah gadget
9. Cari gadget Html Javascript lalau beri judul label dan masukkan kode di bawah 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/-/Label kamu di sini?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Sampai pada tahap ini, ganti Label kamu di sini dengan label yang sahabat inginkan.
Jika ingin menampilkan thumbnail atau gambar, ganti true menjadi false

10. Langkah terakhir adalahkemudian save dan lihat hasilnya.

Sekian trik blogger tentang membuat recent post berdasarkan label dengan thumbnail, semoga bermanfaat.

Selamat mencoba,
Salam Sahabat Balaghy!

Sumber: Tipstrik Blogging