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