Add a Roseic Sticky Bar in Blogger (Same Like as Hello Bar)

As we all know that Hello bar is a professional sticky bar which we always use to show that notifications and other important updates to the visitors but when we want to add hello bar in blogger or in website then we have to register first, then we have to follow some steps which is not simple for newbie. When I made a hello bar, I faced many problems to install it, but in this sticky bar you just have to copy and paste the codes. I give it a new name Roseic Sticky Bar

Live Demo

Features

• 99.99% Same as Premium HelloBar.
• Easy to Install.
• Close and Hide Function is also available.
• Drive More Attention To Your Most Important Text/Link With This Roseic Sticky Bar.
• Only CSS, Not A Single JQuery-JavaScript-Image.
• It will float all over the blog/site page/post.
• It's 100% Free.
• Not a single image even arrows are CSS designed.
• Quick, Quick, Quick to Load.
• You can add any type of Date Like Text, Social Button Scripts, Links To Increase Clicks.

Add a Roseic Sticky Bar in Blogger

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<style>
/*---Codes by www.widgetgenerators.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://www.widgetgenerators.blogspot.com">Widget Generators</a><b>Write Your Text Here</b></center>
</div>
</div>

• Save Your Widget and You are done.

 Make Changes....!

• Replace Write Your Text Here from your text.

• If you want to add link in it then follow below steps.

• You can add links by copy below code.

<a href="http://www.widgetgenerators.blogspot.com">Widget Generators</a>

• Replace Red color area with link.
• Replace Green color area with link text.

© CopyRight:

The "HelloBar" is he CopyRight of www.hellobar.com And "Roseic Sticky Bar" is the DMCA CopyRight Of www.widgetgenerators.blogspot.com. We did not have and relationship with them and They also has Nothing With Us.

If Any Problem Comes, Ask in Comments