26 Januari 2014

Beberapa Jenis Bullet Tanpa Gambar

Contoh dibawah ini adalah beberapa jenis bullet menggunakan css tanpa memerlukan gambar. Bullet list ini bisa digunakan pada postingan blog ataupun bahasa pemograman berbasis web lainnya. Lihat contoh dibawah.

  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh

  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh

  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh
  • Contoh

Cara pembuatan pada blog
  • Masuk ke akun blogger. Pilih link template, lalu klik tombol edit html.
  • Ketik ctrl+f untuk menampilkan textbox pencarian, lalu masukkan kode ini ]]</b:skin> dan kilk tombol search untuk mencari.
  • Setelah ketemu copy kode dibawah ini tepat diatas kode  ]]</b:skin>
  • .ul tipe1 {
     list-style-type: disc;
    }
    
  • Setelah selesai, masuk ke menu postingan anda, pilih tombol entry baru untuk membuat postingan.
  • Buat 4 baris kata/kalimat, blok ke-empat kata/kalimat tersebut lalu klik tombol bullet list.
  • Untuk menerapkan gaya css yang sudah dibuat, kita perlu mengubah class pada postingan anda.
  • klik tombol HTML disebelah tombol Compose dan ubah class pada <ul>  menjadi seperti kode dibawah.
  • <ul class="ul-tipe1" style="margin: 0;">
    <li>text/kalimat</li>
    <li>text/kalimat</li>
    </ul>
    
  • Perhatikan ul-tipe1 adalah nama css yang sudah dibuat tadi. Sampai disini kita sudah berhasil membuat bullet list dengan style standar yaitu style disc.
  • Untuk mengubah style-style tersebut kita cukup mengubah kode css yang sudah dicopy tadi yaitu "list-style-type: disc" yang anda copy di template html tadi menjadi "list-style-type: circle".
  • Perhatikan kode disc ini untuk menampilkan bullet seperti titik hitam, sedangkan circle untuk bullet dengan gaya lingkaran. Untuk lebih jelasnya lihat kode dibawah.

  • Disc
  • Circle
  • Square
  • Decimal

  • Decimal-leading-zero
  • Lower-roman
  • Upper-roman

  • Lower-greek
  • lower-latin
  • Upper-latin
  • Armenian

  • Georgian
  • Lower-alpha
  • Upper-alpha
  • None


  • Nama-nama diatas adalah style type pada bullet sesuai dengan gayanya masing-masing. Untuk mengunakannya tinggal mengganti kode css yang sudah dibahas tadi menjadi nama-nama diatas sesuai keinginan. Untuk mewarnai list bullet, baca artikel html mewarnai bullet tanpa gambar Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser