How to add beautiful floating Notification Bar for blogger?

Have you ever see floating notification bar in other blog sites, and ever think about, How to add floating Notification Bar for your blogger blog.

Like you, I am also starting my blog site ( www.takitakibiz.com) as a hobby. Yes, most Bloggers start blog sites as a hobby. Also, most people interest to start a blog site for making friends, online store sales and make money. Whatever reason we started or would like to start a blog site.  With time we try to improve our blog’s traffic, appearance, and content. If you want to get more traffic for your blog site, you need to attract more readers for your web or blog site. In that point as well as the content in your blog, the appearance or layout of your blog or web site has also done a great job. 

So as a blogger we try our best to make our blog sites more professional and attractive than others. So we like to add more functionality to our blog site. Because of that reason most the bloggers would like to use the customized or third-party template for their blogs more than the classic or default templates. 

Also, some bloggers interested in used their own build blog template.  However, by using some HTML and CSS codes we can be doing some customization and modifications for our blog layout.  For that not required professional knowledge about HTML or CSS coding. We can be doing modifications or customization to both default blogger template and customized templates.


In that point most of the bloggers interested to add some modifications like, add the floating/fixed header, add floating/fixed menu bar, add floating banners and add floating notification bar. By adding additional HTML and CSS codes and java scripts you can do that customization without any issue to the blog site layout. Floating an object is done by fixing its position using a JavaScript code. However, we need to define which parts of the blog page you need to float. After defining the part we can easily build up our code.


Already we discuss,

1.       How to add the floating/fixed header for blogger

2.       How to add a floating menu bar for blogger

Why we need notification bar?

We can use that notification bar for many things. Like,

·              Embed an email signup form

·              Link to an important page or post

·              Link to a social profile

·              Inform the important news or notifications for readers.

·              For advertising purpose

·              Help to Mobile SEO

·             To show up the recent articles or popular posts.

·               Best way to highlight and attract to affiliate deals, direct links and offers.

·               To grow your followers in particular social media.

I think those notifications bars are better than popups because popups are intrusive and cover up all content of our blog pages. Also sometimes it causes to slow down our page speed time too. But notification bars aren’t like that. Notification bars are attractive and user-friendly more than pop-ups.

How to add floating Notification Bar for blogger?

There are two ways you can add a notification bar to blogger,

01.   Using the third party applike Hellobar. It is free and customizable.

02.   You can add your own custom notification bar using HTML and CSS code. Just only you have to do code it and copy paste.

Today we discuss how to add your own custom notification bar using HTML and CSS code. We can use several methods for that task. The biggest benefit of that notification bar is, that floats or show our desired notification on the web or blog page while you scrolling. Floating notification bar will attract all of your visitors to show the desire notification that you want.

Method 01

By following 2 step process you can complete that method.

Step 01

01.   Log into your blogger blog

02.   Go to Blogger Dashboard

03.   Go to Template

04.   Then click Edit HTML Button

05.   Now find for  ]]></b:skin>  ( click Ctrl+F )

06.   Paste the below codes before or above ]]></b:skin>

/*-------------- Floating Notification Bar start ----------------*/

#bloggernotificationBar {

    display: none;

    height: 41px;

    margin: -41px 0 0;

    padding: 0;

    position: fixed;

    width: 100%;

    z-index: 999999;

}

#bloggernotification {

    background: none repeat scroll 0 0 #000000;

    border-bottom: 3px dotted #FFFFFF;

    border-radius: 10px 13px 7px 5px;

    color: #FFFFFF;

    font-family: arial,sans-serif;

    font-size: 14px;

    font-weight: bold;

    height: 37px;

    margin: -30px 5px 5px -1200px;

    padding-top: 7px;

    position: relative;

    text-align: center;

    text-decoration: none;

    text-shadow: 1px 1px 1px #000000;

    width: 500%;

    z-index: 9998;

}

#bloggernotification a {

    border-radius: 3px 3px 3px 3px;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);

    color: #000000;

    font-family: Calibri,sans-serif;

    font-size: 13.5px;

    padding: 1px 7px;

    text-decoration: none;

}

#bloggernotification a:hover {

    text-decoration: underline;

}

#bloggernotification img {

    display: none;

}

Step 02

01.   Again go to Template

02.   Find for <body> tag

03.   Now paste the below code just after <body>tag

<div class='openbloggernotification' id='bloggernotificationBar' style='display: block; margin-top: 0px;'>

<div id='bloggernotification'>

Type Your Floating Notification Bar Message here

</div>

</div>

04.   Now save your Template.

Method 02

With that bar, you can apply a Transparent floating notification bar with a close button. If readers wanted to get rid of the notification bar, then readers can close it easily by clicking on the close button.

01.   Log into your blogger blog

02.   Go to Blogger Dashboard

03.   Go to Template

04.   Then click Edit HTML Button

05.   Then search for </body>tag. ( Click Ctrl+F )

06.   Now, copy and paste below code just before or above it.

<!—Floating Notification bar code start -->

<style type='text/css'>

#ut-notibar

{

background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBII3-yODoA8Dn-EiFUQ3_Bmt-OY2AKrW50Thp4TTVfIhz8NPZWQ-YWvum-ZckT16HQT8NZUKvbp16alglXxQvkukaZ7cPRdV11Xq_j3ABT1ZEEpZjHPoy0j-oXnK1fJ2mWs9jQpghN2A/s1600/ut-bg.png&#39;)

  repeat;

color:#fff;

text-align: center;

margin:0 auto;

border-top: 1px solid #fff;

height:28px;

font-size:13px;

position:fixed;

bottom:0;

z-index:999;

width:95%;

border-top-left-radius:15px;

border-top-right-radius:15px;

display:block;

font-weight: bold;

font-family: arial,&quot;Helvetica&quot;;

font-color:#fff;

}

#ut-notibar:hover

{background:#333;}

#ut-notibar p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}

#ut-notibar p a{ text-decoration:underline; color:#FFFF33;}

.ut-cross{display:block; position:relative; right:15px; float:right;}

.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}

</style>

<div id='ut-notibar'>

<p> Type Your Floating Notification Bar Message here

<a href='https://www.takitakibiz.com/' 

target='_blank'>Click here</a></p>

<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>

</div>

<script language='JavaScript'>

function hide_cross() {

crosstbox = document.getElementById(&quot;ut-sticky&quot;);

crosstbox.style.visibility = &#39;hidden&#39;;

}

</script>

<!-- End of floating Notification bar -->

07.   Click on the save button.

Replace your message with Type Your Floating Notification Bar Message here

Replace your URL with  https://www.thewonderspot.com

To change color, edit the red color highlighted code as you prefer.

** Without editing your Template andstyle sheets you can add above codes directly into theHTML/JavaScript gadget.

OK, by following one of the above methods you can easily add a floating notification bar for blogger. That will help to attract more readers to your notification, message, direct link, social media, affiliate deals or offers.

I Hope the above 02 methods help you to add a beautiful floating Notification Bar for blogger. And if you have any problem or know more fixes on this floating Notification Bar for blogger, Please share with us in the comments section below. 
Happy Blogging.