Rabu, 15 Agustus 2012

Menambahkan Widget Recent Posts per Label

Widget recent posts (posting terakhir) per label ini akan menampilkan daftar artikel terbaru berdasarkan satu label tertentu. Penampakannya bisa dilihat pada screenshot di bawah ini.

Recent Posts per Label
Recent Posts per Label

Cara menambahkannya di blog dapat disimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger.

2. Klik menu "Opsi lainnya" >> "Template".

3. Klik tombol "Edit HTML" >> "Lanjutkan".

4. Beri tanda contreng di kotak "Expand Template Widget".

5. Letakkan 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{}

6. Kemudian cari kode </head> dan taruh kode berikut di atasnya.

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

7. Klik tombol "Simpan template".

8. Selanjutnya masuk ke menu "Tata Letak".

9. Klik tautan "Tambah Gadget" >> "HTML/JavaScript".

10. Beri judul yang diinginkan dan masukkan kode berikut di "Konten".

<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>

11. Silakan dikustomisasi tampilan widget dengan mengubah kode yang berwarna merah. Bila ingin menampilkan elemen tertentu, ganti kode false menjadi true, begitu juga sebaliknya. Untuk NAMALABEL, isilah sesuai sewaktu label dibuat. Perhatikan huruf besar dan huruf kecil saat penulisan label pertama kali. Jika nama label terdiri dua kata atau lebih, maka ganti spasi dengan %20. Misalnya, ada label yang bernama Tutorial Blog maka NAMALABEL dalam kode di atas ditulis menjadi Tutorial%20Blog

12. Klik tombol "Simpan" jika sudah selesai.

Tidak ada komentar:

Posting Komentar