I’m a big fan of notification bars at the top of blogs and websites. A notification bar is a slim area at the top of the webpage, generally with a bright or contrasting background. The bar contains some text with a special message. It can also contain a link to an important page, discount or even an opt-in form.
If you check out the top of my blog here, you’ll see a black and white notification bar. It links to my Freebies squeeze page. This one little trick has help increase my email list signups a ton!
Why notification bars are great
Notification bars can be used for many things. You can:
- Embed an email list signup form.
- Link to an email list squeeze page.
- Link to an important page or post.
- Link to a shop.
- Link to a social profile or profiles.
- And more!
In my opinion, they’re better than popups and welcome mats because they’re less intrusive and they don’t cover up your content.
This is important for several reasons.
- Users don’t have to dismiss the notification bar to see your content. They’re more likely to let it set up there at the top of the page without hiding it. And studies show the more times a reader sees a message or link, the more likely they are to click on it.
- It’s great for mobile SEO. Google dings sites that have mobile popups or welcome mats. Your mobile search results take a hit. And since more than 50% of internet traffic is now on mobile devices, this can really hurt your organic traffic.
- It’s. Right. There. Internet user heat maps, which show where readers look on a web page, indicate the top of the webpage is a real hot spot. It’s prime real estate and a great place to put your most important link or call-to-action.
How to Add a Notification Bar to Blogger
There are 2 ways you can add a notification bar to Blogger:
- Using an outside app like Hello Bar or PowR. These apps are FREE and pretty customizable. The main downside is that they contain branding for the app company, like a free ad for them on your site.
- Add your own custom notification bar using a bit of code. This is as simple as editing some provided code and pasting it on your site.
Add a Custom Notification Bar to Blogger
The code below will help you create a sticky notification bar that “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 alter the code for this.
Step 1: Add the Code to Your Blogger Theme
In this step, you’re going to copy and paste the provided code into your site code.
- Login to your Blogger Dashboard.
- Go to the Theme page.
- Click on the Edit HTML button to open the theme code editor.
- Click anywhere in the code box.
- Press the [Control + F] or [Command + F] keys to open the Search box in the upper right corner of the code window.
- Search for: <body
- Hit [Enter] key to search.
- On an empty line below the body tag, paste the code from below. (You can use the Enter key to add a new like before you paste.)
- Click the Save theme button to save changes.
Your notification bar will now be live on your site. You may want to edit it using the directions below.
Step 2: Customize the Notification Bar
- Locate the code in your blog theme code.
- 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 */
- You can change the bar background color, bar text color, bar text side, button background and more. Just follow the comments.
- You can also change the bar to be “non-sticky” or a bottom affixed bar. Just follow the comments for information.
- 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://georgialoustudios.com' target='_blank'>Click Here!</a></p>
- Edit the main text “Add This Floating Notification Bar to Your Blog” to the text of your choice.
- Edit the button link by replacing https://georgialoustudios.com with your URL of choice.
- Edit the button text by changing the “Click Here” text to text of your choice.
- Click the Save theme button when done.
Voila, you now know how to add a notification bar to Blogger!
You can use this type of notice bar for a number of purpose. I find it very helpful in growing my email list.