Add Jungle CSS Navigation Menu to Blogger
Follow simple and easy step to adding this special menu to blogger ---->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger template.
* Now find this code ]] by CTRL+F key.
* Copy below code and paste before ]]
#menu{
width:90%;
margin:25px auto;
}
#menu ul{
list-style:none;
}
#menu li{
display:block;
float:left;
}
#menu li a{
background:#749b10 url(http://santabanta.mywapblog.com/files/menu-bgm.gif) repeat-x;
border:2px solid #80a225;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu li a span{
color:#52651f;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu li a:hover{
background:#e46825 url(http://santabanta.mywapblog.com/files/menu-hover.gif) repeat-x;
border:2px solid #c04118;
text-decoration:none;
}
#menu li a:hover span{
color:#ffd9c7;
}
.current{
background:#e46825 url(http://santabanta.mywapblog.com/files/menu-hover.gif) repeat-x;
border:2px solid #c04118;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 50px;
}
.current span{
color:#ffd9c7;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}* Now click to save your blogger Template.
* Again go to your blogger Dashboard and click in design tab.
* Now you are here --->>>> Page Element.
* Click in add Gadget which is your blogger sidebar.
* When open new window choose HTML/javascript from list.
* When open new blank box copy below code and paste in blank box.
NOTE:- Remove Highlighted text from above code with your own ok.
* Now click to save your HTML/javascript and after saving this element DRAG AND DROP this below blogger Header and again click to save and you are done.
CHEERS.
0 comments:
Post a Comment