Notifikasi merupakan pemberitahuan yang biasanya ditempatkan di sebuah situs/blog. Umumnya notifikasi dibuat menggunakan JavaScript dengan tampilan yang cukup sederhana. Dampak dari penggunaan JavaScript untuk sebuah blog adalah pada Page Loading, oleh karena itu menggunakan CSS lebih disarankan daripada menggunakan JavaScript. Selain keren, lebih praktis dan mudah.
Oleh karena itu pada kesempatan kali ini NALHACKER ingin share mengenai Cara Membuat Pesan Notifikasi Keren Di Blog Dengan CSS3. Langsung saja ikuti langkah-langkahnya :
- Login ke Dashboard blog anda
- Pilih Template > Edit HTML
Kode CSS (Letakan diatas kode "]]></b:skin>")
#NotifikasiNP {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#NotifikasiNP a {
display:block;
text-decoration:none;}
#NotifikasiNP span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#NotifikasiNP span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
Kode HTML (Letakan dibawah kode "<body>")
<div id='NotifikasiNP'>
<span>
<h2>
<b>Hai, Terima Kasih atas kunjungannya !</b>
<b>NEGERI TIHULALE - www.tihulale.com</b>
</h2>
</span>
</div>
Preview
Demo
Sekarang simpan template anda dan buka halaman blog anda untuk melihat hasilnya. Semoga Cara Membuat Pesan Notifikasi Keren Di Blog Dengan CSS3 saya ini dapat bermanfaat bagi anda.
Jika Anda menyukai Artikel di blog ini, Silahkan
KLIK DISINI atau dengan memasukan alamat email pada kolom dibawah dan tekan tombol Subscribe untuk mendapatkan pemberitahuan melalui email setiap kali ada artikel terbaru yang diterbitkan di NALHACKER Portal.
