How to add a floating header and floating menu bar for blogger?

By adding a floating Header and floating menu bar into your blogger blog, you can get a lot of benefits.

Like you, I am also starting my blog site ( www.takitakibiz.com) as a hobby. Yes, most Bloggers start a blog site 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 to use 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 a 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, OK. Then let discuss two modifications.

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

2.           How to add a floating menu bar for blogger?

How to add a floating header for blogger?

The Floating/Fixed header is one of the best ways to add Professional looking for your blog. What is this floating header? In the floating header, the header portion remains fixed on its place while you scroll up or down in the page. With applying that method while you scroll down or up in your blog page, the header will be remaining fixed position on the top of the page. You can apply that method by using 2 methods.

DEMO

Method 01

Step 01.  Go to your Blogger account

Step 02.  Select your blogger blog and go to your Blogger Dashboard  

Step 03.  Go to the template and take a backup of your template.

Step 04.  Now click on “Edit HTML“button.

Step 05.  Search for #header or .header or something like this that defines the header portion of your blogger template. You can easily find this by clicking Ctrl+F and type #header or. Header.

Step  06. Now Add below CSS code to the header section of the style sheet

                    position:fixed; z-index:200; background-color: #fff;

                That code will help to make the header portion to stick at the top of the blog and any other content of your blog.

Step 07.  Also, we have to make some changes in the #main portion to prevent the posts from being positioned underneath the header. To do that search for ( Ctrl+F)  #main or the portion that defines the main portion of the blog and add the below code to style sheet.

                                              margin-top:200px;

Step 08. Finally, save the template and go to your blog site and scroll down to check is that floating header work or not?

Method 02

Step 01.  Go to your Blogger account

Step 02.  Select your blogger blog and go to your Blogger Dashboard  

Step 03.  Go to the template and take a backup of your template.

Step 04.  Now click on “Edit HTML“button.

Step 05.  Copy and Paste below codes to your Style sheet and save your template

<style type="text/css">

.fixed-header{

 overflow: hidden;

 position: fixed;

 z-index: 999999;

 top: 0px;

 left: 0px;

 right: 0px;

 border: 2px solid black;

 height: <span style="color: red;">76</span>px;

 background: <span style="color: red;">#EEE</span>;

}</style>

Step 06.  After save template Go to Blogger Dashboard

Step 07.  Go to the Layout tab

Step 08.  Then Click on Add a Gadgetand select “HTML/JavaScript” Gadget.

Step 09.  Now Copy the below code and Paste it in “HTML/JavaScript” Gadget

<div class="fixed-header" >

<center><h1>Type Your Blog Header Here</h1></center>

</div>

Step 10.  Now click on the save button and go to your blog site and view the floating header work or not.

If you need to add Image behalf of the text adds below code into step 09.

<div class="fixed-header" >

<center><img src="Your Header image URL Here" /></center>

</div>

OK, It’s about How to a add floating header for blogger.

How to Add a floating menu bar for blogger?

DEMO

Floating/Fixed menu or navigation bar is another one of the best ways to add Professional looking for your blog. What is this floating Menu bar? In floating Menu bar, the Menu bar portion remains fixed on its place while you scroll up or down in the page. With applying that method while you scroll down or up in your blog page, the menu/navigation bar will be remaining fixed position on the top of the page.

Lots of blog and web sites, we can see their menu/Navigation bar starts floating on top while scrolling. After you apply that method, your current blogger menu bar or navigation bar became remaining fixed position on the top of the page while you scroll down or up in the blogger page. OK, without wasting time let discuss,

Add floating Menu bar for blogger.

*First you need to add a menu bar for your blogger.

You can add a custom menu bar easily by using our previous post or following the below steps. 

Step 01. Log into your Blogger site.

Step 02. Go to Dashboard

Step 03.  Go to the Layout tab

Step 04.  Then Click on Add a Gadgetand select “HTML/JavaScript” Gadget.

<div id="nav">

              <ul>

                        <li><a href='#'><b>Home</b></a></li>

                        <li><a href='#'><b>Menu01</b></a></li>

                        <li><a href='#'><b>Menu02</b></a></li>

                        <li><a href='#'><b>About</b></a></li>

              </ul>

</div>

                                             Replace your URLs with #.

Step 05. Click on the save button.

The menu is OK. Then we need to float menu bar. For this, we need to add a JavaScript code between the <Head> tags. For that follow the below steps.

Step 06.  Go to your Blogger Dashboard  

Step 07.  Now click on “Edit HTML“button.

Step 08.  Search for the <head>tag (Click on Ctrl+F and search)

Step 09.  Paste the following code between <head> </head> tags.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script type='text/javascript'>

//<![CDATA[

$(function() {

    // Stick the #nav to the top of the window

    var nav = $('#nav');

    var navHomeY = nav.offset().top;

    var isFixed = false;

    var $w = $(window);

    $w.scroll(function() {

        var scrollTop = $w.scrollTop();

        var shouldBeFixed = scrollTop > navHomeY;

        if (shouldBeFixed && !isFixed) {

            nav.css({

                position: 'fixed',

                top: 0,

                left: nav.offset().left,

                width: nav.width()

            });

            isFixed = true;

        }

        else if (!shouldBeFixed && isFixed)

        {

            nav.css({

                position: 'static'

            });

            isFixed = false;

        }

    });

});

//]]>

</script>

Step 10. It’s not 100% completed yet. Still, there might be an issue. Still, we didn’t give any z-index value in the CSS code for the “nav”, So menu bar night goes behind the blog post. So Search for the following code in style sheet (By clicking Ctrl+F)

]]></b:skin>

Step 11.  Place the following code above it.

#nav{ z-index: 999; }

Step 12. Click on the Save button and view your blog, if floating menu bar working or not?

I Hope the above methods help you to add a floating header and floating menu bar for blogger. And if you have any problem or know more fixes on the floating header and floating menu bar for blogger, Please share with us in the comments section below. Happy Blogging.

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.