Saturday, March 18, 2017

How to add Navigation Tabs to your blog and seperate posts with labels? :)

When you create a blog it is easy for the readers if the posts are categorized into sections. The easy way to do it is to include separate navigation tabs to your blog. It will give easy access to the reader as well as you can properly manage your content.

1) Go to your blog and click Design from the top corner.



2) Click Layout from the side pane.



3) You will be directed to the Layout page.
From that select any place where you need to have your navigation tabs and click on one of the 'Add a Gadget' options. (Normally the navigation tabs are added to the 'Cross-Column area)
This will open the Add a Gadget pop-up window.

4) Select HTML/ Java Script option.



5) You can follow the below example code to add your tabs accordingly.
Add your code to the Content section and click the Save button.

e.g. : If you are thinking of adding the navigation tabs displayed in the first image of this post, the code will be as below.. Also you will be able to sort them out through labels.

<div id='navibar'>
<a href="http://castakai.blogspot.com/" class="navitabs" title="Home">HOME</a>

<a href="http://castakai.blogspot.com/search/label/Me" class="navitabs" title="Me:)">#Me</a>

<a href="http://castakai.blogspot.com/search/label/Technical!" class="navitabs" title="Technical!">Technical!</a>

<a href="http://castakai.blogspot.com/search/label/InterestingFacts" class="navitabs" title="Interesting Facts ;)">Interesting Facts ;)</a>

<a href="http://castakai.blogspot.com/search/label/Fancy" class="navitabs" title="Fancy">Fancy :D</a>

<a href="http://castakai.blogspot.com/search/label/Sports" class="navitabs" title="Sports">Sports!</a>

<div></div></div>



6) Before saving the whole layout you can see a preview by clicking the Preview button.
If you think the design is good to go, click Save Arrangement button.



7) The added navigation tabs will now be visible in your blog.



Simple as that you can add navigation tabs as much as you want to organize your blog :)

2 comments:

  1. We have to put our own address instead of http://castakai.blogspot.com/
    Because this is Kala's world link. :D Anyway that was really helpful . Thanks for sharing your knowledge with us

    ReplyDelete
    Replies
    1. Yes. According to your requirement you should change the lines accordingly. :)

      Delete