Cara Membuat Widget Sticky Bar Pada Blog

Sticky Bar adalah salah satu widget yang berisi text atau pengumuman yang ditunjukan pada pengunjung blog melaluli widget ini.

Sticky Bar ini sama fungsi dengan panel name, yang sebelumnya saya bahas. Sticky Bar ini memang sudah ada web penyedia layanan widget ini, yaitu Hellobar, melainkan membuatnya di Hellobar anda perlu mendaftarkannya terlebih dahulu, meikuti langkah demi langkah, dan mengeditnya pada panel pengaturan dan tentu lebih sulit lagi untuk menginstalnya.

Beda Dengan  Sticky Bar berikut anda hanya perlu menyalin kode-kode, dan mengedit informasi hanya perlu mengedit htmlnya saja tanpa harus menggunakan panel pengaturan. Widget ini dilengkapi dengan fitur tutup sehingga tidak mengganggu pengunjung. Berikut Dibawah adalah cara untuk memasangnya.

• Silahkan Masuk Ke Blogger Anda.
• Setelah itu, Klik Menu Tata Letak,--> Klik Tambahkan Widget, --> Tambahkan Widget HTML.
• Masukan Kode Berikut ini :

<style>

/*---Sticky Bar YBB Start---*/

#YBB-stickybar {

width:100%;

height:200px;

position:fixed;

top:0;

left:0;
z-index:100;

}

#YBB-stickybtm {

border-bottom:3px solid #BFBFBF;

background-color:#474244;

overflow:none;

width:100%;

height:30px;

position:fixed;

top:0;

left:0;

}

#YBB-stickybarbtmdata {

color:#fff;

padding:5px;

}

#YBB-stickybarbtmhide {

position:absolute;

top:4px;

right:12px;

width:20px;

height:20px;

cursor:pointer;

}

#YBB-stickybarbtmshow {

position:absolute;

top:0;

right:5px;

width:30px;

height:25px;

cursor:pointer;

background-color:#474244;

padding-top:5px;

border-bottom:3px solid #BFBFBF;

border-left:3px solid #BFBFBF;

border-right:3px solid #BFBFBF;

border-bottom-right-radius:5px;

border-bottom-left-radius:5px;

}

.YBB-stickybarbtmdownarrow {

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-top:10px solid #BFBFBF;

}

.YBB-stickybarbtmblock {

width:8px;

height:10px;

background-color:#BFBFBF;

}

.YBB-stickybarbtmuparrow {

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-bottom:10px solid #BFBFBF;

}

</style>

<div id="YBB-stickybar" >

<center id="YBB-stickybarbtmshow" onmouseup="document.getElementById('YBB-stickybtm').style.display='block'"><div class="YBB-stickybarbtmblock"></div><div class="YBB-stickybarbtmdownarrow"></div></center>

<div id="YBB-stickybtm" >

<center id="YBB-stickybarbtmhide" onmouseup="document.getElementById('YBB-stickybtm').style.display='none'"><div class="YBB-stickybarbtmuparrow"></div><div class="YBB-stickybarbtmblock"></div></center>

<center id="YBB-stickybarbtmdata"><b>Deskripsi Informasi Anda</b> <a href="URL Blog Anda">Nama Blog Anda</a></center>

</div>

</div>

Keterangan:

1. Ganti Kode Yang Berwarna Merah dengan deskripsi informasi anda.
2. Ganti Kode Yang Berwarna Kuning dengan URL Blog Anda.
3. Ganti Kode Yang Berwarna Hijau dengan nama Blog anda.

• Setelah itu, Klik Tombol Simpan.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG