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;
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.
Selamat Mencoba,
Salam Sukses,
Your-BelajarBLOG
bagaimana cara buat kotak hitam yang ada di bawah blog km bro yg berisi follower, random post dan profile sm copyright,trimakasih. bt blog ane, tlg dibls di email ya, masmoeis@gmail.com, trims
ReplyDeleteTHANKS WAT WIDGAED STIKINYA BRO KEREN...
ReplyDeleteOk Sip,
DeleteMakasih..,
Salam Sukses,
Your-BelajarBLOG
Tq banget gan, di Blog saya sudah berhasil....
ReplyDeletesalam sukses.... :v
OK Sip,
DeleteSalam Sukses,
Your-BelajarBLOG
Untuk Sticky Bar Agar Dibawah Silahkan Masukan Kode Berikut ini:
ReplyDelete<style>
#YBB-stickybar {
width:100%;
height:200px;
position:fixed;
bottom:0;
left:0;
z-index:100;
}
#YBB-stickybtm {
border-top:3px solid #BFBFBF;
background-color:#474244;
overflow:none;
width:100%;
height:30px;
position:fixed;
bottom:0;
left:0;
}
#YBB-stickybarbtmdata {
color:#fff;
padding:5px;
}
#YBB-stickybarbtmhide {
position:absolute;
bottom:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}
#YBB-stickybarbtmshow {
position:absolute;
bottom:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#474244;
padding-top:5px;
border-top:3px solid #BFBFBF;
border-left:3px solid #BFBFBF;
border-right:3px solid #BFBFBF;
border-top-right-radius:5px;
border-top-left-radius:5px;
}
.YBB-stickybarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom: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-top:10px solid #BFBFBF;
}
</style>
<div id="YBB-stickybar" >
<center id="YBB-stickybarbtmshow" onmouseup="document.getElementById('YBB-stickybtm').style.display='block'"><div class="YBB-stickybarbtmdownarrow"></div><div class="YBB-stickybarbtmblock"></div></center>
<div id="YBB-stickybtm" >
<center id="YBB-stickybarbtmhide" onmouseup="document.getElementById('YBB-stickybtm').style.display='none'"><div class="YBB-stickybarbtmblock"></div><div class="YBB-stickybarbtmuparrow"></div></center>
<center id="YBB-stickybarbtmdata"><b>Deskripsi Informasi Anda</b> <a href="URL Blog Anda">Nama Blog Anda</a></center>
</div>
</div>
Selamat Mencoba,
Salam Sukses,
Your-BelajarBLOG
Nice share bro, jadi pengen banyak belajar ni..
ReplyDeletejangan lupa mampir ke blog saya ya semua. masih newbie ni butuh banyak pencerahan. thanks
click here : http://punya-andi.blogspot.com/
thank gan infonya salam kenal kampungjasa[dot]com
ReplyDeletemakasi gan, sngt brmanfaat buat yang suka ngedit" blog,:)
ReplyDeletekunjungannya gan : http://bisnisonlinestiforp99.blogspot.com/
Wah bermanfaat ini gan.Semoga sukses selalu
ReplyDeletemakash gan
ReplyDeleteThis comment has been removed by the author.
ReplyDeletegan, klw stick bar nya bergerak bagaimana? thanks
ReplyDelete