» » Membuat Bullet Dan Numbering Untuk Blogger Memakai Css

Membuat Bullet Dan Numbering Untuk Blogger Memakai Css

Artikel ini menunjukkan pola menciptakan bullet dan numbering memakai CSS yang dapat dipakai untuk merapikan halaman blog.



Artikel ini dibagi menjadi tiga bagian, yakni : pertama">Bagian pertama : pola CSS dan html untuk menampilkan bullet dan numbering, Bagian kedua : pola display dari pola pertama dan Bagian ketiga : klarifikasi dari arahan yang digunakan.

Untuk menciptakan bullet dan numbering tanpa memakai CSS, dapat klik disini

I. CSS dan html :



<style>
.judul {
        color: darkviolet;
        font-size:18px;
        letter-spacing: 2px;
     }

.subjudul {
        color : darkblue;
        font-size:16px;
    }

ul.a {
         font-family: "Times New Roman", Times, serif;
         font-size:18px;
         background:violet;
         width:300px;
      }

ul.b {

         font-size:20px;
         width:300px;
     }

ol.c {
         list-style-type: upper-roman;
         background:lightblue;
         width:100px;
         padding: 20px;
     }

ol.d {
        list-style-type: lower-alpha;
        background: violet;
        color:white;
        padding: 50px;
        margin-left: 45px;
     } 

ol.e {
         list-style-type: upper-alpha;
     }

li.satu {
         list-style-type: circle;
         list-style-position:outside;
         background: pink;
       }

li.dua {
         list-style-type: square;
         list-style-position:inside;
       }

li.tiga {
         list-style-position:inside;
         color:darkgreen;
     }
</style>

<span class="judul">Contoh Bullet </span><br />
<br />
<span class="subjudul">Bullet memakai style ul.a dan li.satu</span><br />
<ul class="a">
Daftar Belanja :
<li class="satu">Buku</li>
<li class="satu">Pinsil</li>
<li class="satu">Penghapus</li>
</ul>
<br />
<span class="subjudul">Bullet memakai style ul.b dan li.dua</span>
<br />
<ul class="b">
Daftar belanja :
<li class="dua">Buku</li>
<li class="dua">Pinsil</li>
<li class="dua">Penghapus</li>
</ul>
<br />
<span class="judul">Contoh Numbering </span><br />
<br />
<span class="subjudul">Numbering memakai style ol.c dan li.tiga</span>
<br />
<ol class="c">Daftar Belanja :
<li class="tiga">Buku</li>
<li class="tiga">Pinsil</li>
<li class="tiga">Penghapus</li>
</ol>
<br />
<span class="subjudul">Numbering memakai style ol.d</span>
<br />
<ol class="d">Daftar Belanja :
<li>Buku</li>
<li>Pinsil</li>
<li>Penghapus</li>
</ol>
<br />
<span class="subjudul">Numbering memakai style ol.e</span>
<br />
<ol class="e">Daftar Belanja :
<li>Buku</li>
<li>Pinsil</li>
<li>Penghapus</li>
</ol>


II. Hasil display sebagai berikut :

Contoh Bullet

Bullet memakai style ul.a dan li.satu
    Daftar Belanja :
  • Buku
  • Pinsil
  • Penghapus

Bullet memakai style ul.b dan li.dua
    Daftar belanja :
  • Buku
  • Pinsil
  • Penghapus


Contoh Numbering

Numbering memakai style ol.c dan li.tiga
    Daftar Belanja :
  1. Buku
  2. Pinsil
  3. Penghapus

Numbering memakai style ol.d
    Daftar Belanja :
  1. Buku
  2. Pinsil
  3. Penghapus

Numbering memakai style ol.e
    Daftar Belanja :
  1. Buku
  2. Pinsil
  3. Penghapus

III. Penjelasan :

Kode yang dipakai didalam CSS :
  • list-style type : dipakai untuk tipe bullet atau numbering
  • list-style-position : dipakai untuk mengatur posisi (inside, outside)
  • width : dipakai untuk mengatur lebar dari kiri ke kanan
  • background : dipakai untuk mengatur warna background
  • font-size : untuk mengatur ukuran font

Semoga sharing ini bermanfaat
Referensi: http://www.w3schools.com
Artikel terkait :

Related : Membuat Bullet Dan Numbering Untuk Blogger Memakai Css

0 Komentar untuk "Membuat Bullet Dan Numbering Untuk Blogger Memakai Css"

DUKUNG KAMI

KLIK
SAWER Ngopi Disini.! Merasa Terbantu Dengan artikel ini? Ayo Traktir Kopi Dengan Cara Berbagi Donasi. Agar Kami Tambah Semangat. Terimakasih :)