How to Add Marquee Notification Bar to Blogger

Do you like this story?

Notification bar widget is one of the most popular blogger widgets. It also helps in boosting your blog’s traffic by increasing the number of page views of your blog. In this post we will discuss a new and amazing marquee notification bar for blogger blogs with a stylish moving text effect. It uses HTML marquee tag for creating text animation. You can easily customize this notification bar according to your blog’s color scheme.

Why you need to add a notification bar to your blog ?

Notification bar is used to display popular post links, event notification, or any other important info. It also helps in increasing the pageviews of your blog. You can also use this notification bar for promoting your own services such ebooks or softwares.

Features of this marquee notification bar  -

1. It is sticky floating notification bar.
2. It is created in HTML and CSS only.
3. Light weight code which do not effect blog’s loading time.
4. Stylish and attractive design with moving text effect.

Adding this notification bar to your blog

1. Login to your blogger dashboard and select your blog.
2. Select Layout option and select Add a gadget option.
3. Select HTML/JavaScript widget from the list.
4. In the HTML/JavaScript widget paste following code and save it.
5. Preview your blog to see the new changes.

Note: In the following code replace Blue color code with your post titles and Red color code with links to these posts.

<style>
#wcnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#222222;
color:#ffffff;
font:16px georgia;
box-shadow:2px 2px 5px  #444444;
-moz-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wc-movtext
{
text-align:center;
padding:8px;
font-family:  Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}

#wc-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#wc-movtext a:hover
{
color:yellow;
text-decoration:none;
}


</style>
<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee  behavior='alternate' direction="left"
            onmouseover="this.stop();"
            onmouseout="this.start();">

          <p>
<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>
<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>
<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>
<a href='http://rexhacker.blogspot.com/XXXXX.html'>XXXXX</a>
</p>
      </marquee>
</div>
<div>