Blogger HTML Editing How to customize Navigation Bar of Third Party Blogger Template

How to customize Navigation Bar of Third Party Blogger Template 

When we download and install a third party template on our blog(Third Party template means a template which is not included in the default blogger templates) we will have to set many things of it as per our needs. The template developer writes the HTML/CSS  in a way that the template will run satisfactorily on a blogspot  blog but he can not accommodate the needs of every body so he writes the things to be used commonly. We can set every thing of the template like colours, back grounds and more as per our needs. For this purpose we will need to edit the template’s HTML. Today I will discuss  about setting every thing of the “navigation bar” by making necessary changes in the template’s HTML file. First you login to your blogger account and click on ‘Template’ the following screen will appear –

 

How to customize Navigation Bar of Third Party Blogger Template

Now click on edit HTML, the HTML file will open. Now open your blog in a different browser tab and check your Navigation bar. It will look some thing like this.

Sample Navigation bar

 

BloggerSEO Tips-Blog Title Swapping for Better SEO Results

You see that it shows many pages like, Home, About Me, Terms of Use, Privacy Policy etc. but while we click on these they do not work and we want them to work. We also want to rename them, for example we want “Terms of Service” in place of “Terms of Use”. We also want to change their colour, their font size, their back ground and all things as per our choice. This is possible by editing the HTML file.

Sample HTML Document

OK, now come to the blogger HTML file which we have already opened. Click any where in side the file, press CTRL+F. Now a search box within the template HTML file will appear like this –

Read on - HTML Basics-Links, Link tags Linkattribs

Now type “navigation” in the template’s search box and press enter and find this line -

#nav{background-color:#0099ff;font:normal bold 11px Arial,Sans-Serif;color:black;border-top:1px solid #3300ff;border-bottom:1px solid #3300ff;height:30px}

(1)    Change 0099ff to change back ground colour

(2)   Change 11px to change Font size.

(3)   Change black to change Font colour

(4)   Change 3300ff; to change top border colour

(5)   Change 3300ff to change bottom border colour

You can click here to find various HTML/CSS colour codes.

Read on - Blogger CSS-add drop Caps first letterbig capital different color to post comments

Now the another question is “why Home, About Me Terms of use” are not working. Let us again go to the blogger HTML file and type ‘home’ in the search box in side the open template file and press enter and find the following line in the HTML file, you may need to press enter for more than once –

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

Replace # by full URL of your blog including http://

Now change another. Suppose you want to change “Terms of Use”. Here you also  want to change “Terms of Use” to “Terms of service”

<li><a href='#'>Terms of Use</a></li>

Replace # by full URL of your “Terms of Service” Page including http:// and change “Terms of Use” to “Terms of service”

Read on - Writing comments in HTML and need to write a comment in HTML document 

Make all changes one by one in the similar way and you have done. Save template and view your blog to confirm changes you have made.

Always replace # and not ‘#’

Note-You can also add new pages here. Please never forget to backup your blog and template before performing this action.

How to customize Blogger Nav Bar, Change appearance of aThird Party Blogger Template, How to set width of any website, best free template for blogger 2019, blogger theme cusomization kaise kare, create navigation menu in blogger, customize blogger template, blogger tutorial, blogger template, edit navigation drop down menu, colored minima theme customization, How to Extend Wrapped Elements to the Full Browser Width, Remove extra space in blogger