Cara Membuat Slide Out Notifikasi Melayang di Blog
>
Cara Membuat Slide Out atau Notifikasi Melayang di Blog - Slide Out atau Notifikasi merupakan salah satu pesan admin blog atau author kepada para Pengunjung, Pesan ini bisa diganti sesuka hati sobat. Pesan Notifikasi ini akan muncul setiap pertama loading blog dan akan hilang dengan sendirinya dengan waktu yang telah ditentukan. Notifikasi ini sangat Optimal karena lebih mudah dilihat oleh pengunjung dan tidak membuat berat blog. Contoh dari Slide Out Notifikasi ini sendiri ada di Blog ini, tapi bedanya dengan yang saya postingkan dulu ini ber Background Putih Transparan.
Untuk lebih jelasnya sobat bisa Reload Page ini dengan Pencet Klik DEMO dibawah ini :
Setelah sobat sudah mengetahui secara detail, langsung saja kita buat widget ini dengan mudah.
- Log In ke Akun Blogger sobat.
- Masuk ke Menu Template
- Pilih Edit HTML
- Cari Kode ]]></b:skin>, Lalu Copy kode dibawah ini tepat diatas kode ]]></b:skin>
- Lalu Klik Simpan
/* Slide Out Notificatin by mas-bepe*/
#notif54 {
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;
}
#notif54 a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notif54 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;}
}
/* Don't Change This Visit Here esbepe-sbp.blogspot.com to Update Tutorials*/
- Lalu Cari Lagi, tag <body> , Copy Kode dibawah ini tepat dibawah Tag <body>
- Jangan Lupa, Sobat bebas bisa Edit Tulisan dibawah ini. Setelah selesai Klik Simpan
<div id='notif54'>
<span>
<h2><b>Notifikasi</b>
<p>Selamat Hari Raya Idul Fitri 1434 H</p>
<p>Minal Aidin Wal Faidzin, Mohon Maaf Lahir dan Batin</p>
<p>terima kasih sudah berkunjung...</p>
</h2>
</span>
</div>
- Silahkan Sobat bisa langsung Cek deh, Blog agan.
Nah sekian, Slide Out Notifikasi diatas Background Putih, Nanti saya akana Posting dengan Backgroud lebih keren lebih tepatnya seperti blog ini. yakni Bakground The Dark
Bila kurang jelas, silahkan sobat bisa langsung berkomentar. Terima Kasih
Cara Membuat Slide Out Notifikasi Melayang di Blog
Terimakasih telah membaca artikel
Cara Membuat Slide Out Notifikasi Melayang di Blog. Dan bila sobat ingin membantu saya, sobat bisa mengeklik salah satu iklan diatas ^_^. Sobat bisa bookmark halaman ini dengan URL https://esbepe-sbp.blogspot.com/2013/08/cara-membuat-slide-out-notifikasi-melayang-di-Blog.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.