Fungsi dari "Notifikasi" itu sendiri hanya sebagai
pesan. Notifikasi biasanya sering digunakan pada blog untuk memberitahukan
kepada pengunjung bahwa blog tersebut sedang dalam perbaikan/maintenance....!!!
RSR-Site|Berikut Cara Membuat Notifikasi Windows Dengan Css3
:
Tambahkan kode css3 ini diatas kode ]]></b:skin>
.container {right: 10px;top: 10px;margin: 20px auto;width:
380px;z-index: 999999;
position: fixed;
-webkit-animation: fadeOutnotif 10s linear forwards; /*
Waktu notifikasi 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;
}
.container .notif {margin: 10px 0;}
.notif {position: relative;padding: 25px 30px 25px
100px;min-height: 50px;line-height: 22px; background: white;border-radius:
2px;}
.notif:before {content: '';position: absolute;top:
25px;left: 30px;width: 40px;height: 40px;border: 5px solid;border-radius:
25px;}
.notif p {font-size: 11px;color: #666;}
.notif-title { margin: 0 0 5px; font-size: 14px;
font-weight: bold; color: #333;}
.notif-title:before, .notif-title:after {content: '';
position: absolute;background: white;border-radius: 2px;}
.notif-notice:before {background: #a7d155;border-color:
#8fb14f;}
.notif-notice .notif-title:before, .notif-notice
.notif-title:after {top: 44px;left: 55px;width:4px; height: 12px;
-webkit-transform:
rotate(45deg);
-moz-transform:
rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform:
rotate(45deg);
transform:
rotate(45deg);
}
.notif-notice .notif-title:after {top: 50px; left:
48px;width: 8px;height: 4px;}
.notif-controls { position: absolute; top: 0; right: 0;
height: 16px; padding: 4px 3px 5px;background: #f0f0f0;border: solid #dcdcdc;
border-width: 0 0 1px 1px;border-radius: 0 2px;}
.notif-controls > a {position: relative;float:
left;margin: 0 1px;width: 16px;height: 16px;
font: 0/0 serif;text-shadow: none;color: transparent;}
.notif-minimize:before {content: '';position: absolute;top:
11px;left: 4px;width: 7px;height: 2px;background: #bbb;}
.notif-minimize:hover:before {background: #888;}
.notif-zoom:before {content: '';position: absolute;top:
6px;left: 3px;width: 5px;height: 3px;border: 2px solid #bbb;}
.notif-zoom:hover:before {border-color: #888;}
.notif-close:before, .notif-close:after {content:
'';position: absolute;top: 4px;left: 7px;width: 2px;height: 10px;
background: #bbb;
-webkit-transform:
rotate(45deg);
-moz-transform:
rotate(45deg);
-ms-transform:
rotate(45deg);
-o-transform:
rotate(45deg);
transform:
rotate(45deg);
}
.notif-close:after {top: 8px;left: 3px;width: 10px;height:
2px;}
.notif-close:hover:before, .notif-close:hover:after
{background: #888;}
.lt-ie9 .notif-notice .notif-title:before {content:
'\2714';display: block;top: 25px;left: 30px;width: 50px;font: bold 18px/50px
"Arial Unicode MS";color: white;text-align: center;background: none;}
.lt-ie9 .notif-notice .notif-title:after {display: none;}
.lt-ie9 .notif-alert .notif-title:before {content: '\2716';
display: block;top: 25px;left: 30px;width: 50px;font: bold 17px/50px
"Arial Unicode MS";color: white;text-align: center;background: none;}
.lt-ie9 .notif-alert .notif-title:after { display: none;}
.lt-ie9 .notif-close:before {content: '\2716';display:
block;top: 0;left: 0;width: 16px;font: 11px/19px 'Arial Unicode MS';color:
#bbb;text-align: center;background: none;}
.lt-ie9 .notif-close:after {display: none;}
.lt-ie9 .notif-close:hover:before {color: #999;}
@-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;}
}
Untuk menempatkan "Notifikasi" ini pada bagian
kiri atas blog, Cukup edit kode ini :
.container {right: 10px;top: 10px;..............} Menjadi
.container {left: 10px;top: 10px;.....}
Untuk kode HTML-nya cukup tambahkan kode ini di bawah kode
<body> atau diatas kode </body>.
<div
class="container">
<section
class="notif notif-notice">
<h6
class="notif-title">Perhatian!</h6>
<p>Ganti
dengan pesan yang ingin anda tampilkan</p>
<div
class="notif-controls">
<a
href="#" class="notif-minimize">Minimize</a>
<a
href="#" class="notif-zoom">Zoom</a>
<a
href="#" class="notif-close">Close</a>
</div>
</section>
</div>
Ganti text berwarna "Biru" dengan pesan yang akan
anda tampilkan.
