Cara Memasang Notifikasi Seperti Windows 8 2013

Banyak cara untuk memodifikasi salah satunya membuat Notifikasi Seperti Windows 8. Cara ini aku dapatkan di blog nya Maz Waone . Emang yah mereka mereka tuh pada pinter kalo soal css. Kalo saya sendiri lagi dalam tahap pembelajaran.

Ok Back To Topik,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....!!! Untuk demo nya bisa di lihat di blog ini,karena saya juga memakainya atau jika tiba tiba terhapus,sobat bisa dilihat di Blog Maz Waone nya. Notifikasi ini akan menghilang sekitar 10 detik,jadi tambah keren kan ...

Kalo soal memperberat loading blog saya rasa bagaimana keadaan kecepatan internet sobat,sudah saya cek di modem saya yang GSM memakai kartu TELKOMSEL,kecepatan loading blog cepet ko,sedangkan ketika saya memakai modem Smartfren,lumayan agak delay. Jadi intinya gimana kecepatan internet sobat.

Sebelum ke tahap tutorial mungkin sobat juga tertarik artikel sebelumnya Cara membuat Animasi Loading Blog Keren 2013 .

Baiklah langsung ke tutorialnya,Untuk cara membuatnya simak sebagai berikut :

1. Login ke akun Blogger sobat
2. Template
3. Edit html
4.Lalu cari kode ]]></b:skin>
5. Tambahkan kode css di bawah ini tepat 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;.....}

6. Selanjutnya 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 teks yang berwarna merah dengan tulisan semau sobat.

7. Simpan lalu lihat hasilnya.

Terima kasih to Maz Waone