How To Add Notification Bar In Blogger

Blogger is always known the robust blogging platform because it is easy to use, search engine friendly, amazing features and easy to edit anything. If you search anything for blogger then you will easily find it because developers has created almost everything for blogger. Today, here we’re going to learn that how can we implement the notification bar in blogger. Notification bar is not for blogger by default but as I told you that developers has created many things for blogger then it is also developed by someone. This notification bar is created by Mohammad Mustafa Ahmadzai from MBT. And I thought why not I should share it with my loyal readers. So first of all let me tell you something about this.

Blogger Notification Bar

This is the fancy and stylish notification bar which is created with JavaScript, CSS3 and HTML by which your visitors will be notified for news. Notification bar can help you in announcing anything on your blog and readers will be attracted on your announcement. You can place the news on that notification bar for informing your readers. This notification bar is having dark color with yellow links color. It has a arrow on right side; if you click on that then it will go up and another arrow will come down. It means if this is irritating your readers then they can show or hide this simply by clicking on the arrow.

The developer has implemented the logo in the left side as credit. It means you don’t have permission to change or remove that logo until you buy the premium version of it.

How To Install This In Blogger ?

Installing this in blogger is just simple. A ten years old boy can also do this by following the steps. So here I’ve listed the steps.

Go To Blogger >> Template >> Backup Your Template
Click Edit HTML and Search For <head>
Paste The Following Code Below <head>

//]]>
</script>

For The Next Step Search For ]]></b:skin>
Above It Paste The Following Code

/* —-Blogger Notification bar —– */
#bloggernotificationWrap{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}
#bloggernotification {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
background: none repeat scroll #2E2F2E;
position: relative;
box-shadow:0px 1px 3px #666;
z-index: 9998;
text-decoration: none;
color: #cccccc;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
border-bottom:2px solid #fff;
}

#bloggernotification a{
text-decoration: none;
color:#FFFC00;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}
#bloggernotification a:hover{
text-decoration: underline;
}
#bloggernotificationWrap #closebloggernotification{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_qQ2KrS0yVxv624WnR9QGeopocbdsxS5bEYeYx28Ygji260EPyolASAUXFkJ72B4VA0R7aRfkmPagPlR8jimwRLq3POpmJ0t3CB-iFeG3VPBFSGvNW1SSZ9L5nRioB3ZwkcBv2YdfvZjJ/s400/light.png) no-repeat 0 center;
cursor: pointer;
}
#bloggernotificationWrap #closebloggernotification:hover{
background-position: -21px 50%;
}
#bloggernotificationWrap.bottomPosition #closebloggernotification{
background-position: right 50%;
}
#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{
background-position: -42px 50%;
}
#bloggernotificationWrap #openbloggernotification{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
background: #2E2F2E;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
cursor: pointer;
z-index: 1;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:0px 1px 3px #666;
}
#bloggernotificationWrap #openbloggernotification span{
display: block;
width: 21px;
height: 34px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_qQ2KrS0yVxv624WnR9QGeopocbdsxS5bEYeYx28Ygji260EPyolASAUXFkJ72B4VA0R7aRfkmPagPlR8jimwRLq3POpmJ0t3CB-iFeG3VPBFSGvNW1SSZ9L5nRioB3ZwkcBv2YdfvZjJ/s400/light.png) no-repeat right 50%;
}

Now The Notification Bar Is Installed In Your Blog.
To Add In Your Blog Search For <body>
Paste The Following Code Below <body>

<div class=’openbloggernotification’ id=’bloggernotificationWrap’ style=’display: block; margin-top: 0px;’><div id=’bloggernotification’>
Write Your Notification Message Here
<span id=’closebloggernotification’/></div><span id=’openbloggernotification’ style=’top: -6px;’><span/></span></div>

Now Insert Your Message On “Write Your Notification Message Here.“
To Add The Link, Insert The Following Code With The Notification Message.

Replace ADD-URL-HERE With Your Link
Replace Link Text With The Link Text.
Finally, Save Your Template and You’ve All Done!

Final Words

This was our fantastic notification bar and I hope you’ve liked it. Notification bar really helps in improving the user experience and also the navigation of a blog. If you’re facing any problem in adding this in your blog then feel free to ask in the comments area. Also share your views about this. Take a lot of care of you and your family. Happy Blogging!

How To Add Notification Bar In Blogger

Blogger Notification Bar

How To Install This In Blogger ?

Final Words

Post a Comment