Cara Membuat Warning Messeges Melayang Di Blog

Hallo Sobat Blogger Admin  Mau Bagi Tutorial  Cara Membuat Warning Messeges Melayang Di Blog LangSung Ke TKP Saja Yu

Nie Contohnya Dan Demonya

• Demo

1. Masuk ke Template.
2. Edit HTML
3. Copy semua Kode Yang Ada Di Bawah 
4. Letakan Kode Yang Tadi Anda Copy tepat di atas kode ]]></b:skin>

 #Messeges {
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;
}
#Messeges a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#Messeges 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. Simpan.

 <div id='Messeges'>
<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.. ^_^ Dan Jangan Lupa Tinggalkan Komentar</p>
</h2>
</span>
</div>

1. Nah Kode Selanjut Ya 
2. Copy kode Diatas ini tepat dibawah kode </body>
3. Selesai Dehhh...........
4. Simpan

Keterangan :

    Kata-katanya bisa anda ubah sesuai keinginan Sobat Blogger

Sekian Dulu Artikel Hari Ini Dan Jangan Lupa Tingglkan Komentra Anda Di Sini Agar Tidak Eror Terimakasih 

Tweet