[Update] We have designed a free responsive notification bar WordPress plugin.. check it out!
Do you want to say something to your blog viewer? Notification bar is the best way to grab the viewer’s attention where you can add notices, share your ideas, offers or even add social sharing buttons. Here I am sharing only 13 lines of code to display the notification bar, which I had coded for one of my html template. This code displays attention grabbing notification bar on your WordPress blog with cool animation effect, it also includes a close button to hide the bar.
This notification bar code is compatible with all the major browsers and you can easily customize the look and feel of it if you are familiar with HTML and CSS. It is recommended that you should backup the source code to a text file so that you can easily revert back to it if something goes wrong.
Steps to add notification bar on your wordpress blog
- Login to your WordPress blog
- Go to “Editor” under “Appearance” option
- Click on “Header” (header.php) to add the jquery code
- Add the following code exactly below <head> tag
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script> $(document).ready(function(){
$('#toolbar').delay(5000).animate({'margin-top': '0px'},1000);
$('#hidetoolbar').bind("click", function(){
$('#toolbar').animate({'margin-top': '-40px'},1000);
});
}); </script>
- Now scroll down to <body <?php body_class(); ?>> to add the HTML part, insert the following code below <body <?php body_class(); ?>> and update it by pressing “Update file” button
<!-- free notification bar for wordpress blog html--> <div id="toolbar" style="width:100%; height:30px; background-color:#0070FF; color:#FFF; text-align:center; line-height:30px; vertical-align:central; font-weight:bold; border-bottom:solid #FFF; box-shadow: 1px 1px 2px 2px #242888; margin-top:-40px">Specify website over here.. <div id="hidetoolbar" style="height:30px; width:30px; background-color:#F33; float:right; font-size:large; cursor:pointer">X</div></div>
- That’s it, now you are ready to add your own text into the notification bar, just replace “Specify website over here..” text with your own text. You can add your text inside <marquee></marquee> tag if it is long. Isn’t it easy? Give it a try..
Liked this code? Share it with your friends..! Please link back to us if you are using this free notification bar on your WordPress blog.