How to Add Responsive Notification Bar for Blogspot


notification bar

Are you interested to add notification bar on your blogger a.k.a blogspot blog? Notification bar is a bar on top of the website or blog that looks like the image below , usually it is use if you have something to offer in your page which is really a good offer or you just want to drive traffic to a specific page of your blog or website. Notification bar contains some text with a special message. It can also contain a link to an important page, or a discount or an announcements.

notification bar
If you are looking for a notification bar like this continue reading.

The good thing about notification bar is it dont look spammy for short its better than popups. popups are annoying while notification bar is user friendly.

How is it User Friendly?:


It Doesnt Disturb Users

While visitors comes to your post obviously its number one priority is to find information and using other than notification bar like popups are just irritating your readers. When you irritate your readers, you are discouraging your readers to read more on your content. By using notification bar you can easily promote something when they notice the link above your website or blog.

Its Very Responsive

The good thing about our notification bar is that it is very responsive in desktop and mobile.


Its Very Attractive

Study shows that when people browse a website, the top part of the web pages are most lookedthan the other parts of the page, it only mean top notification bar are very effective strategy to redirect traffic to a specific pages.


Step by Step Guide Adding Notification Bar for Blogspot

1. Login to your Blogger Dashboard.

2.Go to Theme Page

3.Click on the Edit HTML button to open the theme code editor.

4.Copy the code below.

You cannot copy this code because I disabled the right click and text select on this blog. To able to get this code, you can download here. Download Now
-------------------------------------------------
<!-- Notification bar code start -->

<style type='text/css'> #gls-sticky { background: #333333; /* Bar background color */ color:#fff; /* Bar text color */ text-align: center; margin: 0 auto; height:50px; /* Bar height */ line-height: 50px; /* Bar line height */ font-size:14px; /* Bar font size */ font-weight: bold; /* Bar line weight */ text-transform: none; /* Bar text capitalization - options: none, capitalize, lowercase, uppercase */ position:fixed; /* Bar position. Change to - absolute - to make non-sticky. */ vertical-align: baseline; overflow:hidden; z-index:9999; width:100%; display:block; top: 0; /* To create a bottom notification bar, change this line to - bottom: 0; */ } #gls-sticky p a { color: #b791b6; /* Link Color */ text-decoration: none; } #gls-sticky p a:hover { color: #abc4c1; /* Link Hover Color */ } #gls-sticky p a#gls-button { background:#b791b6; /* Button Background Color */ color: #fff; /* Button Text Color */ padding:4px 8px; border-radius: 5px; margin-left: 6px; } #gls-sticky p a#gls-button:hover { background:#abc4c1; /* Button Hover Background Color */ color: #fff; /* Button Text Hover Color */ } #gls-sticky p { width:95%; float:left; } .gls-cross { display:block; position:relative; right:15px; float:right; } .gls-cross a { font-size:18px; /* Exit X size */ font-weight:bold; font-family:&quot;Arial&quot;; color:#fff; /* Exit X color */ line-height:30px; } .gls-cross, a:hover { color: #abc4c1; /* Exit X Hover Color */ text-decoration:none; } </style> <div id='gls-sticky'> <p>NOTIFICATION BAR MESSAGE <a id='gls-button' href='###' target='_blank'>Click Here!</a></p> <div class='gls-cross'><a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById(&quot;gls-sticky&quot;); crosstbox.style.visibility = &#39;hidden&#39;; } </script> <br/><br/>

<!-- End of Notification code, prepared by https://cyfrus.blogspot.com -->

-------------------------------------------------

5.Insert the given code anywhere in between <body> </body>.

After inserting your code between <body> and </body>. Your notification bar is going to be live on your blog, website or pages. Now if you want to customize the message and links, we can proceed below.

Changes That You Need to Do

Now that the code you copied is installed in your blogspot template, you need to change the Notification Message and the URL where to redirect from the notification  bar.


Changing the Notification Message

On the Codes given, search for Add This Floating Notification Bar To Your Blog and change it the way you want.

Changing the URL

On the Codes given, search for https://wwwcyfrus.dev and change it where you want your visitors to be redirected on your pages.

You're done!

If ever you got problems with this codes, you can send me a message and i will be happy to assist you!
How to Add Responsive Notification Bar for Blogspot How to Add Responsive Notification Bar for Blogspot Reviewed by Paul on February 24, 2019 Rating: 5