Information Site

Ping your blog, website, or RSS feed for Free ping fast  my blog, website, or RSS feed for Free My Ping in TotalPing.com blog-indonesia.com DMCA.com
Thursday, 1 August 2013

Cara Membuat Notifikasi Blog Sederhana nan Simple

MRR Cyber - Karena Tadi Ada Yang Request Ingin Membuat Notifikasi Blog Seperti Saya..
Saya Berfikir Untuk Membuat Artikelnya Saja :)
Yuk Langsung Aja..



Tambahkan Kode Dibawah Ini Di Atas ]]></b:skin>
 #notifo {
top: 10px;    /* posisi di paling atas    */ 
right: 10px; /* posisi di paling kanan */
width: 320px; /* lebar notif */
height: auto;          /* tinggi notif otomatis */
color: #eee;           /* warna background */
position: fixed;  /* posisi melayang */
z-index: 999999;
overflow: hidden;
border-radius: 5px; 
border: 1px solid #000;
background: rgba(0,0,0,0.7); 


-webkit-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-o-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
-ms-animation: fadeOutnotif 10s linear forwards; /* waktu notifikasi 10 detik */
animation: fadeOutnotif 10 linear forwards; /* waktu notifikasi 10 detik */
}
#notifo {
float: left;
display: block;
padding: 0 15px;
text-align: left;
}
#notifo h2 {
color: #d00;
font-size: 19px; 
line-height: 10px;
font-weight: bold;
text-align: center;
}
@-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;}
} 

Langkah Terakhir, Silahkan Pasang Script Dibawah Ini Tepat Di atas </body>
<div id='notifo'>

<h2>Notifikasi: </h2>

<p>Ganti dengan pesan yang ingin anda tampilkan</p>

<p>Ganti dengan pesan yang ingin anda tampilkan</p>

<p>Hello world.</p>

</div>
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

8 comments:

Dilarang Menggunakan Live Link [ Jika Menggunakan Akan Hilang Otomatis ]
Dilarang Menggunakan Kata Kata Berbau SARA, PORNO
Dilarang Flood and Spam
Tidak Menghina Sesama Blogger
Dilarang Menyimpang Dari Artikel Diatas ..

Ingin Bertukar Link ? Klik Disini