Easily Create Notification Bar For Website Using jQuery

It’s really easy to put a fancy notification bar at top of your website. Everyone wants their visitors to see most interesting section of the website, so why not to fetch their attention with an attractive animated notification bar. Using some simple jQuery functions and little CSS you can create a notification bar for your website in Minutes.

A notification bar also acts as a call-to-action for your website. Yes you can easily redirect your visitors to most selling product’s page, subscription page, registration page, free download page etc. If you are willing to put a notification bar in your website then you can use this code in your website and see how it looks and works perfectly.

notification bar using jquery Infotuts

Live Demo           Download

In this tutorial I have coded only one page named ‘notify.html’. This page contains jQuery code and a little CSS. I have intentionally not given visitors to see notification bar once they hide it. It’s because I have seen if they hide it first time then it means they don’t want to be bugged by it again. However if you want you can add some additional lines to make it work that way, or let me know I will do it for you :).

Here’s our code for notify.html:

<title>Notification Bar Using jQuery- InfoTuts</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
<style type="text/css">

border:dotted 2px #c3c3c3;
background: #FFFFFF;
position: relative;
margin:-15px 0px 0px -5px;
padding: 2px 0px 0px 0px;
border-bottom:2px solid black;
box-shadow: 0px 4px 5px #AAAAAA;
font-family: 'helvetica','Lato Regular', Arial;


<div id="mainheader"><p>We Have An Offer For You          <img src="img/up-arrow.png" alt="Click to Hide Notification" style="cursor:pointer;"></p>

<div id="panel"><p> <a href="http://www.infotuts.com">Download Your Free Ebook</a></p></div>

I found it really very easy to fetch your visitors attention and redirect them to desired page. If you like this simple and easy way to create notification bar then consider sharing this tutorial with your friends.

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

3 Responses so far.

Leave a Reply

Your email address will not be published. Required fields are marked *