Tutorial Belajar Blog - Cara Membuat Notifikasi Blog Sederhana dengan CSS3 ,Tutorial ini saya dapatkan dari master blog
Johanes Djogan langsung saja bisa di kunjungin, Melanjutkan tutorial sebelumnya
Cara Membuat Pesan Pemberitahuan Admin Blog, tidak berbeda jauh fungsi tutorial ini dengan sebelumnya yaitu memberi Pesan Pemberitahuan admin blog.
MEMASANG NOTIFIKASI KE BLOGSPOT
Tambahkan KODE CSS Notifikasi Blog Sederhana ]]></b:skin>
#notifo {
top: 10px; /* posisi di paling atas */
right: 10px; /* posisi di paling kanan */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
color: #eee; /* warna background */
position: fixed; /* posisi melayang */
z-index: 999999;
overflow: hidden;
border-radius: 5px;
border: 1px solid #000;
background: rgba(0,0,0,0.7);
-webkit-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-o-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-ms-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
animation: fadeOutnotif 10 linear forwards; /* waktu notifikasi 10 detik */
}
#notifo {
float: left;
display: block;
padding: 0 15px;
text-align: left;
}
#notifo h2 {
color: #d00;
font-size: 19px;
line-height: 10px;
font-weight: bold;
text-align: center;
}
@-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;}
}
Note :
Rubahlah lamanya waktu tampil (7s) tepat di bawah tulisan /* waktu notifikasi 7 detik */Markup
Langkah terakhir, pasang Script dibawah ini diatas tag </body>
<div id='notifo'>
<h2>Notifikasi: </h2>
<p>Ganti dengan pesan yang ingin anda tampilkan</p>
<p>Ganti dengan pesan yang ingin anda tampilkan</p>
<p>Hello world.</p>
</div>
Sekian penjelasan repost ini mengenai Notifikasi blog sederhana dengan CSS3 Smoga bermanfaat
