15 Add Css Sticky Floating Bar On Blogger

Hello Friends Today I Am Gonna Show You How To Add Sticky Floating Bar On Blogger With Open Hide Functions.So Follow My Steps........................................


Open Your Blogger Account

Click On Layout

Click On Add Gadget And Select HTML/JAVASCRIPT

Now Paste The Below Code Into HTML/JAVASCRIPT

<style>
/*---Sticky Bar Codes by www.showmedreams.blogspot.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://showmedreams.blogspot.com/2013/06/download-web-seeker.html"><span style="color:#6cc;font-size:20px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Download Web Seeker</span></a><b></b></center>

Note :

Change Download Web Seeker With Your Name

Change http://showmedreams.blogspot.com/2013/06/download-web-seeker-html With Your Link

Now Save Your HTML/JAVASCRIPT

Now Check Your Blog

Yipeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.................................................

Please Leave Your Question And Comment Below.................................