Variasi List-Style-Type

Mungkin sebagian blogger belum banyak yang mengerti fungsi dari list-style-type. List-style-type sendiri berfungsi sebagai penanda bullet icon blog, sobat bisa melihat contohnya pada icon panah warna kuning yang ada di sidebar blog saya. Beberapa pertanyaan muncul yang menanyakan cara membuat icon warna kuning seperti di blog saya.

 

Saya pernah membahas sebelumnya di postingan cara memasang icon tab di sidebar blog, namun pada saat itu contoh yang saya gunakan menggunakan image icon dengan url atau icon yang sudah di simpan sebelumnya di hosting. Saya akan berikan beberapa kode dari list-style-type yang bisa sobat gunakan.

 

list-style-type: disc;	list-style-type: lower-greek;
list-style-type: circle;	list-style-type: hewbrew;
list-style-type: square;	list-style-type: armenian;
list-style-type: decimal-leading-zero;	list-style-type: georgian;
list-style-type: lower-roman;	list-style-type: cjk-ideographic;
list-style-type: upper-roman;	list-style-type: hiragana;
list-style-type: upper-alpha;	list-style-type: katakana;
list-style-type: lower-alpha;	list-style-type: hiragana-iroha;
list-style-type: none;	list-style-type: inherit;

 

• Silahkan login ke blogger.
• Tuju Tata Letak.
• Klik Edit HTML.
• Cari kode "list-style-type", jika list-style-type tersebut terletak di bagian css sidebar, maka yang akan sobat ubah adalah icon bullet pada sidebar.
• Contohnya seperti ini :

  #sidebar ul { padding:0; margin:0; color:#FFF }
  #sidebar ul li { list-style-type:square; padding-left:5px; margin:8px 0 0 20px }

• Ubah dan sesuaikan dengan keinginan sobat, contohnya di ubah menggunakan decimal-leading-zero, maka ganti hasilnya menjadi : 

  #sidebar ul { padding:0; margin:0; color:#FFF }
  #sidebar ul li { list-style-type:decimal-leading-zero; padding-left:5px; margin:8px 0 0 20px }

• Simpan Template.

 

Untuk list-style-type: square bisa sobat lihat pada bagian bawah blog ini. sobat bisa melihat icon kotak kecil yang tampil sebelum isi dari recent post di bawah.

 

 

Semoga bermanfaat.