Minggu, 14 April 2013

Notifikasi sederhana dengan CSS3


Hay-Hay Mas Bro :), Bang Mysto mau berbagi trik CSS Nih,Yaitu Notifikasi sederhana dengan css3, ada yang tahu fungsinya gak ni? hehehe :),
sebenarnya apasih fungsinya?
ni bang Mysto kasih tahu...,Notifikasi sederhana dengan SCC3 ini untuk memberikan informasi dengan tulisan yang anda ingin tampilkan saat seseorang membuka blogger anda, tapi tenang aja, CSS3 ni gak mengganggu kerja blogger anda, di jamin enteng :)
Durasi penampilannya 10 Detik :)
Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya Bang Mysto jelaskan nanti dibawah.

ScreenShot :

Udah tahu kan kegunaannya?
langsung praktek?
monggo....

SCC

~Buka Blogger...
~ke Template...
~Edit HTML (udah gak pakek centang2 lagi, soalnya blogger udah update)
~Coppy CSS di bawah ini, gunakan "CTRL+C" ya :)
~ Letakan tepat di atas 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 djogzs.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;}
}
Ets, jangan udahan dulu, itu masih setengah jalan,
letakkan kode HTML ini tepat di bawah code <body> 


<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b> 
<p>1. Text Kamu.</p>
<p>2. Naruto shippuden tamat.</p>
<p>3. Gintama ceritanya mulai ngawur xD.</p>
<p>4. Hello world.</p>
</h2>
</span>
</div>
Selesai deh, Tunggu bentar, yang barusan di terangin itu posisinya di atas
kalau ingin di bawah anda tinggal ganti aja code ini :

#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}
Contoh :

1.Atas,kanan.

right: 10px;
top: 10px;

2. Bawah,kanan
.
right: 10px;
bottom: 10px;

dan seterusnya ya :)
posisi terserah anda ingin di tarok mana :)

patokannya :


top:atas
bottom:bawah
right:kanan
left:kiri


gampang kan?
selamat mencoba :D

Credit: djogzs

0 komentar:

Posting Komentar