Semi Transparent Notification

Posted by : jack :) 5/11/13

#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;} }

Copy the code.

Open Blogger>Template>Edit HTML.

And paste the code just before ]]>.

<div id='notifjo'> <span> <h2> <b>Notifikasi :</b> <p> 1. Text Kamu.</p> <p> 2. Naruto shippuden tamat.</p> <p> 3. Gintama ceritanya mulai ngawur xD.</p> <p> 4. Hello world.</p> </h2> </span> </div> This will be what your notification show.
Copy the code.
And paste at <body>.

<div style="text-align: center;"> <textarea>#notifjo { ... ... right: 10px; /* posisi di paling kanan */ top: 10px; /* posisi di paling atas */ ... ... } You may change the position of the notification box by edit the value at the CSS.

NexTech

Next Generation Of Technology Is Taking Over.

Semi Transparent Notification

Followers

Translate To

Popular Post

Labels