Membuat List di Widget Archive/Arsip BloggerClick here to get more tutorials!

Membuat list di widget arsip blogger sangat bermanfaat karena memudahkan pembaca membedakan setiap item dari deret judul posting yang ditampilkan. List menjadi sebuah penanda setiap judul posting, dimana bentuk list dapat kita pilih dari beberapa yang tersedia, seperti misalnya circle, decimal, square, disc dan georgian. Untuk list dalam bentuk icon/gambar lebih banyak pilihan yang dapat dilakukan. Anda bisa membuatnya atau browsing untuk mendapatkan berbagai macam image/icon list. Kode CSS pembentuk list sangat simpel karena hanya menggunakan satu deret kecil kode css. Kode ini bisa disimpan di atas kode ]]></b:skin>.

Kode CSS list widget Archive Blogger

Karena ada dua bentuk list (image dan list default), maka kode yang digunakan juga ada 2 bentuk.

Kode CSS untuk List Default

ul.posts li{
	list-style-type:square !important;/* square bisa diganti dg circle, disc atau georgian */
}

Kode CSS untuk List Image

ul.posts li{
	list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmM1urDYA23WVOGBrQwXP98b3owmVixEOQY3hCm5AkvojjQk6Fm9447PtchqLySDM36DEtJtjRnar94DMg1YGrV4KAJhsB3OM0utrXah9vyC_l2xhp0Md_VrsC_1Djx1oRL-ZiwQQwTqg/h120/orange-list-icon.png') !important;
}

Cara menyimpan kode CSS

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy & paste-kan kode css tepat di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat penampilan tampilan baru widget aechive anda!

Posisi kode css di template :

ul.posts li{
	list-style-type:square !important;/* square bisa diganti dg circle, disc atau georgian */
}
]]></b:skin>

Jika menggunakan list image bentuk kode css dan posisinya seperti berikut:

ul.posts li{
	list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmM1urDYA23WVOGBrQwXP98b3owmVixEOQY3hCm5AkvojjQk6Fm9447PtchqLySDM36DEtJtjRnar94DMg1YGrV4KAJhsB3OM0utrXah9vyC_l2xhp0Md_VrsC_1Djx1oRL-ZiwQQwTqg/h120/orange-list-icon.png') !important;
}
]]></b:skin>

Kode yang berwarna hijau adalah URL image yang berfungsi sebagai list. Anda dapat mengganti URL ini dengan URL image yang lain. Gunakan image dengan ukuran kecil - tinggi & lebar di bawah 10 pixel (px).