Apa itu Numbered List dan Bullet List? kalian bisa melihatnya Screenshoot di atas, Tulisan yang bernomor urut secara otomatis itulah dia Numbered List sedangkan Bullet List yaitu hanya dengan titik atau kotak dll.
Sebenarnya bawaan dari Blogspot sendiri tidak terlalu buruk, tapi bila kalian ingin Merubahnya sesuai keinginan sendiri Baca saja postingan ini sampai habis.
Disini kita akan Merubah Numbered List dan Bullet List tanpa Image atau gambar hanya dengan Code CSS.
Code ini asli dari Tempalate saya ini,Template ini dari KompiAjaib, meskipun disana tidak ada tutorial Merubah Numbered List Dan Bullet List Tempalate ini, Tapi saya berhasil memodifnya meskipun dengan susah payah, Sebenarnya saya tidak terlalu mengerti dengan Code Blog, tapi dengan tekad yang ingin memahaminya Alhamdulillah berhasil sedikit. :D
Langkah Merubah Numbered List Dan Bullet List Blog
- Masuk ke Blog kalian
- Pilih Template Lalu Edit HTML, Cari code .post ol { dan .post ul { untuk mempercepat pencarian Tekan Ctrl+f pada keyboard. Mungkin akan berbeda pada setiap Blog, cari saja yang mirip.
- Ganti dengan Code di Bawah ini
.post ul,.post ol{margin:20px;margin-top:5px}
.post ol li{list-style-type:Decimal;padding-left:1px;margin:5px 0 0 20px}
.post ul li{list-style-type:Circle;padding-left:1px;margin:5px 0 0 20px}
- Bila tidak di temukan Pastekan saja Code di atas, tepat di atas ]]></b:skin>
- Apabila Kalian ingin memakai semua Jenis Bentuk Numbered List dan Bullet List jangan pakai Code CSS di Atas. Pakai kode dibawah ini.
.post ul,.post ol{margin:20px;margin-top:5px}
.post ol {list-style-type:Decimal;padding-left:1px;margin:5px 0 0 20px}
.post ul {list-style-type:Square;padding-left:1px;margin:5px 0 0 20px}
.post ol li{list-style-type:Upper-roman,Decimal-leading-zero,Lower-greek,Lower-roman,lower-latin,Upper-latin,Armenian,Georgian,Lower-alpha,Upper-alpha,none;padding-left:1px;margin:5px 0 0 20px}
.post ul li{list-style-type:Circle,disc,none;padding-left:1px;margin:5px 0 0 20px}
- Dengan Code CSS ke 2 di Atas ini, kalian tinggal memanggilnya di Postingan HTML. bila ingin mememakai lain-llain bentuk di setiap postingan baru.
- Tanpa edit HTML di postingan, akan mengikut secara Default, CSS yang saya Make merah itu Bentuk defaultnya.
- Untuk menyesuaikan posisinya kalian edit Code CSS warna merah. seperti margin:20px adalah untuk mengatur jarak antara List dan tepi postingan. atur saja sesuai tempalte kalian.
Catatan :
- Jika kalian memakai CSS pertama kalian Rubah saja yang saya make/tandai merah. maka seluruh postingan kalian akan mengikuti Bentuk yang kalian pakai.
- Jika kalian memakai CSS ke 2, bila ingin memakai Bentuk lain dalam setiap memposting, atau 1 postingan ingin diberi bentuk Numbered List/ Bullet List yang berbeda-beda.
- Saat Membuat artikel/postingan baru, setelah klik Numbered/Bullet beralih ke HTML secara default codenya seperti ini <ol style="text-align: left;"> atau <ul style="text-align: left;"> Cukup tambahkan kode list-style-type:Bentuk; maka akan seperti ini <ol style="list-style-type:Bentuk;text-align: left;"> "Bentuk" ganti dengan bentuk yang mau kalian pakai.
Gaya/Bentuk Numbered List Dan Bullet List :
Numbered List
1. Decimal
2. Decimal
01. Decimal-leading-zero
02. Decimal-leading-zero
I. Upper-roman
II. Upper-roman
i. Lower-roman
ii. Lower-roman
α. Lower-greek
β. Lower-greek
ʖ. Georgian
ъ. Georgian
a. lower-latin/Lower-alpha
b. lower-latin/Lower-alpha
A. Upper-latin/Upper-alpha
B. Upper-latin/Upper-alpha
Ա. Armenian
Բ. Armenian
None
None
Bullet List
● Disc
○ Circle
■ Square
Cukup sekian dari saya, semoga berfa'at untuk semua.