How to customize Navigation Bar of Third Party Blogger Template ~ SAMPATKUMARI'S Blog "PARISHKAR"

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

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.

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


7 comments:

  1. A ggod interesting and comprehensive information. The references has make it more interesting

    ReplyDelete
  2. A very good and valuable information. The efforts of thr writer is appreciable

    ReplyDelete
  3. Janakaree bahuta achchhee hai parantu yaha kaama itana asan bhee naheen lagata

    ReplyDelete
  4. This is very important jankare ha.es se bahut labh hoga eya muje bahot he ache lage hi.a very good information.

    ReplyDelete
  5. हम तो HTML जनते ही नहीं हैं इस लिये HTML की फाइल को खोलना तो दूर कभी इसको भूल कर भी नहीं छैडते क्या पता कहां क्या गडबड गो जाये ।

    ReplyDelete
  6. Thans for sach well explained guide lines. This may prove very helpful for new commers and beginers

    ReplyDelete