How to Add Responsive Notification Bar for Blogspot
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
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:"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.
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
Reviewed by Cyfrus
on
February 24, 2019
Rating:
Reviewed by Cyfrus
on
February 24, 2019
Rating:
