Cara Membuat Notifikasi Keren Melayang di Blog V2
>
Assalamualaikum Wr Wb
Cara Membuat Notifikasi Keren Melayang di Blog V2 - Seperti yang telah saya sampaikan di Postingan sebelumnya yakni
Cara Membuat Slide Out Notifikasi Melayang di Blog, saya akan mempostingkan Slide Out Notifikasi dengan Background Dark seperti yang dipakai di blog ini.
Notifikasi ini cocok buat sobat yang ingin mengucapkan selamat idul fitri pada tahun ini, Secara otomatis ketika blog dimuat Notifikasi ini akan muncul dengan sendirinya,dan setelah waktu yang ditentukan habis akan hilang. Widget notifikasi ini cukup ringan, hampir tidak membuat blog berat. Di Tampilan Mobile sekalipun, Widget ini mampu bertahan dan bekerja normal.
Langsung saja sobat ikuti tutorial berikut ini:
- 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*/
#notificationbepe {
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(0,0,0,0.7); /* 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;
}
#notificationbepe a {
display:block;
text-decoration:none;}
#notificationbepe span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
color: #eee;
float: left;
}
#notificationbepe span 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;}
}
/* 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='notifbysatrio'>
<span>
<h2>Information</h2>
<p/>
<p>Seluruh Crew dan Keluarga Besar Tutorials And Software</p>
<p>Mengucapakan</p>
<p>Selamat Hari Raya Idul Fitri 1434 H,</p>
<p> Minal Aidin Wal Faidzin</p>
</span>
</div>
- Silahkan Sobat bisa langsung Cek deh, Blog agan.
Nah sekian, Slide Out Notifikasi Keren Melayang di Blog V2. Bila kuarang jelas bisa berkomentar, Terima Kasih.
Wassalamualaikum Wr Wb
Cara Membuat Notifikasi Keren Melayang di Blog V2
Terimakasih telah membaca artikel
Cara Membuat Notifikasi Keren Melayang di Blog V2. 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-notifikasi-keren-melayang-di-blog.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.