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/AVvXsEhtYBrJoMMUguID9W5rJXtDDy7CV_l5dASh4OWIlHl0ZF4Rn3qZxHkXEA9m7slvAsm5hNlDdKJ7RKZAfgeY4TFqERETwQeFap4YjnhdoucCYwUSopzdqt4_TQqolrM_fhLHDLf34pLE3WI/h120/orange-list-icon.png') !important;
}
Cara menyimpan kode CSS
- Login ke Blogger
- Dasbor (Dasboard)
- Template
- Backup/Restore Template.
- Edit HTML
- 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
- Selesai...
- 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 */
}
Jika menggunakan list image bentuk kode css dan posisinya seperti berikut:
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).
