Widodo

Cara Membuat tags Kategory Disertai Count dengan Css dan html

Selamat Pagi Sobat

Oke untuk dikesempan ini saya akan membahas lagi tentang css dan html yaitu pembuatan tags kategory disertai count dengan menggunakan css dan html untuk saya jelaskan sedikit tentang tags kategory sebagai berikut

Tags Kategory : fungsi kategori adalah untuk kategorisasi atau pengelompokan artikel / posting yg kita tulis. Memang kalau tulisan di web atau blog masih belum terasa manfaatnya. Tapi kalau artikel yang kita tulis sudah puluhan, ratusan atau bahkan ribuan, kategori menjadi wajib untuk di terapkan di web maupun blog karena mempermudahkan pengunjung untuk mencari sebuah kategory web. oke mungkin itu saja yang bisa saya jelaskan mungkin langsung kita prakekkan..

1. Silahkan buat folder recent post di localdist kalian.

2. Setelah itu buka Editor web kalian masing2

3. Buatlah Document baru

4. Silahkan tulis script cssnya diatas </head> atau bisa liat contoh dibwah ini

ul, li {list-style:none; margin:0px; padding:0px;}
.tags {width:230px; border:solid 2px #eee; padding:9px }
.tags li a {display:block; border-bottom:solid 1px #eeeeee; 
padding:7px 0px 7px 0px; width:100%; text-decoration:none; font-family:Arial, Helvetica, sans-serif}
.tags li a .count {float:right; text-align:center; font-size:12px; width:15px; height:15px; padding:3px; border-radius:50%;
color:#ffffff; background:#333;}
.tags li a:hover{color:#0099FF}
.tags li a:hover .count {background:#0099FF}

5. Setelah itu anda tinggal memanggil code cssnya dengan HTML seperti dibwah ini

<div class="tags">
<ul>
<li><a href="#">Kategory <div class="count">2</div></a></li>
<li><a href="#">Kategory <div class="count">2</div></a></li>
<li><a href="#">Kategory <div class="count">2</div></a></li>
<li><a href="#">Kategory <div class="count">2</div></a></li>
<li><a href="#">Kategory <div class="count">2</div></a></li>
<li><a href="#">Kategory <div class="count">2</div></a></li>
</ul></div>

6. Selesai....



0 Komentar