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





  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 
Pasang iklan anda Di ini

20 komentar

keren gan, tapi ane gak suka yang banyak embel"

patut dicoa,, nice tips

Bagus Sob Info'a saya juga lagi cari ini ni... Sukses Terus.

waahhh mantap gan, ana langsung coba caranya nih :)

http://selo-aji.blogspot.com/

nice info gan.. sukses blogging.. :)

artikel menarik nih.. good artikel gan :)

Nice post, bisa di terapkan di blog gw nih sob, ijin sedot yah

Nice Info Gan

Saling Follow & Koment Yuk...http://duaselisih.blogspot.com/2013/12/mensos-kecewa-dengan-program-pembagian.html

Ini bisa difungsikan untuk adsense juga ya

mah perlu di coba ni mas.

Bisa untuk dipake buat FP Facebook gk, ?

keren mas izin copas ya

Sertakan Link Ini Hargai BlogI ini

blognya keren, artikelnya juga bermanfaat.
salam kenal

Keren gan, ijin copas tutorialnya gan :D

patut dicoba nie gan nice info nya nya

visit>>http://infoterbaru10.blogspot.com

Keren gan ,,,nanti saya coba....

cocok nih buat pemula kayak saya..
visit back gan

http://kurogaze.blogspot.com/

nice post mas hikam , ijin nyimak yah mas .

keren gan.
makasih sebelumnya.


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>


EmoticonEmoticon