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 saya akan share tutorial atau cara merubah Numbered List dan Bullet List tanpa Image atau gambar, dan juga Numbered List dan Bullet List dengan Image atau gambar keren hanya dengan Code CSS.
Langsung saja simak tutorial berikut ini :
Numbered List dan Bullet List tanpa Image atau gambar
Langkah Merubah Numbered List Dan Bullet List Blog
- Masuk ke Blogger sobat masing-masing
- 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-lain bentuk di setiap postingan baru.
Tanpa edit HTML di postingan, akan mengikut secara Default, CSS yang saya tandai 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.
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.
Berikut 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
■ Square
Numbered List Dan Bullet List Ke 2
Ada pula yang menggunakan gambar sebagai default Numbered List Dan Bullet List
Berikut dan simak baik-baik tutorial nya di bawah ini :
Untuk membuat nya semakin mudah saya sudah menyiapkan beberapa gambar yang bisa anda langsung pakai namun tentu saja anda bisa mengganti gambarnya dengan gambar anda sendiri .Berikut ini saya sudah mempunyai demonya dari bullet list yang sudah diganti dengan gambar.
Langkah pertama silahkan copy code CSS di bawah ini sama seperti dengan cara / petunjuk di atas.
.post ul li {
list-style-image:url('URL-GAMBAR-DISINI');
}
Menggunakan gambar yang telah disiapkan - untuk gambar yang sudah saya persiapkan anda hanya perlu langsung saja memasukkan kode url gambarnya langsung ke dalam tulisan berwarna MERAH diatas. lalu men copy paste ke dalam kotak css atau letakan pada template tepat di atas kode ]]></b:skin>.
Bullet Tic Hijau
Maroon Arrow Bullet Point
Bullet Bunga Tick Point
Bullet Panah oranye dobel
bullet diamond blue
blue arrow bullet
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEdQRF05FXEqsClFm1DOA1cyYJKw49u777t-zU6W3pg3Ae8JBssXy89N7cZ0c44s4hNI3MLHHdFcztkOyetHrjBVRXL4w_P29D-w9FCJYsVehy8ZA28g1rqzYCnYPi9kbe2RaIyaWIAA/s1600/bullet_list_icon6.jpgDemikian tutorial singkat dari saya semoga bermanfaat buat sobat blogger semuanya..terima kasih atas kunjungan nya dan apabila ada yang ingin di tanyakan bisa bertanya pada kolom komentar di bawah, saya akan bantu semampunya. Salam :)
Comments