MICROHELPS: ADD 18+ HORIZONTAL NAVIGATION MENUS FOR BLOGGER WITH CSS AND HTML CODE

ADD 18+ HORIZONTAL NAVIGATION MENUS FOR BLOGGER WITH CSS AND HTML CODE

JUST FOLLOW THE SIMPLE STEPS AND YOU CAN ADD HORIZONTAL MENUS LIKE THIS..

STEPS TO FOLLOW

1: Goto blogger.com and sign in with you id

2: Goto layout

3: click on "add a gadget" which is at right side of the page as shown in the below picture

4: After clicking on gadget a pop up menu will open then from there select "HTML/JAVASCRIPT"

5: Then simply paste the code given at the end i-e after step no 7, and also make changes in it because it is a standard code so you have to change it as you need. sample are given at the end and there codes are also written under them so you can add them easily.

6: After adding the code in html save it then drag this gadget just under the blog header as shown in figure

7: Now click on save arrangement and view your blog.

-----------------------------------------------------------------------------------------------------

SAMPLE 1:

Menu #1

No Image Used

To add menus like above paste the following code in html as stated before.

CODE:

</style>

</ul> </div>

IMPORTANT:

Now To change the links, edit the highlighted red part of html in above as well as all codes.

NOTE: Replace the # sign with you page/label url. and replace the link1, link2 with the titles which you want to give. if you want to add or delete a tab then just add or delete this line

By this way you can add horizontal navigation menus.

other samples and there codes are given below. in all these code only make changes in the following area as stated before

------------------------------------------------------------------------------------------

SAMPLE 2:

Menu #2

No Image Used

CODE:

</style> <div id="navcontainer">

</ul> </div>

Make changes in it as stated before but only in the red part..

SAMPLE 3:

Menu #3

No Image Used

CODE:

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0

</style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li>

</ul> </div>

SAMPLE 4:

Menu #4

CODE:

</style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li>

</ul> </div>

SAMPLE 5:

Menu #5

CODE:

</style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li>

SAMPLE 6:

Menu #6

CODE:

</style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li>

SAMPLE 7:

Menu #7

CODE:

</style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li>

SAMPLE 8:

Menu #8

CODE:

</style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li>

</ul> </div>

SAMPLE 9:

Menu #9

CODE:

</style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li>

SAMPLE 10:

Menu #10

CODE:

</style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li>

</ul> </div>

SAMPLE 11:

Menu #11

CODE:

SAMPLE 12:

Menu #12

CODE:

SAMPLE13:

Menu #13

CODE:

SAMPLE 14:

Menu #14

CODE:

SAMPLE 15:

Menu #15

CODE:

SAMPLE 16:

Menu #16

CODE:

SAMPLE 17:

Menu #17

CODE:

SAMPLE 18:

Tabs Menu #18

CODE:

END

ADD 18+ HORIZONTAL NAVIGATION MENUS FOR BLOGGER WITH CSS AND HTML CODE

ADD 18+ HORIZONTAL NAVIGATION MENUS FOR BLOGGER WITH CSS AND HTML CODE

JUST FOLLOW THE SIMPLE STEPS AND YOU CAN ADD HORIZONTAL MENUS LIKE THIS..

STEPS TO FOLLOW

SAMPLE 1:

Menu #1

SAMPLE 2:

Menu #2

SAMPLE 3:

Menu #3

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0

SAMPLE 4:

Menu #4

SAMPLE 5:

Menu #5

SAMPLE 6:

Menu #6

SAMPLE 7:

Menu #7

SAMPLE 8:

Menu #8

SAMPLE 9:

Menu #9

SAMPLE 10:

Menu #10

Menu #11

Menu #12

Menu #13

Menu #14

Menu #15

Menu #16

Menu #17

Tabs Menu #18

No comments:

Post a Comment