author Ahmad Muhardian

Tutorial CSS: Membuat Style untuk Badge Notifikasi


Badge notifikasi sering kali kita temukan dalam website maupun aplikasi. Terkadang badge tersebut menggoda kita untuk mengelik link atau tombol notifikasi. Itulah fungsinya, agar user tau, di sana ada sesuatu yang baru. Badge biasanya dilengkapi dengan angka penghitung.

Framework antarmuka semacam Bootstrap sudah menyediakan class sendiri untuk pembuatan badge. Namun, karena badge yang dihasilkan tidak sesui seperti harapan, maka kita harus membuatnya sendiri.

Kode CSS

.badge-notif {
        position:relative;
}

.badge-notif[data-badge]:after {
        content:attr(data-badge);
        position:absolute;
        top:-10px;
        right:-10px;
        font-size:.7em;
        background:#e53935;
        color:white;
        width:18px;
    height:18px;
        text-align:center;
        line-height:18px;
        border-radius: 50%;
}
Pada kode CSS di atas, kita mengambil isi badge dari atribut data-badge. Untuk posisi badge dapat diatur dalam properti top dan right. Warna, ukuran, font, background dll. bisa diatur sendiri sesui selera.

Penggunaan di HTML

Elemen yang ingin menggunakan badge yang dibuat tadi harus menambahkan class badge-notif dan sebuah atribut data-badge untuk konten badge-nya. Contoh:

Pada Tombol
<button class=“badge-notif” data-badge=“12”>Notifikasi</button>
Pada Link
<a href="#!" class=“badge-notif” data-badge=“22”>Pesan</a>

Demo

JS Bin on jsbin.com

Baca Juga ini

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Tutorial CSS: Cara Membuat Effek Bayangan dengan CSS

Tutorial CSS: Cara Membuat Effek Bayangan dengan CSS

Properti untuk membuat bayangan (shadow), mulai dikenalkan pada CSS3. Properti tersebut adalah box-shadow dan text-shadow. Keduanya sama-sama berfungsi untuk membuat bayangan. Properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen kontainer. Sementara itu, properti text-shadow digunakan untuk membuat bayangan pada teks. Membuat Bayangan untuk TeksLangsung saja ke contoh, silahkan buat style seperti ini. h2 { text-shadow: 3px 2px 1px grey; font-size: 40px; } kemudian HTML-nya:

Tutorial CSS #02: Cara Menulis CSS di HTML

Tutorial CSS #02: Cara Menulis CSS di HTML

Giaman sih cara menulis CSS di dalam HTML. Mari kita Pelajari 3 cara menulis CSS di HTML.