On Sunday, 31 March 2013
Assalamualaikum! hari ni Megat nak ajar kepada korang cara membuat widget notifikasi. widget ini mepermudahkan kita untuk memberitahu kepada sesiapa yg datang ke blog kita. cuba korang tengok di sebelah kanan blog saya...nampak tak? atau lihat saja anak panah pada screenshot dibawah ni.
oke, sekarang kita mulakan cara membuat widget notifikasi ni...
Screenshot
CSS
Buka blogger=>template=> Edit HTML, copy CSS ini dan letakan diatas kode ]]></b:skin>
HTML
seterusnya letakkan kode HTML ini dibawah kode <body>
oke, sekarang kita mulakan cara membuat widget notifikasi ni...
Screenshot
CSS
Buka blogger=>template=> Edit HTML, copy CSS ini dan letakan diatas kode ]]></b:skin>
#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 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;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes dagingturbo.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;}
}
HTML
seterusnya letakkan kode HTML ini dibawah kode <body>
<div id='notifjo'>Terima Kasih! semoga berjaya :D
<span>
<h2><b>Notifikasi :</b>
<p>1. Tolong Like Fanpage Facebook Saya.</p>
<p>2. Jangan Lupa Untuk Follow Blog Saya.</p>
<p>3. Tinggalkan Jejak Anda Di Shoutbox.</p>
<p>4. Follow NuffnangX Saya Sekali :D .</p>
</h2>
</span>
</div>