Cara Membuat Warning Messeges Melayang Di Blog

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 

20 komentar

  1. keren gan, tapi ane gak suka yang banyak embel"

    BalasHapus
  2. patut dicoa,, nice tips

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

    BalasHapus
  4. waahhh mantap gan, ana langsung coba caranya nih :)

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

    BalasHapus
  5. nice info gan.. sukses blogging.. :)

    BalasHapus
  6. artikel menarik nih.. good artikel gan :)

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

    BalasHapus
  8. Nice Info Gan

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

    BalasHapus
  9. Ini bisa difungsikan untuk adsense juga ya

    BalasHapus
  10. mah perlu di coba ni mas.

    BalasHapus
  11. Bisa untuk dipake buat FP Facebook gk, ?

    BalasHapus
  12. keren mas izin copas ya

    BalasHapus
    Balasan
    1. Sertakan Link Ini Hargai BlogI ini

      Hapus
  13. blognya keren, artikelnya juga bermanfaat.
    salam kenal

    BalasHapus
  14. Keren gan, ijin copas tutorialnya gan :D

    BalasHapus
  15. patut dicoba nie gan nice info nya nya

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

    BalasHapus
  16. Keren gan ,,,nanti saya coba....

    BalasHapus
  17. cocok nih buat pemula kayak saya..
    visit back gan

    http://kurogaze.blogspot.com/

    BalasHapus
  18. nice post mas hikam , ijin nyimak yah mas .

    BalasHapus
  19. keren gan.
    makasih sebelumnya.

    BalasHapus


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>