Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close

Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close - Seperti yang sudah cara-mei jelaskan di artikel sebelumnya, Notifikasi alert ini berfungsi untuk memberitahukan sesuatu pada pengunjung blog, jika si admin blog mempunyai sebuah informasi yang memang ditujukan kepada para pengunjung blog. Selain itu, dengan menggunakan sistem alert di blog, maka blog kalian akan terlihat lebih elegan dan profesional.

Pada tutorial kali ini, kita hanya akan menggunakan kode css dan html saja, tanpa menggunakan kode javascript. Tentunya hal ini tidak akan berpengaruh terhadap kecepatan loading blog, mengingat pembuatan sistem alert di blog hanya menggunakan css dan html saja.

Masih sama seperti artikel sebelumnya, pemasangan notifikasi alert ini bisa kalian terapkan didalam artikel, atau didalam postingan. Baca postingan sebelumnya jika belum paham.

Baca juga : Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Perlu diketahui juga, bahwa sistem alert yang akan kita buat sudah mobile friendly atau responsive, jadi kalian tidak perlu takut ukuran akan rusak, jika dibuka melalui perangkat mobile. Jika nantinya kalian kurang suka dengan komposisi warna, kalian juga bisa merubah sendiri sesuka hati, disini cara-mei akan memberikan kodenya yang nanti bisa kalian edit atau kembangkan sendiri.

Cara Membuat Notifikasi Alert Dengan Tombol Close

1. Silahkan salin kode css dibawah ini, dan pastekan tepat diatas kode ]]></b:skin>

 .alertmerah {
    padding: 20px;
    background-color: #f44336;
    color: white;
}
.alerthijau {
    padding: 20px;
    background-color: #6abc6e;
    color: white;
}
.alertbiru {
    padding: 20px;
    background-color: #47a8f5;
    color: white;
}
.alertorange {
    padding: 20px;
    background-color: #ffa92c;
    color: white;
}
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn:hover {
    color: black;
} 

2. Letakkan kode html berikut kedalam widget dimana kalian ingin memasang alert ini. Bisa di header,sidebar,footer dan semua yang ada kolom widget.

 <h2>Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close</h2>

<p>Klik tombol "x" untuk menutup pesan</p>
<div class="alertmerah">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<br />
<div class="alerthijau">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<br />
<div class="alertbiru">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<br />
<div class="alertorange">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div> 

3. Jika kalian ingin memasang kedalam postingan, maka gunakan mode HTML dalam menulis artikel, bukan melalui mode Compose.

Kalian bisa memodifikasi sendiri css diatas, misalkan ingin menambahkan border,mengganti warna, dll. Sistem Alert ini cocok digunakan untuk blog yang sudah ramai pengunjung, namun jika hanya untuk menambah kesan elegan, kalian juga bisa menerapkan cara ini untuk blog kalian.