Easy Step To Add Navigation Menu in Your Blog


1.  Add Css To Your Template

Go To your Blogger Dashboard, Layout >> Edit HTML >>
And find This code

</b:skin>

And before it add next code.

/*URL: http://www.AllBlogTools.com/ */

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

 

And save your work.

2. Add the menu to your template.

 

 

And choose Add HTML/JavaScript

Leave the title empty and at the content area add this code,

Now Click Save and check your blog,

3. Customize Your Menu

Now you have to change the menu links for your own links and titles, and you may want to change the menu colors as well.

 Change The Menu Links

In step 2 you’ll find this words in the code

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

change The symbol # to your link, and change the word Edit to your title.

you can repeat this part of code as you like,

every time you add this part of code again to your menu code, a new link will be added to your menu.

Change The Menu Colors

To change your menu colors you have to edit the css code in step 1 before you add it to your template. So Copy and past it in new text -notepad- file to edit it there.

To change the main background color.

Find

 background-color: #f6ffd5;

and change f6ffd5 to your favorite color.

To change the selected and hover background color.

Find

 background-color: #DBFF6C;

and change DBFF6C to your favorite color.

To change the text color

Find

 color: black;

and change black to #xxxxxx and xxxxxx should be your new color code

you are done, and you have got your own customized code, now use it as we used the code in step 1.

Ayo sobat kasi komentarnya biar admin lebih semangat lagi buat ngasi tips menarik.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: