- Jumpa kembali kita teman-teman, pada postingan kali ini aku ingin menyebarkan sebuah tutorial blogging keren yaitu cara membuat notifikasi alert keren di blog. Notifikasi alert ini berfungsi untuk memberitahukan sesuatu pada pengunjung blog, jikalau si admin blog memiliki 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 aku sangat menyarankan untuk kalian memakai cara ini.
Baca Juga: 4 Widget Artikel Terbaru Keren, Simple dan Responsive untuk Blog
Membuat notikasi keren dengan cara ini tidak akan menciptakan blog bermasalah, alasannya yakni notifikasi alert ini terbuat dari instruksi css yang lembut dan tidak bakal menciptakan blog lambat loading akan tetapi bahkan fast loading, hehe dan yang satu lagi notifikasi alert ini memiliki tampilan responsive jadi kalian tak usah risau dengan duduk masalah pengujung via mobile dan juga tersedia tombol close "soory telat, hehe.
Tak usah panjang lebar lagi, kini saatnya untuk kalian yang mungkin ingin mencobanya silahkan baca cara menciptakan notifikasi alert keren di blog dengan cara yang telah aku terakan di bawah ini.
Langkah-langkah Membuat Notifikasi Alert Di Blog
Pertama-tama silahkan login ke blog masing-masing.
Selanjutnya silahkan klik sajian tema > edit html.
Silahkan cari kode ]]></b:skin> dan letakkan instruksi 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 sajian tata letak dan silahkan pastekan instruksi 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';">×</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';">×</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';">×</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';">×</span> <strong>Danger!</strong> Indicates a dangerous or potentially negative action. </div> Demikianlah artikel perihal cara gampang menciptakan notifikasi alert di blog dengan tombol close. Semoga bermamfaat dan supaya sukses.