Make Sticky Bar in Blogger Like as Hello Bar

Lagi-lagi mereview tutorial lawas! Sobat-sabit masih ingat dengan widget hello bar. Salah satu cara mempromosikan konten blog dengan style sticky bar Sebagai bloglang berlanglangbuana ke blogger luar nagrek :D Sekarang mari kita buat sticky bar mirip banget dengan yang ada di hello bar. Karena trik ini murni memakai atribut CSS, maka efek serelek jebret hilang (kagak bisa buat jujurnya mah) :D
Tetapi jika ingin yang ada efeknya sobat bisa mencoba di postingan pure css notification bar using :target pseudo-classCSS Code Roseic Sticky Bar

#bb-hellobar {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 99;
font-weight: normal;
font-size: 15px;
font-family: Georgia,Times New Roman,Times,serif;
}
#bb-hellobar_btm {
border-bottom: 3px solid #fff;
background: #EB593C;
overflow: none;
width: 100%;
height: 30px;
position: fixed;
top: 0;
left: 0;
box-shadow: 0 2px 3px #999;
}
#bb-hellobar_data {
color: #fff;
padding: 5px;
}
#bb-hellobar_hide {
position: absolute;
top: 4px;
right: 12px;
width: 20px;
height: 20px;
cursor: pointer;
}
#bb-hellobar_show {
position: absolute;
top: 0;
right: 10px;
width: 35px;
height: 27px;
cursor: pointer;
background: #EB593C;
padding-top: 5px;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-radius: 0 5px 5px 5px;
}
.bb-hellobar_downarrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #CC4D34;
}
#bb-hellobar_show:hover {
background: #FF7F62;
}
.bb-hellobar_block {
width: 8px;
height: 10px;
background-color: #CC4D34;
}
.bb-hellobar_uparrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #CC4D34;
}
#bb-hellobar-logo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUDiLrsZQ6FalqCh1aTcoPnQ5WJ2_pLVSZwBrkCV6-YIbFTsG0c7-j13zWVA6ZyzXU1t26syN3W_hJuZNsW-SN0WePVMqDjASfEDDh8v8H2eAzxLonarncnjeB6ULLoRvkD1RZMRMU9cNh/s35/hello-bar.png);
position: absolute;
height: 34px;
width: 34px;
left: 3px;
top: -2px;
}

Markup HTML

<div id="bb-hellobar">
<center id="bb-hellobar_show" onmouseup="document.getElementById('bb-hellobar_btm').style.display='block'"><div class="bb-hellobar_block"></div><div class="bb-hellobar_downarrow"></div></center>
<div id="bb-hellobar_btm">
<center id="bb-hellobar_hide" onmouseup="document.getElementById('bb-hellobar_btm').style.display='none'"><div class="bb-hellobar_uparrow"></div><div class="bb-hellobar_block"></div></center>
<center id="bb-hellobar_data"> --- BLAH BLEH BLOH HERE --- </center>
<div id="bb-hellobar-logo"></div>
</div>
</div>

Ini juga bagus kok bos delayed messages :D Happy blogging \m/
Resource by: widgetgenerators.blogspot.com/2012/12/add-roseic-sticky-bar-in-blogger-same.html