Saturday, November 15, 2014

Simple Way to Create a Navigation/Menu bar in blogger

You have published a blog which have some good content. But when you compare it with other they have a well organized Menu Bar on there blog. Then you must think you should make like that....... isn't it?
Its not a very big deal for an expert.  But .... Are you an expert? Remember ...This post is not for an expert. It will be helpful for a newbie.
You can easily create a Menu Bar in your blog by simply adding a gadget and codes. You don't need to know huge HTML or CSS codes for that.

To Create Menu Bar Follow these Steps

Step-01: Login your blogger and go to Dashboard
Step-02: Click on Layout

Step-03: Click  Add a gadget
Menu bar
Fig 01: Add gadget
 Then another popup window will open. The screen will appear like Fig: 02

Step-04: Now add HTML/JavaScript Gadget from here as shown in Fig 02
Navigation Bar
Fig 02: Select HTML/JavaScript Gadget
Now the configure screen will appear like Fig: 03
Menu
Fig 03: Gadget Configuration Page

Step 05: Leave the title blank.
Step 06: Copy this code bellow


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<br />
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}
</style>

<ul>
      <li><a href="your link">Home</a></li>
      <li><a href="your link">About Us</a></li>
      <li><a href="your link">Contact Us</a></li>
      <li><a href="your link">Your Button Name</a></li>
 </ul>

paste this in content field
    >>For your Home Button you must put your main URL instead of "your link".

    >>For your About Us Button you must create a page before  named About Us and you must put About us page link respective "your link". 

    >>For the Contact Us Button Same thing will be done respectively.
    >>You can add more button in your Menu Bar by this process. as shown in the red link.
    >>When you finished then  --
    Step 07: Click Save and enjoy your new Menu bar

    Additional Important Note:

    You must drag and drop your Gadget in a suitable place of your blog where you want to see your Menu.

    If you think this post is helpful please share it.



    No comments:

    Post a Comment

    Contact

    Name

    Email *

    Message *