Tuesday, October 9, 2018

October 09, 2018

How to add floating header and floating menu bar for blogger

Hello my friends!!
 How to add floating header and floating menu bar for blogger
Today in that post we discuss about how to add floating Header and floating menu bar into blogger blog.

Like you, I am also start my blog site ( www.thewonderspot.com) as a hobby. Yes, most Bloggers start a blog sites as a hobby. Also most of people interest to start a blog site for make friends, online store sales and make money. Whatever reason we started or would like to start a blog site.  With the 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 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 of bloggers would like to use customized or third party template for their blogs more than the classic or default templates. Also some bloggers interested to 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 bloggers interested to add some modifications like, add 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 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 discus about two modifications.


  1. How to add floating/fixed header for blogger
  2. How to add floating  menu bar for blogger

How to add floating header for blogger

Floating/Fixed header is one of the best way to add Professional looking for your blog. What is this floating header? In floating header, the header portion remains fixed on its place while you scroll up or dawn in the page. With applying that method while you scroll dawn 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 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 header section of style sheet


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

                That code will help to makes 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 dawn 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 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 Layout tab
Step 08.  Then Click on Add a Gadget and 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 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 add below code into step 09.


<div class="fixed-header" >
<center><img src="Your Header image URL Here" /></center>
</div>

Ok, its about How to add floating header for blogger.

Then let see,

How to Add floating menu bar for blogger


Floating/Fixed menu or navigation bar is another one of the best way 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 dawn in the page. With applying that method while you scroll dawn or up in your blog page, the menu/navigation bar will be remaining fixed position on the top of the page.

In 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 dawn 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 below steps. 



Step 01. Log into your Blogger site.
Step 02. Go to Dashboard
Step 03.  Go to Layout tab
Step 04.  Then Click on Add a Gadget and 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 URL with #.

Step 05. Click on save button.

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.  Its 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 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?

If you have any issue? Please write in the below comment section.

Ok then I think now you have a better idea about   How to add floating/fixed header for blogger and How to add floating menu bar for blogger. Finally, you have a professional and attractive blog site.

Enjoy your blogging.


For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)


0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger