Sticky Bar Cantik Untuk Blogger

Posted by : Deni Icksan Kamis, 25 September 2014

Sticky Bar mulai tenar di kalangan Webmaster atau blogger semenjak munculnya Hello Bar. Hello Bar bisa didapatkan oleh pemilik blog secara gratis dengan melalui proses registrasi di salah satu website yang mengeluarkan menu bar tersebut. Sekarang, untuk mendapatkan menu bar seindah Hello Bar, pemilik web blog tidak perlu melakukan proses registrasi yang berbelit-belit karena saya sudah menyediakan beberapa baris kode CSS dan HTML yang bisa membentuk sebuah Sticky Bar yang cantik dan keren. Sticky Bar ini memiliki warna Orange dan Hitam plus teks warna putih.

Seperti Sticky Bar pada umumnya, Sticky Bar ini pun memiliki sebuah panah yang berfungsi untuk membuka dan menutup menu bar ini (Fitur Hide and Show). Apa kelebihan Sticky Bar ini dengan Sticky Bar yang lain? Sobat blogger tidak perlu Edit Template untuk memasang Sticky Bar ini dan sobat blogger bisa melakukan kostumisasi menu bar ini sesuai dengan yang diinginkan.

Cara Memasang Sticky Bar di Blog

Masuk ke blogger.com menggunakan akun blogger sobat
Pada menu Drop Down, pilih tata letak.
Klik "Tambahkan gadget"
Lalu pilih HTML/JavaScript
Copy Paste kode berikut pada kolom yang tersedia

<style>
/*---Codes by www.tutorialblogspot.com---*/
#wg-rosebar {
width:100%;
height:100px;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtm {
border-bottom:3px solid #000;
background-color:#F60;
overflow:none;
width:100%;
height:30px;
position:fixed;
top:0;
left:0;
}
#wg-rosebarbtmdata {
color:#fff;
padding:5px;
}
#wg-rosebarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}
#wg-rosebarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#F60;
padding-top:5px;
border-bottom:3px solid #000;
border-left:3px solid #000;
border-right:3px solid #000;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
.wg-rosebarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #CC5200;
}
.wg-rosebarbtmblock {
width:8px;
height:10px;
background-color:#CC5200;
}
.wg-rosebarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #CC5200;
}
</style>
<div id="wg-rosebar" >
<center id="wg-rosebarbtmshow" onmouseup="document.getElementById('wg-rosebarbtm').style.display='block'"><div class="wg-rosebarbtmblock"></div><div class="wg-rosebarbtmdownarrow"></div></center>
<div id="wg-rosebarbtm" >
<center id="wg-rosebarbtmhide" onmouseup="document.getElementById('wg-rosebarbtm').style.display='none'"><div class="wg-rosebarbtmuparrow"></div><div class="wg-rosebarbtmblock"></div></center>
<center id="wg-rosebarbtmdata"><a href="http://www.tutorialblogspot.com">Teks Yang Tampil</a></center>
</div>
</div>