How to Add Attention Grabbing Notification Bar to Your WordPress Blog?

Must Read

Four Things You Most Likely Didn’t Know About Guest Post Service

Guest Posting is a great way to raise awareness and build links. However, before starting a guest...

How Does Blogger Outreach Help Your Brand Grow?

Bloggers are eager to promote their content and engage their readers, so building relationships with them are...

How To Get Your Startup Noticed

Being an entrepreneur is always a learning experience. That's because the rules are constantly changing. The change...
Shrinivas
Hi, this is +Shrinivas. I am a freelance web developer and part time blogger having skills in WordPress, HTML/CSS, jQuery, PHP and CodeIgniter.

[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.

free notification bar for wordpress blog

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.

 

- Advertisement -

Latest News

Four Things You Most Likely Didn’t Know About Guest Post Service

Guest Posting is a great way to raise awareness and build links. However, before starting a guest...

How Does Blogger Outreach Help Your Brand Grow?

Bloggers are eager to promote their content and engage their readers, so building relationships with them are essential to growing your brand....

How To Get Your Startup Noticed

Being an entrepreneur is always a learning experience. That's because the rules are constantly changing. The change happens so subtly that you...

The Benefits of Treemapping for Data Analysis

Treemapping is a great tool for data analysis because it allows you to see the big picture and the details at the...

Tips for driving more traffic to your engineering blog

Over the last two decades, blogging has transformed from being a somewhat hobbyist pursuit to a fully-fledged sector of the internet that...

More Articles Like This

- Advertisement -