Cara Membuat Notifikasi Windows Pada Blog

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....!!!

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.

---

• http://http://maz-waone.blogspot.com

Perhatian !!!

Contoh dari Notifikasi Windows Css3 dengan waktu 10 detik

Minimize Zoom Close