Cara Mengganti Bullet dan Number List pada Postingan Blog

Cara pertama untuk mengubah bullet list pada blog ikuti petunjuk berikut:

#Langkah pertama cara mengganti bullet list dan number list

# Langkah kedua cara mengganti bullet list dan number list

# Langkah ketiga cara mengganti bullet list dan number list

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

# Langkah keempat cara mengganti bullet list dan number list

.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}
]]></b:skin>

Keterangan :

• Margin 20px : Untuk mengatur jarak antara List dan tepi postingan. atur saja sesuai template pada blog anda.
• Decimal : Merupakan kode Number list, silahkan anda ganti sesuai keinginan
• Circle : Merupakan kode untuk Bullet list, circle merupakan kode untuk bullet list berbentuk bulat. Jika anda ingin menggantinya silahkan ganti nama circle sesuai dengan bentuk yanga nda inginkan. Untuk kode bullet list bentuk yang lain bisa anda lihat di bawah.

 Berikut bentuk dan nama dari Bullet list dan Number list, pilihlah sesuai keinginan anda :

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

Cara kedua untuk mengubah bullet list pada blog ikuti petunjuk berikut:

Untuk cara kedua memasang bullet list dengan menambahkan efek hover dengan menggunakan gambar. Efek hover artinya ketika disentuh oleh pointer mouse maka bentuknya akan berubah. Berikut contohnya :

Kode yang digunakan adalah sebagai berikut :

.post ul { margin: 5px 0px 5px 10px;padding: 0 0 0 20px;list-style-image: url(https://lh6.googleusercontent.com/-srWaQyUtNmA/T94gLhM15CI/AAAAAAAAAOU/3StwGw0nQsM/s12/Ul%2520li.png);} .post li { margin: 0 0 0 10px;padding: 3px; } .post li:hover { list-style-image: url(https://lh3.googleusercontent.com/-3PxIk549blQ/T94gHkS-j7I/AAAAAAAAAOM/5tzljcgjrNI/s12/Ul%2520li%2520hover.png);cursor: pointer; }

Keterangan :

• Untuk cara pemasangannya sama dengan cara pada langkah pertama, yaitu dengan meletakkan kode berikut di atas kode ]]></b:skin>
• Untuk kode pertama yang yang berlatar warna merah merupakan kode link gambar untuk bullet list 
• Untuk kode yang berlatar hijau merupakan kode efek hover. Jika anda tidak menginginkannya, tinggal anda hapus saja kodenya.
• Untuk kode yang berlatar hijau merupakan  kode gambar untuk efek hover, jika disentuh oleh pointer mouse maka akan berubah ke bentuk yang lain.

Untuk kode yang lain silahkan anda lihat di bawah ini :

http://1.bp.blogspot.com/-L6jqPydAXeA/T-Ae_NVvY3I/AAAAAAAAEOc/wH91q3MmWrE/s1600/bullet_blue_arrow.png

http://3.bp.blogspot.com/-VgY5HIBADcE/T-Ae_38EuoI/AAAAAAAAEOk/Gs1nSHBGv7I/s1600/bullet_error.png

http://1.bp.blogspot.com/-ESf_DXPfOkA/T-AfAcFN-WI/AAAAAAAAEOs/8D735Aue-Lw/s1600/bullet_home.png

http://2.bp.blogspot.com/-UgEKqjyP6pM/T-AfBcHydVI/AAAAAAAAEO8/NNryZFgmP8U/s1600/bullet_tick.png

http://3.bp.blogspot.com/-iHyDInZidks/T-CQPj0yjcI/AAAAAAAAO5c/8tIQkJQtS98/s1600/star_bullet.png

http://1.bp.blogspot.com/-g3oZgkw7Nf4/T-CRdUryAoI/AAAAAAAAO5s/RWHTvnLzvhg/s1600/Love+icon.png

http://3.bp.blogspot.com/-NOERfdCP5aQ/T-CQ7ZZwLoI/AAAAAAAAO5k/MKiAn2f01iQ/s1600/Green+plus.png


http://3.bp.blogspot.com/-fWwI1sML0sQ/T-Ae-aNwdfI/AAAAAAAAEOU/_fvmTBy-MOY/s1600/11-dot-green.png

http://3.bp.blogspot.com/-o4lLQi8My4E/T-AfA1XL6eI/AAAAAAAAEO0/flMNtnRrbpQ/s1600/bullet_page_white.png

http://4.bp.blogspot.com/-vIaVFIRGpq8/T-AfDTS3hzI/AAAAAAAAEPU/ozdtdue1sVU/s1600/chrome_icon.gif

http://1.bp.blogspot.com/-J1aT05u-5pA/UReVRCHPbsI/AAAAAAAADKg/8J9IEvNVhpU/s1600/bullet-point-1.gif

http://4.bp.blogspot.com/-5xdi-XmzJ9M/UReVRh_w44I/AAAAAAAADKo/0F5adOWchXE/s1600/bullet-point-2.gif

http://3.bp.blogspot.com/-fk3C92N4fnc/UVHt8_rSJGI/AAAAAAAADi4/2qmyDcJUX9Y/s1600/shinemat-love-blue.gif

http://3.bp.blogspot.com/-P6BMwHSo1HA/UcxPJuzG7EI/AAAAAAAABog/OX-f6rrqWD4/s16/love-green.gif

http://4.bp.blogspot.com/-i3VEKmtpXUA/URvSb6VY6lI/AAAAAAAADQs/JEBlMgoix1Q/s1600/plus-blue-saimoom.png

http://3.bp.blogspot.com/-xD_eU6OP-NU/T0awJIr-w6I/AAAAAAAAAlU/WXppP7d6Ypk/s1600/plus-green-saimoom.png

http://3.bp.blogspot.com/-aw-UvZUCHLU/UQrTOUrpjZI/AAAAAAAADAo/qij7A07mNrQ/s1600/pp-icon-2.png

http://2.bp.blogspot.com/-FgOUOPZUeVc/UQrTMrdhJJI/AAAAAAAADAg/jDC4XAoNMZs/s1600/pp-icon-1.png

http://4.bp.blogspot.com/-cstWDyYNXmc/UQrTR0_tWZI/AAAAAAAADA4/i60OVVplMeY/s1600/rp-icon-2.png

http://4.bp.blogspot.com/-MNHtGz92wy4/UQrTP9Xw9bI/AAAAAAAADAw/m2Dj8CCqNHc/s1600/rp-icon-1.png

http://2.bp.blogspot.com/-ciNsbqbUJXI/UVNIKFERJdI/AAAAAAAADkA/0L76cMHJEf8/s1600/shinemat-bullet-green.png

http://2.bp.blogspot.com/-jl3Ixn_NCFw/UVNIJxiK0xI/AAAAAAAADj4/F5vcC2G2VUo/s1600/shinemat-bullet-brown.png

http://4.bp.blogspot.com/-Gspdhz1kbs8/UcxTrk73xjI/AAAAAAAABow/WGH7xC118Jk/s13/251.gif

http://1.bp.blogspot.com/-JqC1pTmK2bA/UcxTsKvpFEI/AAAAAAAABo0/YKucq2Uvu6Y/s13/255.gif

Sekian dulu penjelasan tentang Cara Mengganti Bullet List dan Number List yang Menarik pada Postingan Blog. Semoga artikel ini bisa membantu anda untuk memodifikasi bullet dan number list apad blog anda.