ID-Communty - belum lama ini
ada pengunjung yang request "gan cara buat notif kaya blog agan gimana?"
oke kali ini saya akan bahas hari ini yaitu cara membuat Notifikasi
melayang di blog seperti yang terpasang pada blog ini c, lalu
apa fungsinya..? ya pastinya untuk membuat pemberitahuan kepada
pengunjung seperti halnya memberi kata selamat datang atau memberi pesan
bahwa anda sedang sibuk atau yang lainnya tergantung anda memakainya
untuk apa.. ,tidak usah saya jelaskan terlalu panjang karena anda juga
pasti sudah tahu fungsi dari tutorial kali ini. langsung ke cara
pembuatannya :
- Masuk ke Template.
- Edit HTML
- Copy kode di bawah ini, tepat di atas kode ]]></b:skin>
- Simpan.
#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;
}
@-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;}
}
5. Copy kode dibawah ini tepat dibawah kode
<body>
6. Simpan.
<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>|| Selamat datang ||</p>
<p>Bersikaplah dengan sopan seperti halnya bertamu dengan cara mematuhi aturan disini.</p>
<p>terima kasih sudah berkunjung.. ^_^</p>
</h2>
</span>
</div>
Keterangan :
- Kata-katanya bisa anda ubah sesuai keinginan.
demikian tutorial hari ini semoga berhasil dan bermanfaat untuk anda, terima kasih untuk yang request artikel ini akhirnya saya tidak kehabisan ide untuk blogging :) ,jika ada yang ingin di tanyakan untuk artikel kali ini jangan sungkan berkomentar. terima kasih.