Sunday, March 13, 2016

Cara Mengganti Bullet dan Number List pada Postingan Blog

Bullet list dan number list merupakan suatu bagian yang terpenting ketika kita membuat postingan pada blog. Bullet list atau number list biasanya digunakan saat menjelaskan sesuatu pada artikel yang memiliki poin-poin penting, atau artikel yang menjelaskan step-step pada tutorial. Biasanya secara default bullet list pada postingan blogspot berbetuk bulat. Mungkin anda bosan melihat bullet list seperti ini dan ingin memodifikasinya menjadi bentuk yang anda inginkan seperti, betuk kotak, tanda cek list, dan lain sebagainya.

Nah, pada kesempatan kali ini saya akan mencoba menjelaskan tentang cara mengganti bullet list dan number list pada postingan blog agar terlihat lebih menarik bagi pengunjung blog anda. Untuk cara mengganti bullet dan number list pada postingan blog saya akan mencoba memberikan 2 alternatif yang bisa anda gunakan sebagai pilihan. Anda pilih sesuai dengan keinginan anda

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

#Langkah pertama cara mengganti bullet list dan number list

Masuk di akun blogger sobat, kemudian pilih Template>>Edit HTML

# Langkah kedua cara mengganti bullet list dan number list

Cari kode berikut  ]]></b:skin>. Untuk memudahkan pencarian silahkan tekan CTRL+F

# Langkah ketiga cara mengganti bullet list dan number list

 Jika kode ]]></b:skin> sudah anda temukan, silahkan pastekan kode css berikut tepat di atasnya
.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

Sebelum menyimpan pastikan kode dan letaknya sudah benar. Jika sudah benar seperti di bawah ini Kemudian klik "Simpan Temlate".
.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 :

Bullet List

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. 
Load disqus comments

0 comments