Haloo kali ini saya akan membagikan artikel notifasi sederhana dengan CSS
Langsung saja
Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>
#notifjo {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;}#notifjo a {display:block;text-decoration:none;}#notifjo span {display: block;padding: 15px 15px;pointer-events: none;text-align: left;float: left;}#notifjo span h2 {font-size: 12px; /* Ukuran text */line-height: 21px;color: #222; /* Warna text */font-weight: normal;letter-spacing: 0px;}/* Blog johanes djogzs.blogspot.com */@-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
Selanjutnya Letakkan Code Di bawah Ini tepat di Bawah Coed <body>
Jika Code <body> tdk ketemu coba code ini <body class='home blog'>
<div id='notifjo'><span><h2><b>Notifikasi :</b> <p>1. Text Kamu.</p><p>2. Asmadi Manteman Jr.</p><p>3. Add facebook gw yaa xD.</p><p>4. Hello world.</p></h2></span></div>
Setting
Untuk menambah baris notif baru,tambahkan:
<p>text kamu</p>
di antara:
<h2> .... </h2>
PENGATURAN POSISI NOTIFASI.
Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.
Posisi top: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 */
...
...
}
Oke sekian Dulu kawan :D Semoga bermanfaat Untuk kalian semua yg telah membaca Ini dari atas sampai bawah :D