Hello Sobat, saya mau berbagi trik Cara Membuat Notifikasi Sederhana Menggunakan CSS3, simak baik baik ya
Langsung saja simak.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.
Screenshot
CSS
Buka blogger => template => Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>
#woro {
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,102,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;
}
#woro a {
display:block;
text-decoration:none;}
#woro span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#woro 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;}
}
HTML
Sedangkan untuk Kode Html ini diletakan dibawah kode <body>
*jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada.
kemungkinan template body anda menggunakan class,misal <body class='home blog'>
<div id='woro'>
<span>
<h2><b>Notifikasi :</b>
<p>Selamat Datang Di Blog Saya.</p>
<p>Nama : Rukmandani</p>
<p>Status : Pelajar.</p>
</h2>
</span>
</div>
Untuk menambah baris notif baru,tambahkan:
<p>text kamu</p>
di antara:
<h2> .... </h2>
1. Pengaturan posisi notifikasi.
Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.
Posisi top:10px dan right:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)
#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}
Contoh :
Atas,kanan.
right: 10px;
top: 10px;
Bawah,kanan.
right: 10px;
bottom: 10px;
Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.
top:atas
bottom:bawah
right:kanan
left:kiri
Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)
Jika notofikasi ini ingin tampil di halam utama saja maka script di taruh di bawah
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Sekian dari saya dan terimakasih sudah berkunjung di blog saya
Sumber : klik
