Friday, December 18, 2015

Membuat Bullet dan Numbering untuk Blogger menggunakan CSS

Labels:
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 :
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)