Tweet
#btchello_bar{
background:#CC3300;
width:100%;
margin:0px auto 0px auto;
text-align:center;
padding:5px 0;
box-shadow: #666666 0px 1px 3px;
z-index: 9998;
height: 22px;
position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
text-decoration:none;
color:#fff;
font-size:15px;
font-weight:none;
font-family: verdana;
line-height: 24px;
border-top:0px solid #000;
border-bottom:0px solid #000;
}
#btchello_bar a{
text-decoration:none;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
font-family: Cambria;
line-height: 24px;
}
#btchello_bar a:hover{
text-decoration:none;
}
#btchello_bar p {margin:0; list-style:none;}
#btchello_bar img {vertical-align: middle;
margin-right: 6px;}
Now copy the following HTML code and paste it right after the <body> tag.
<div id='btchello_bar'>
Join Blog Engage Affiliate Program and earn 25% commission
<button onClick='window.location='https://www.affiliatelights.com//idevaffiliate.php?id=622_2_1_45'' style='width:50; height:15;'>Join Now</button>
</div>
Hello Bar is a great little toolbar which floats on the top of the website. It helps in engaging more users in your blog or website. Using hellobar.com it is fairly easy to create a hellobar for your site. They will provide you with a code you will have to paste the code in the <body> section of your site which is fairly easy for even beginners.
Unfortunately, the free version of the hello bar only allows 25 clicks. Beyond that you have to pay money to avail it's services. The most cheapest one comes with 100 clicks priced at $4.95/month. But if you pay $29 then you can use the hello bar in unlimited sites forever. It's a one time payment. Again it costs money (which I don't have at the moment).
So to relieve myself of the disappointment the other day I was experimenting with HTML & CSS to see if I can actually create a hello bar of my own. To my surprise I was able to create one which looks just like the original one. Here's a demo.
On the left is Ian Eberle's omegaweb.com which features the original Hello Bar and on the right is my site which features the hello bar I created.
Pretty cool !!! Huh ???
At first glance, you wouldn't be able to tell the difference. Sure it does not have the automatic feed update features or the statistics display feature. But it's free to use and it looks exactly the original. It is good for those who doesn't have the money to buy it.
Now onto the main point, the coding. Before doing anything, save a copy of your template.
To use this widget on your site copy this css code and paste it right before ]]></b:skin>
Just replace the text and link with your own choice of links and text. Then preview your blog to see whether the widget is working properly. Then save your template.
If you like this article then please share it. You can also shoot the comment section to provide your views regarding this widget.
