Hello bar is a popular notification bar which is available as premium bar and also with attribution link to their website. The problem with this bar is it costs money. One of the free alternative to the hello bar is the woah bar which is developed by jobdeals. It can be implemented on blogger. Here it is how.

WOAH bar alternative of hello bar
WOAH bar – the perfect alternative of Hello bar

The demo can be viewed here now.
The WOAH bar can be used with blogger with small modifications. This is a clone of the hello bar and an excellent notification bar. This bar can be hidden by clicking on the up arrow and it will be reappeared when clicking on the down arrow. This bar can be used to notify your important announcements and to alert the readers about your most popular posts on your blog. You have to include these links manually. Implementation of the bar quite simple. Please follow below steps.

This is a template Edit hack, so please back up your template before adding this widget.

First login to your Blogger and then take Template
Click on the Edit HTML
Find the </head> and the following lines of code just above it. If you already have any of these two lines, please skip that line.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' type='text/javascript'/>

Just below the above added code, add following code.

<script>
<!-- START WOAHbar FOR DESKTOP-- bloggerhow.com  -->
var stub_showing = false;
function woahbar_show() {if(stub_showing) {$('.woahbar-stub').slideUp('fast', function() { $('.woahbar').show('bounce', { times:3, distance:15 }, 300);            $('body').animate({"marginTop": "32px"}, 300);});}
 else {$('.woahbar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}}
 function woahbar_hide() {$('.woahbar').slideUp('fast', function() {$('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100);stub_showing = true;      });
 if( $(window).width() > 1024 ) {$('body').animate({"marginTop": "0px"}, 250);}}
 $().ready(function() {window.setTimeout(function() {woahbar_show();}, 0);});
<!-- END WOAHbar FOR DESKTOP - START WOAHbar FOR MOBILE  -->
var mstub_showing = false; 
function mwoahbar_show() {if(mstub_showing) {$('.mwoahbar-stub').slideUp('fast', function() {$('.mwoahbar').show('bounce', { times:3, distance:15 }, 300);$('body').animate({"marginTop": "32px"}, 300);});}
else {$('.mwoahbar').show('bounce', { times:3, distance:15 }, 500);          $('body').animate({"marginTop": "32px"}, 250);}}
function mwoahbar_hide() {$('.mwoahbar').slideUp('fast', function() {          $('.mwoahbar-stub').show('bounce', { times:3, distance:15 }, 100);        mstub_showing = true; });
 if( $(window).width() > 1024 ) { $('body').animate({"marginTop": "0px"}, 250);}}
 $().ready(function() { window.setTimeout(function() {mwoahbar_show(); }, 0); });
</script>

Now find ]]></b:skin> in your template and add following code just above to it.

.woahbar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 24px;  /* << set custom WOAHbar height */
z-index: 100;   /* << DO NOT EDIT, KEEPS WOAHbar ON TOP OF PAGE CONTENT */
padding: 15px 0 5px 0;
text-align: center;
font-size: 16px;  /* << set custom WOAHbar font size */
color: #1c1c1c;  /* << set custom WOAHbar font color */
background-color: #ffff00;  /* << set custom bar color here */
border-bottom: 2px solid #000;  /* << set custom bottom border thickness & color here */
-webkit-box-shadow: 0 8px 6px -6px #333;  /* << set custom css box shadow */
-moz-box-shadow: 0 8px 6px -6px #333;  /* << set custom css box shadow */
box-shadow: 0 8px 6px -6px #333;   /* << set custom css box shadow */
}
.woahbar-stub {
position: fixed;
top: -10px;
left: 0px;
width: 100%;
height: 19px;
z-index: 200;
padding: 7px 0 5px 0;
text-align: center;
}
.woahbar span {
float: left;
width: 95%;
text-align: center;
padding-top: 2px;
}
.show-notify {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgb(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgb(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgb(0,0,0,0.35);
float: right;
margin-right: 10px;
color: #fff;
width: 35px;
height: 33px;
text-decoration: none;
background-color: #eee; /* << set custom bar color here */
cursor:pointer;
}
.show-notify:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgb(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgb(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgb(0,0,0,0.35);
float: right;
margin-right: 10px;
color: #fff;
width: 35px;
height: 33px;
text-decoration: none;
background-color: #ffff00; /* << set custom bar color here */
cursor:pointer;
}
.woahbar-up-arrow:hover {
background: url(https://lh5.googleusercontent.com/-MZwwgfKDUnk/UPLGLnS4ZpI/AAAAAAAABV4/zQDfSXQbPaI/s800/woahbar-up-arrow-hover.png);
}
.close-notify {
float: right;
margin-top:3px;
margin-right: 22px;
color: #fff;
width: 17px;
height: 19px;
text-decoration: none;
background-color: #ffff00; /* << set custom bar color here */
cursor:pointer;
}
.woahbar-link {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #d72444; /* Old browsers */
color: white;
padding: 1px 8px 3px 8px;
}
.woahbar-link:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #1c1c1c; /* Old browsers */
color: white;
padding: 1px 8px 3px 8px;
text-decoration: none;
}

The background color, text color and everything can be customized. Please see the comments which is in the above code and edit accordingly (The texts in between /* and */ are comments). You can use any color gradient finding tool (search Google).
Now find </body> and add following lines just below. This is the part you are going to display in your blog. Please edit the text in CAPITAL letters.

<div class="woahbar" style="display: none;"><span style="font-family: 'Arial, Helvetica, sans-serif;">PUT YOUR WOAHbar MESSAGE OR CALL TO ACTION HERE &nbsp;&nbsp;<a class="woahbar-link" href="#">BUTTON TEXT</a> </span> <a class="close-notify" onclick="woahbar_hide();"><img class="woahbar-up-arrow" src="https://lh5.googleusercontent.com/-MZwwgfKDUnk/UPLGLnS4ZpI/AAAAAAAABV4/zQDfSXQbPaI/s800/woahbar-up-arrow-hover.png" /></a></div>
<div class="woahbar-stub" style="display: none;"><a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="https://lh5.googleusercontent.com/-fmyDS-Ew66I/UPLGLj9McpI/AAAAAAAABV8/w3shb3kDVmU/s800/woahbar-down-arrow.png" /></a></div>

Now save the template and check the WOAH bar.. Feel free to ask any doubts regarding this implementation in comments.
Please download these three images and upload to any image hosts like picasa. If I delete these images in future, that will cause a problem. woahbar-up-arrow-hover.png, woahbar-up-arrow.png and woahbar-down-arrow.png.
Don’t forget to replace the image link with your picasa link.


Share this article