Selo Aji

Tips Unik dan Menarik

Cara Membuat Notifikasi Melayang Di Blog



Notifikasi adalah pemberitahuan atau kabar yang ditunjukan untuk sipengguna yang melihatnya. Bagi Anda yang ingin Membuat Notifikasi Melayang diblog maka ikutilah langkah-langkah sebagai berikut:

1. Login Blogger
2. Masuk ke menu template dan pilih Edit Html
3. Selanjutnya copy kode dibawah ini ,letakan kode tersebut tepat diatas kode ]]></b:skin>
4. 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. Kemudian cari kode <body>, letakan kode di bawah 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 ulasan Selo Aji kali ini mengenai Cara Membuat Notifikasi Melayang Di Blog dan semoga bermanfaat bagi Anda semua.

Baca juga:

Tags:

2 komentar

avatar

nice inpo gan :)

komen back

http://moonshadow48.blogspot.com/

Balas delete
avatar

Iya makasih dan Selamat mencoba :)

Balas delete