How to add a floating or fixed header to blogger.

Hi! Guys in this post I would like to tell you about ‘How to add a floating or fixed header to blogger.’

The header portion remains fixed while you scroll down the page of your blog. This can be done by making some changes to the style sheet of the template. Don’t worry I am with you throughout this.

But before making any changes to your template please backup it.

Now follow these simple steps:

1. Log in to blogger.
2. Go to template and backup it first.
3. Click on ‘Edit HTML’.
4. Now search for #header or header#masthead or something like this that defines the header portion of the template. You can do the search by pressing Ctrl+F.
5. Add position:fixed; z-index:200; background-color: #fff; to the #header portion of style sheet.
6. This part of the code makes the header portion to stick at the top of the blog and any other content.
7. Now we have to make some changes in the #main portion to prevent the posts from being positioned underneath the header.
8. Search for #main or the portion that defines the main portion of the blog.
9. Add margin-top:200px; to the #main portion of the style sheet.
10. Sometimes you have to make some modifications in the style sheet according to your needs.

If you have any genuine problems regarding this post please feel free to contact.

Print Page

How to add arrow keys to navigate in blogger

Hi! Guys in this post I would like to tell you ‘How to add arrow keys to navigate in blogger’.

This widget helps you to navigate from one page to next page and also one post to the next. Navigating through this widget is so helpful because otherwise we have to search for the next post link on the blog, with this that problem can be avoided.

Adding and removing this widget from your blog is so simple. You can add it by clicking on the ‘Add to Blogger’ button.

How to let others know of this?

You can do it by adding some floating images like I done it on this blog. You can let them know by showing some text on your blog.

If you want to show some floating images follow these simple steps.

Log in to blogger.

Go to template. At first backup your template and click on edit HTML.

Search for ]]></b:skin> . You can do this by pressing Ctrl+F.

Add this below code just before ]]></b:skin>.

#float_techproleft { position:fixed;_position:absolute;bottom:270px;left:0px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);} #float_techproright { position:fixed;_position:absolute;bottom:270px;right:0px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Now search for </body> and add the below code just before </body>.

<div id='float_techproleft'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpKwAhadNwnudfI-BcSsxgTk7g-1cssKRm_bIolNuz147DRABSd75QiofSVPdkTNWBKmITC_y3I1zKn5HI_KWpDYyEvFndA5-kqwQ9Ujxo0MrAV-mmzK0r59HeAsxSKyoSmkatRw4BtBb/s1600/left.png' title='use keyboard keys to navigate'/> </div> <div id='float_techproright'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPQ2G_YsV-pCaxkuBBjzoylRTq9xh6QutOeMyb69M7_yBmyiV8REpNTKU-zzKZ16ff79t2WvMOFp53YVLitJbL9yUzGPxhhpY7sRA3yQ4TcQQ5VmfZPduf8B_dOrm1azl6HzdjgyK4XPD/s1600/right.png' title='use keyboard keys to navigate'/> </div>

Now click on ‘save’ button and you can see the changes on your blog.

You can edit the image links of the navigation keys in the above code.

If you have any genuine problem regarding this post please feel free to contact.

Print Page