Add Delayed Messages Used CSS3

Dalam rangka improve skills CSS meningkatkan kemampuan bahasa CSS, Koben akan berbagi trik cara memasang delayed message with CSS3. Pemberitahuan pesan berupa kata² singkat kepada para pengungjung site, dan biasanya terletak di atas. Dengan jQuery dulu pernah di postingkan Message Welcome Like Notification. Mirip dengan itu tetapi sekarang hanya memakai atribut CSS3! Versi online sobat bisa dapatkan gadget hello bar widget for blogger. Tidak suka dengan script hello-bar, versi CSS juga ada pure css notification bar using :target pseudo class.
Gue tidak akan menrangkan dimana kode CSS itu diletakan, dan markup HTML dimasukan ke dalam template kalian! Tidak mengerti, baca di sini Tag <b:section> And <b:skin> Template Blogspot.

Buka halaman berikut HTML Editor kemudian masukan seluruh bumbu pada kotak sebelah kiri dilanjutkan dengan memencet tombol preview.

/* KODE CSS */

<style>
body {background:#debe94}
#slide-top{
 top: 0;
 left: 0;
 padding: 0;
 width: 100%;
 height: 30px;
 line-height: 24px;
 font-size: 15px;
 background: #fff;
 text-align: center;
 z-index: 9999;
 position: fixed;
 border-bottom: 1px dashed #FF0000;
 box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
 -webkit-animation: slideout 0.7s ease-in-out 0.3s backwards;
 -moz-animation: slideout 0.7s ease-in-out 0.3s backwards;
 -o-animation: slideout 0.7s ease-in-out 0.3s backwards;
 -ms-animation: slideout 0.7s ease-in-out 0.3s backwards;
 animation: slideout 0.7s ease-in-out 0.3s backwards;
}
@-webkit-keyframes slideout{
 0%{top: -30px; opacity: 0;}
 100%{top :0px; opacity: 1;}
}
@-moz-keyframes slideout{
 0%{top: -30px; opacity: 0;}
 100%{top: 0px; opacity: 1;}
}
@-o-keyframes slideout{
 0%{top: -30px; opacity: 0;}
 100%{top: 0px; opacity: 1;}
}
@-ms-keyframes slideout{
 0%{top: -30px; opacity: 0;}
 100%{top: 0px; opacity: 1;}
}
@keyframes slideout{
 0%{top: -30px; opacity: 0;}
 100%{top: 0px; opacity: 1;}
}
</style>

/* MARKUP HTML */

<div id="slide-top">

Hello you are watching a delayed message <b>PRETTT!!!</b>
<a onclick="javascript:var st=document.getElementById('slide-top');st.style.display = (st.style.display =='none') ? 'block' : 'none';" style="float: right;margin-right: 10px;cursor: pointer">X</a>

</div>

KODE INI JANGAN DIPAKAI body {background:#debe94} CUMAN UNTUK DEMO
Good luck :)

Reslurce by: https://developer.mozilla.org/media/uploads/demos/a/n/anushbmx/533d6bb7971c50e920c6ed8f002ee891/delayed-message-with_1341295654_demo_package/index.html