Blogger9:- Now add css black rounded hover effect naviagtion menu in your blogger. 0

| | , ,

Hi friends now add this best black rounded hover effect css navigation menu in your blogger easily.




Follow simple step to adding this css 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.

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

#catmenucontainer{
display:block;
width:100%;
overflow:hidden;
background:url("http://3.bp.blogspot.com/_b8IA1ajBJG8/TDLpI9SDJ5I/AAAAAAAABQg/wNXgZEy7Stc/global-sprite.png") repeat-x scroll 0 -357px #E3E3E3;
border-bottom:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
height:35px;
position:relative;
}
#catmenu{
margin: 0px 10px;
padding: 0px;
width:940px;
height:88px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 5px 0px;
padding: 0px 5px;
line-height:20px;
border-left:1px solid #FFFFFF;
border-right:1px solid #CCCCCC;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color:#FFFFFF;
display:block;
display: block;
margin: 0px;
padding: 0px 10px ;
color:#4E4E4E;
font:bold 120%/20px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 1px #FFFFFF;height:23px;
}
#catmenu li a:hover {
background:#282828;
color: #fff;
margin: 0px;
padding: 0px 10px ;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: none;
}
#catmenu li.current_page_item a{
background:#7a8c12;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 1px 1px 1px #535F0C;
}

* Now save your blogger Template.

* Now again go to your blogger Dashboard.

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

* Now click in Add gadget which is below your blogger Header. if you Click Add gadget i sidebar you should Drag and drop your gadget below blogger Header ok.

* When open new window click in HTML/javascript From list.

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

<div class='clear'></div>
<div id='catmenucontainer'>
<div class='catmenu' id='catmenu'>

<ul>
<li><a class='home' href='YOUR BLOG ADDRESS HERE'>Home</a></li>
<li><a href='TAB URL1'>TAB1 TITLE</a></li>
<li><a href='TAB URL2'>TAB2 TITLE</a></li>
<li><a href='TAB URL3'>TAB3 TITLE</a></li>
<li><a href='TAB URL4'>TAB4 TITLE</a></li><li><a href='TAB URL5'>TAB5 TITLE</a></li><li><a href='TAB URL6'>TAB6 TITLE</a></li>
</ul>
</div>
</div>

NOTE:- Now change Highlighted text in above code with your own ok as BLOG URL TAB URL ,TAB TITLE etc.

* Now sve your HTML/Javascript and you are done enjoy blog.

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

0 Responses So Far:

Categories

Select Your Categories