Cara Membuat Notification Boxes di Blogger

Notification Boxes (Kotak Pemberitahuan) atau Messages Boxes (Kotak Pesan) sangat berguna untuk menginformasikan berbagai pesan penting kepada pembaca, seperti pesan error, pesan sukses, pesan peringatan, dan lain sebagainya, dengan masing-masing tampilan kotak memiliki warna yang berbeda. Hal ini biasanya digunakan pada bagian postingan blog yang membagikan trik, template, dan sejenisnya. Pesan yang dibagikan biasanya berikatan dengan isi postingan.

Berikut adalah contoh penggunaan Notification Box oleh Mas Sugeng pada salah satu postingan blognya :

Untuk itu, kali ini saya bagikan Notification Boxes yang sudah responsive yang juga dipercantik dengan ikon dari Font Awesome. Sehingga, setiap jenis Kotak memiliki warna dan ikon yang berbeda.

Jadi, untuk Anda yang ingin menggunakan kotak pemberitahuan ini, pastikan telah memasang script Font Awesome. Jika belum, silahkan salin kode di bawah ini dan letakan di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika sudah, sekarang lanjut ke pokok pembahasannya. Dalam tutorial ini, saya akan membagikan cara membuat berbagai jenis kotak pemberitahuan yang paling sering digunakan, yaitu :

1. Information Box
2. Success Box
3. Warning Box
4. Error Box

Cara Membuat Notification Boxes di Blog

Silahkan letakan kode CSS berikut ini di atas kode ]]></b:skin> atau </style>

/* CSS3 Notification Boxes by WahyuPratama.id */
.why-info, .why-success, .why-warning, .why-error {
    padding:10px;
    margin:10px 0;
    display: block;
    font-style: normal;
}
.why-info:before, .why-success:before, .why-warning:before, .why-error:before {
    font-family:FontAwesome;
    display: block;
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.why-info:before {
    content:"\f05a";
}
.why-success:before {
    content:'\f00c';
}
.why-warning:before {
    content:'\f071';
}
.why-error:before {
    content:'\f057';
}
.why-info {
    color: #00529B;
    background-color: #BDE5F8;
}
.why-success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.why-warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.why-error {
    color: #D8000C;
    background-color: #FFBABA;
}

Setelah itu, silahkan simpan perubahan template.

Cara Penggunaan

Terakhir, Anda hanya perlu menyisipkan beberapa kode HTML berikut ini untuk menampilkan kotak pemberitahuan di dalam postingan blog Anda, halaman statis, sidebar widgets, atau di bagian lain yang Anda inginkan.

1. Information Box

This is an info message.

<div class="why-info">Teks Anda Di sini</div>

2. Success Box

This is a success message.

<div class="why-success">Teks Anda Di sini</div>

3. Warning Box

Consider this a warning.

<div class="why-warning">Teks Anda Di sini</div>

4. Error Box

This is an error message.

<div class="why-error">Teks Anda Di sini</div>

Sekian tutorial yang dapat saya bagikan. Jika Anda mengalami kesulitan, silahkan sampaikan melalui kolom komentar di bawah ini.

Tweet