Cara Membuat Notifikasi Blog Sederhana dengan CSS3

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
 <a href="https://plus.google.com/116573245674217957238?rel=author">Oktri Darmadi</a>

6   komentar

wajib saya nyoba nie mas...

salam hangat mas oktri
Reply Delete
semoga bermanfaat mas bro.... terima kasih sudah berkunjung dan berkomentar
Reply Delete
ya mas...
sama sama salam kenal...
Reply Delete
nice post gan :-bd
Reply Delete
keren..thank you bro..
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete

Posting Komentar

Cancel Reply