8 Oct 2017

HOW TO CREATE NAVIGATION BAR 

 To make it less demanding on your blog perusers to explore your website, make a selected navigation bar to show up under your header by utilizing a Blogger device called label. You can make and show up to 5 pages, with each being recorded as a hyperlinked tab on your Navigation bar bar. You can incorporate pages, for example, "About Me" and "Contact Information," and alter them whenever, it is neccesary.

 Before you can create a navigation bar you need to create a label that will serve as a link to your posts. Let go through the steps to create a label before we will now go ahead to create a navition bar

(1)
 

first step is to login to your blogger dashboard and click on post.When the text editor opens

click on compose and begin to write your post.After writing post save and publish.

(2) Go back to your blogger dashboard and click post,after that click on the post you want to create a label for and click on image look like envelop, click new label and name your label base on what will be in your navigation.

Do like that to all your categories. Add the same label name to all  post you to place under a particular categories i.e if you want to put 20 posts under family category,give all the 20 posts family as their label name to group them together under a singular category.

(3) Now we need the label url to create a navigation bar.

To get the label url,click on post in your dashbaord,when all your post pop click on view of each of the categories you have label before.and copy the url in your browser and save all the url in a place on your computer,because we are still going to use them soon.

(4) Now go back to your dashboard and click layout,then click cross-column,then click edit.look for html/javascript

replace all the label url in the "#" area of this code an d replace your categories in blue area.Copy paste the code in the number of categories you have.

<div style="display:inline;text-decoration:none; width:550px; height:40px;>

 <ul>

<li><a href="#">HOME</a><li>

<<li><a href="#">about us</a><li>

<li><a href="#">contact us</a><li>

</ul> 

</div>

Place the code in the HTML/JAVASCRIPT Gadget. and save your code.

 

 





No comments: