Simple Notifikasi Melayang di Bawah Blog

Hello Sob.. Kali ini saya akan menyembahkan trik. trik yang satu ini namanya "Simple Notifikasi" biasanya kan diatas blog, kini MZT akan menghadirkan yang terbaru adalah dibawah hehe. Sebenarnya tidak sulit mengeditnya hanya margin-marginya aja.

-Login ke Blogger

- Masuk ke Menu Template>Edit HTML

- Lalu Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#Navbar-MZT{
font-family: offside;
font-size: 11pt;
color: #0052BE;
background: url(/favicon.ico) no-repeat center left fixed white;
border: 3px solid #0052BE;
padding: 3px;
z-index: 100000000;
bottom: 0px;
position: fixed;
-webkit-animation: fadeOutnotif 5s linear forwards; /* notif 5 detik */
-moz-animation: fadeOutnotif 5s linear forwards;
-o-animation: fadeOutnotif 5s linear forwards;
-ms-animation: fadeOutnotif 5s linear forwards;
animation: fadeOutnotif 5s linear forwards;
-webkit-box-shadow: 0px 0px 10px #0052BE;
-mox-box-shadow: 0px 0px 10px #0052BE;
-ms-box-shadow: 0px 0px 10px #0052BE;
-o-box-shadow: 0px 0px 10px #0052BE;
box-shadow: 0px 0px 10px #0052BE;
}
#Navbar-MZT .dmnavleft{float:left;font-weight:bold;padding:2px 10px;}
#Navbar-MZT .dmnavright{float:right;padding:0px 2px;}

}
#Navbar-MZT a {
display:block;
text-decoration:none;}
#Navbar-MZT span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#Navbar-MZT span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Maverick Zetta http://maverickzetta.blogspot.com/ */
@-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;}
}

- Cari kode </body> dan letakan kode dibawah ini tepat diatas kode </body>

<div id='Navbar-MZT' style='position:fixed;'>
<span class='dmnavleft'>
Gunakanlah Browser Google Chrome Untuk Tampilan Terbaik
</span>
<span class='dmnavright' style='font-family:verdana;'>
</span></div> 

- Simpan Template

Original Script

Nah, Gimana ?? Gampang bukan ?? Saatnya Saya Pamit Undur Diri..
Sekian dan Terimah Kasih..

~Wassalam

Tweet