Add Beautiful Notification Bar to Blogger

Do you have something amazing? You want to notify your users about what you are going to do next or whatever you want to tell your visitors then notification bar is the best way. Notifications bars always remains on the top, floats with the page and helps you to notify your visitors about your popular posts, upcoming events etc. So, today we are going to share a beautiful notification bar for your blogger blog. This notification bar shows marquee animation and you can easily customize it according to your taste.

Adding this Notification Bar to Blogger 

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Click on Add a Gadget and select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Now Copy the below code and Paste it in the HTML/JavaScript Widget Box

<style>
#bgtnot-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;
}

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

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


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

          <p>
<a href='Link'>Title</a>

|        <a href='Link'>Title</a>

|        <a href='Link '> Title</a>

|        <a href='Link'> Title</a>

|        <a href='Link'>Title</a>
</p>
      </marquee>
</div>
<div></div></div> 

Customization:

• Replace Link with your post links and Title with your post titles

Step 4. Hit the Save Button
That's it :)

Share This:

Tags:

Widgets

• Prevoius
• Next