Woah Bar Option To Hey Notification Bar, Implementation On Blogger

Hello bar is a pop notification bar which is available every bit premium bar as well as also amongst attribution link to their website. The job amongst this bar is it costs money. One of the costless option to the howdy bar is the woah bar which is developed past times jobdeals. It tin grade the axe last implemented on blogger. Here it is how.

WOAH bar - the perfect option of Hello bar

The demo tin grade the axe last viewed hither now.
The WOAH bar tin grade the axe last used amongst blogger amongst small-scale modifications. This is a clone of the howdy bar as well as an first-class notification bar. This bar tin grade the axe last hidden past times clicking on the upwardly arrow as well as it volition last reappeared when clicking on the downward arrow. This bar tin grade the axe last used to notify your of import announcements as well as to alarm the readers almost your most pop posts on your blog. You get got to include these links manually. Implementation of the bar quite simple. Please follow below steps.

This is a template Edit hack, hence delight dorsum upwardly your template earlier adding this widget.

First login to your Blogger as well as and then accept Template
Click on the Edit HTML
Find the </head> as well as the next lines of code merely higher upwardly it. If y'all already get got whatever of these 2 lines, delight 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 higher upwardly added code, add together next code.

<script> <!-- START WOAHbar FOR DESKTOP-- bloggerhow.com  --> var stub_showing = false; component division 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);}}  component division 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;  component division 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);}} component division 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 detect ]]></b:skin> inwards your template as well as add together next code merely higher upwardly to it.

.woahbar { position: fixed; top: 0px; left: 0px; width: 100%; height: 24px;  /* << laid custom WOAHbar elevation */ z-index: 100;   /* << DO NOT EDIT, KEEPS WOAHbar ON TOP OF PAGE CONTENT */ padding: 15px 0 5px 0; text-align: center; font-size: 16px;  /* << laid custom WOAHbar font size */ color: #1c1c1c;  /* << laid custom WOAHbar font color */ background-color: #ffff00;  /* << laid custom bar color hither */ border-bottom: 2px company #000;  /* << laid custom bottom edge thickness & color hither */ -webkit-box-shadow: 0 8px 6px -6px #333;  /* << laid custom css box shadow */ -moz-box-shadow: 0 8px 6px -6px #333;  /* << laid custom css box shadow */ box-shadow: 0 8px 6px -6px #333;   /* << laid 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 bridge { float: left; width: 95%; text-align: center; padding-top: 2px; } .show-notify { -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 3px company #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; /* << laid custom bar color hither */ cursor:pointer; } .show-notify:hover { -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 3px company #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; /* << laid custom bar color hither */ 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; /* << laid custom bar color hither */ 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 as well as everything tin grade the axe last customized. Please come across the comments which is inwards the higher upwardly code as well as edit accordingly (The texts inwards betwixt /* as well as */ are comments). You tin grade the axe job whatever color slope finding tool (search Google).
Now detect </body> as well as add together next lines merely below. This is the component division y'all are going to display inwards your blog. Please edit the text inwards 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 salve the template as well as cheque the WOAH bar.. Feel costless to enquire whatever doubts regarding this implementation inwards comments.
Please download these 3 images as well as upload to whatever picture hosts similar picasa. If I delete these images inwards future, that volition drive a problem. woahbar-up-arrow-hover.png, woahbar-up-arrow.png as well as woahbar-down-arrow.png.
Don't forget to supersede the picture link amongst your picasa link.

Share this post