Post Game: Cara Membuat Notifikasi Sederhana Dengan CSS3

Wednesday, November 23, 2016

Cara Membuat Notifikasi Sederhana Dengan CSS3

Halo pengunjung blog hexhozord , apa kabarnya nih ? masih pada puasakan haha jangan batal ya kan masih hari kedua. Kali ini admin ingin share tutorial blogging nih gan yaitu Cara Membuat Notifikasi Sederhana Dengan CSS3.

Bisa agan lihat di screenshot yang di kasih panahnya gan. Semoga tutorial ini bisa bermanfaat untuk kita semua ya gan. Silahkan buka blogger ~>template ~> edit html dan ikuti tutorialnya dibawah ini gan

1. Cari kode </b:skin> dengan menekan ctrl + f

2. Sekarang copy script css dibawah ini dan paste diatas kode </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;}
}

3. Setelah itu cari kode <body> atau <body dan copas script HTML dibawah ini

<div id=notifjo>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Hexhozord</p>
<p>2. Text Hexhozord.blogspot</p>
<p>3. Text Hexhozord.blogspot.com</p>
<p>4. Text Hexho-zord.blogspot.com.</p>
</h2>
</span>
</div>

4. Sekarang tinggal agan ganti teks yang berwarna hijau itu dengan teks agan
5. Silahkan edit CSS nya sendiri ya gan kalau mau terlihat beda

Edit CSS Memerlukan ketelitian dan keahlian gan jadi kalau agan merasa tidak mengerti jangan coba - coba mengeditnya karena bisa fatal akibatnya.

Sekarang agan cek blognya , nah udh munculkan notifnya. Bagaimana simple bukan ? nah silahkan terapkan diblog agan sendiri yaa. Semoga bermanfaat terimakasih. Tutorial ini dibuat oleh DJogz admin hanya share kembali.

Go to link Download