Cara Membuat Pesan Notifikasi Keren Di Blog Dengan CSS3

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.

Related Article

Be the first to comment

Leave a Reply

Your email address will not be published.


*