How to Add Notification Bar To Blogger

Hello and Welcome to GetWebInfo. Here on this post you will learn how you can put your blogger header in the notification bar. I'm a great fan of notification bars at the top of blogs and websites. A notification bar is usually a bright or contrasting background with a slim area at the top of the webpage. The bar is in some text with a specific message. It also contains a link to an important page, discount or even an opt-in form.



Why Notification Bars are great.

Notifications bars can be sued for many things you can use it:

  • Embed an email list sign up form
  • Link to an email list squeeze page
  • Link to an important page or pst
  • Link to a shop
  • Link to social profile or profiles
  • And much much more

In my opinion, they are better than popups and welcome mats because they are less intrusive and they do not cover your content.

This is important for several reasons.

  1. Users do not have to dismiss the notification bar to view your content. They are more likely to set up there at the top of the page without having to hide it. And studies show more times a reader sees a message or link, more likely they click on it.
  2. It's great for mobile SEO. Google dings sites that have mobile pop-ups or welcome mats. Your mobile search results take a hit. And since 50% of INTERNET traffic is now on mobile devices, it can really hurt your organic traffic.
  3. It's Right. There. Internet user heat maps, which show where a web page on a web page is visible, indicates the top of the web page is a real hot spot. It's the real estate and a great place to put your most important link or call-to-action.

Add A Custom Notification Bar to Blogger

The code below will help you create a sticky notification bar that is "sticks" to the top of your blog when a reader scrolls down. If you prefer a "non-sticky" version, I will show you how to change the code for this.

How to Add Code to your Blogger theme HTML


Step 01: Login to your Blogger Dashboard 

Step 02: Go to the Theme Option 

Step 03: Click on the Edit HTML button to open the theme code editor





Step 04: Click any where in the code box

Step 05: Press the CTRL+F or Command F keys to open the search box in the upper right corner of the code window

Step 06: Search for <body

Step 07: Hit Enter key to search 


Step 08: On an empty line below the body tag, paste the code from below. 

Step 09:  Click the Save theme button to save changes


Here is the Code that you want 

<!-- Notification bar code start --www.getwebinfo.com>
<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>Add This Floating Notification Bar To Your Blog <a id='gls-button' href='https://getwebinfo.com' 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, info - https://getwebinfo.com -->
Congrats your Notification bar will now be live on to your site. You may want to edit it using the directions below.

Customization of the Notification Bar

Step 01: Locate the code in your blog theme code.
Step 02: The code is heavily commented. This is the text between the * * and * / brackets. These comments tell you what element each CSS line applies to. Ex. / * Link color * /
Step 03: You can change the bar background color, bar text color, bar text side, button background and more. Just follow the comments.
Step 04: You can also change the bar to be "non-sticky" or a bottom affixed bar. Just follow the comments for information.
Step 05: To change the content of the bar, find this line of code

<p>Add This Floating Notification Bar To Your Blog <a id='gls-button' href='https://www.getwebinfo.com' target='_blank'>Click Here!</a></p>

Step 06:Edit the main text "Add this Blogging Blog to your Blog" to the text of your choice.

Step 07: Edit the button link by replacing https://www.getwebinfo.com with your URL of choice.

Step 08: Edit the button text by changing the "Click Here" text to text of your choice.

Step 09: Click the Save theme button when done.

Final Words

You can use this type of notice bar for a number of purpose. I find it very helpful in growing my emails list. 

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.