Hai , Blogger gue gak sempet posting kemaren karena gue sibuk hihi ni ada waktu posting gue ambil lah kesempatan ini untuk posting, Nah gak usah lama2 , kali inisaya akan berbagi Notifikasi keren buat blog kamu2 semua dengan CSS3 nah , ada yg tau apa itu Notifikasi di Blog nah lihat ini :
Contohnya yg ada di Sudut atas kanan gambar diatas !
NIH CARANYA :
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;}
}
Lalu cari kode <body> jika tidak ada cari kode ini <body class='home blog'>
<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Kamu.</p>
<p>2. Trik dan tips android.</p>
<p>3. Download PC games.</p>
<p>4. HAY TEMAN.</p>
</h2>
</span>
</div>
Untuk menambah baris Notifikasi baru tambahkan kode dibawah ini
<p>text kamu</p>
di antara:
<h2> .... </h2>
Jika kalian ingin merubah posisi Notifikasi lihat dibawah :
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)
CONTOH :
Atas,kanan.
right: 10px;
top: 10px;
right: 10px;
top: 10px;
Posisi seterusnya copas salah satu kode dibawah :
top:atas
bottom:bawah
right:kanan
left:kiri
OKE SELAMAT MENCOBA
Berkomentarlah dengan bijak NO SARA !!
Blogger yang baik selalu meninggalkan jejak & Jika Anda Punya Pertanyaan, Silahkan Anda Bertanya Di Kolom Komentar , Jika Ada Broken Link, Silahkan Anda Beritahu Kami Lewat Kolom Komentar ^_^