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>
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnZPVa_wIf0p81RP6R5mQ2ZfvY5b-nJlQTU24Y0x1HmRII2vs6beEhU5I-VtI6dMzQWhf8BTPv2Ko9h-z4BVmblemKCw5YA1TV4kVAXxVDpyZsTq2mbMcpe_WDBcoj2OXHIijaeZPSNI/") 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>
* Now sve your HTML/Javascript and you are done enjoy blog.
|
0 Responses So Far: