Cara Mudah Membuat Notifikasi Alert Keren Di Blog

Share Pengalaman - Jumpa kembali kita teman-teman, pada postingan kali ini saya ingin berbagi sebuah tutorial blogging keren yaitu cara membuat  notifikasi alert keren di blog. Notifikasi alert ini berfungsi untuk memberitahukan sesuatu pada pengunjung blog, jika si admin blog mempunyai sebuah informasi yang memang ditujukan kepada para pengunjung blog.

Baca Juga: Cara Membuat Tombol Daftar Blog Saya Di Blog

Membuat notifikasi alert di blog akan terihat blog tampak profesional di mata para pengunjung blog, Jika blog telah di anggap profesional oleh pengunjung maka otomatis pengunjung tidak bakal bosan untuk selalu menunggu update dan mengunjungi blog kalian, oleh itu saya sangat menyarankan untuk kalian menggunakan cara ini.

Baca Juga: 4 Widget Artikel Terbaru Keren, Simple dan Responsive untuk Blog

Membuat notikasi keren dengan cara ini tidak akan membuat blog bermasalah, karena notifikasi alert ini terbuat dari kode css yang lembut dan tidak bakal membuat blog lambat loading akan tetapi bahkan fast loading, hehe dan yang satu lagi notifikasi alert ini mempunyai tampilan responsive jadi kalian tak usah risau dengan masalah pengujung via mobile dan juga tersedia tombol close "soory telat, hehe.

Tak usah panjang lebar lagi, sekarang saatnya untuk kalian yang mungkin ingin mencobanya silahkan baca cara membuat notifikasi alert keren di blog dengan cara yang telah saya terakan di bawah ini.

Langkah-langkah Membuat Notifikasi Alert Di Blog

Pertama-tama silahkan login ke blog masing-masing.

Selanjutnya silahkan klik menu tema > edit html.

Silahkan cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya.

.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;
}

Sekarang silahkan klik simpan templeat.
Silahkan klik menu tata letak dan silahkan pastekan kode html di bawah ini pada letak gadget yang ingin ditampilkan alert.

<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>

Jika sudah meletakkan kode di gadget, jangan lupa untuk klik simpan dan lihat hasilnya juga.

Demikianlah artikel tentang cara mudah membuat notifikasi alert di blog dengan tombol close. Semoga bermamfaat dan semoga sukses.