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.
![]() |
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
Its Very Responsive
Its Very Attractive
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.
<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:"Arial"; 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("gls-sticky"); crosstbox.style.visibility = 'hidden'; } </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.