Cara Membuat Widget Sticky Bar Pada Blog

Cara Membuat Widget Sticky Bar Pada Blog

Home » Tutorial Blogger » Cara Membuat Widget Sticky Bar Pada Blog

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

"Perhatian: Dulu blog Berilah adalah Andaviar, jadi maklumi jika ada kata andaviar disetiap post"

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, mengikuti 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:

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

Setelah itu, Klik Tombol Simpan.

Selesai, Semoga bermanfaat dan semoga berhasil.

Ditulis oleh: Anonymous Pada : Saturday, January 25, 2014

Label : Tutorial Blogger