Blogger9:- Now add black navigation menu with blue hover effect in your blogger blog. 0

| | , ,

Hello friends I will give you best black navigation menu with blue color hover effect and looking great so that add this navigation menu in your blogger blog easily now.


Follow simple and easy step to adding this cool navigation menu in your blogger blog ---->>>>

* First go to your blogger DASHBOARD .

* Now click in design tab and edit HTML .

* Click in small box to expand your blogger template.

* Find this code ]]</b:skin> by CTRL+F key easily now.

* Copy below code and paste before ]]</b:skin> 

#categories {
float: left;
width: auto;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1.2em;
background: url(http://lh5.googleusercontent.com/_H9-LynLLw60/TMCWT3eOVwI/AAAAAAAAALE/j9uePYKa5iI/blogging+search+engine.jpg) repeat-x;
}
#categories li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555; /*--Divider for each parent level links--*/
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
}
#categories li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
#categories li:hover { background: #1376c9 url(http://lh5.googleusercontent.com/_H9-LynLLw60/TMCYHAjjUoI/AAAAAAAAALI/ehYtMCBl-f4/topnav_search+engine.gif) repeat-x; }
#categories li span {
float: left;
padding: 10px 0;
position: absolute;
left: 0; top:35px;
display: none; /*--Hide by default--*/
width: auto;
background: #1376c9;
color: #fff;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#categories li:hover span { display: block; } /*--Show subnav on hover--*/
#categories li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
#categories li span a:hover {text-decoration: underline;}


* Now save your blogger template now.

* Again go to blogger DASHBOARD.

* Click in  design tab and you are here--->> Add new element.

* Now click in add GADGET which is below blogger HEADER don't click in sidebar ok

* When open new window select HTML/Javascript from list .

* When open blank box copy below code and paste in blank box.


<ul id='categories' style='margin-top:-27px;margin-bottom: 25px;'>
<li><a href='YOUR BLOG URL'>Home</a></li>
<li>

<a href='URL1'>TAB1 TITLE</a>
<!--Subnav Starts Here-->
<span>
<a href='SUB TAB1URL'>SUB TITLE1</a> |
            <a href='SUB TAB2URL'>SUB TITLE2</a> |
            <a href='SUB TAB3URL'>SUB TITLE3</a>
</span>
<!--Subnav Ends Here-->
</li>
<li><a href='URL2'>TAB2 TITLE</a></li>

<li><a href='URL3'>TAB3 TITLE</a></li>
<li><a href='URL4'>TAB4 TITLE</a></li>
<li><a href='URL5'>TAB5 TITLE</a></li>
<li><a href='URL6'>TAB6 TITLE</a></li>
</ul>

NOTE:- Now change line in above code with your own as TITLE AND IT'S URL Ok

* Now save your HTML/javascript . and you are done

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Blogger9:- Now add black navigation menu with blue hover effect in your blogger blog. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories