membuat Sticky Notification Bar diblog

Sticky Notification Bar juga sangat penting dipasang pada suatu situs atau blog. Ini bermanfaat untuk menempatkan link atau menulis pesan penting kepada pengunjung. Notification bar ini bisa anda letakkan dibagian head atau footer di blog dan disertai close button (tombol penutupnya) sehingga tidak mengganggu pengunjung ketika berkunjung di blog anda. Hal ini juga membantu dalam meningkatkan tampilan halaman blog.

Sticky Notification Bar mempunyai beberapa fitur keren yang bisa anda coba, mungkin anda sering melihat di beberapa web atau blog besar juga terdapat pesan text di header atau footernya.
Widget ini tidak memiliki konten flash atau gambar yang berat sehingga tidak akan membuat halaman anda menjadi lambat.

Fitur ini meliputi :
Tombol tutup inbuilt untuk menyembunyikan bar.
CSS ringan dan kode JavaScript kecil.
Mudah disesuaikan sesuai dengan desain blog Anda.

Untuk Demonya bisa anda lihat disini

Cara membuat Sticky Notification Bar diblog.

1. Masuk ke Blogger.com
2. Klik Tata Letak => Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy kode dibawah ini :

<style>
#wcsticky-container {
  height:46px;
  width:100%;
 position:fixed;
z-index:9999999;
  top: 0px;
left:0px;
 background:#222222;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
color:#ffffff;
 border-bottom:solid 2px green;
-moz-box-shadow:5px 5px 5px #333333;
-web-kit-box-shadow: 5px 5px 5px #333333;
-goog-ms-box-shadow: 5px 5px 5px #333333;
box-shadow:3px 2px 4px green;
}

#wc-stickylinks
{
color:orange;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#wc-stickylinks a
{
font:14px georgia, verdana;
color:#ffffff;
text-decoration:none;
}
#wcstickyclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#wcstickyclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:red;
border-radius:10px;
}
#wcsticky-main
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("wcsticky-container").style.visibility = "hidden";
}

</script>

<div id='wcsticky-container'>
<div id="wcsticky-main">
<p id='wc-stickylinks'> Popular Topics:<a href='Link Text here'>  Notification 1</a> | <a href='Link Text here'>Notification 2</a></p>
</div>
<div id="wcstickyclose">
<a href="javascript:closesticky();" >X</a>
</div></div>

• Note : Ganti teks berwarna merah sesuai keinginan sobat

           Ganti Top (bagian atas) menjadi bottom jika ingin meletakkan dibagian bawah, lalu sesuai kan jarak yang anda inginkan pada bagian 0px.
float:right tombol close bagian kanan ganti left jika ingin meletakkan disebelah kiri.

5. SIMPAN dan lihat hasilnya.