Friday, December 18, 2015

Membuat Bullet dan Numbering untuk Blogger menggunakan CSS

Artikel ini memberikan contoh membuat bullet dan numbering menggunakan CSS yang bisa digunakan untuk merapikan halaman blog.



Artikel ini dibagi menjadi tiga bagian, yaitu : pertama">Bagian pertama : contoh CSS dan html untuk menampilkan bullet dan numbering, Bagian kedua : contoh display dari contoh pertama dan Bagian ketiga : penjelasan dari kode yang digunakan.

Untuk membuat bullet dan numbering tanpa menggunakan CSS, bisa 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 menggunakan 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 menggunakan 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 menggunakan 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 menggunakan 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 menggunakan 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 menggunakan style ul.a dan li.satu
    Daftar Belanja :
  • Buku
  • Pinsil
  • Penghapus

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


Contoh Numbering

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

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

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

III. Penjelasan :

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

Semoga sharing ini bermanfaat

Referensi: http://www.w3schools.com

Artikel terkait :

No comments:

Post a Comment