How to add Newbie CSS navigation menu to blogger .
Follow simple and easy step to adding this menu to your 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 ]] by CTRL+F key.
* Copy below code and paste before ]]
#menu {
width:922px;
height:51px;
padding:0 20px;
margin:2px auto 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oRsU1ADfJYhW_IsK7Jn10hh96JVAQotLvTKkd8K20ki6UoDnSN_hC3S4tBpU0aCGMnnmurvCCcJTxdAfPrNwge-NV9JabzO8G5aoVru0p3VtNl1kSBa_y5dONIMcgK4Nj4DLqGMiDTc/s1600/menu-bg.png) no-repeat;
text-transform:uppercase;
overflow:hidden;
}
#menu li {float:left;list-style:none; margin:7px 5px;}
.home {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5YSPQo7RVLrfLFJMb9ap0N5OPBwVx40FTereUhrF99eQtMN22TAjQMd4EsKusW0RSZub5SMobcGd0psZAp3VKY7tAgWqnlfEswEipVrCovBkcOJKYawS2ZUJfcVZTIcOQ5EtF-GHbfhg/s1600/link-active-bg.png) no-repeat left top;
color:#555;
float:left;
display:block;
font-weight:bold;
height:15px;
padding:10px 0px 10px 15px;
text-decoration:none;
font-size:12px;
}
.menu-item:hover {
background: #fff;
color:#555;
float:left;
display:block;
font-weight:normal;
height:15px;
padding:10px 15px;
text-decoration:none;
font-size:12px;
-moz-border-radius:5px;
}
.leftback {
float:right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5YSPQo7RVLrfLFJMb9ap0N5OPBwVx40FTereUhrF99eQtMN22TAjQMd4EsKusW0RSZub5SMobcGd0psZAp3VKY7tAgWqnlfEswEipVrCovBkcOJKYawS2ZUJfcVZTIcOQ5EtF-GHbfhg/s1600/link-active-bg.png) no-repeat right bottom;
width:15px;
height:35px;
margin:0;
padding:0;
}
.menu-item {
color:#555;
float:left;
display:block;
font-weight:bold;
height:15px;
padding:10px 15px;
text-decoration:none;
font-size:12px;
}
#menu a {
color:#555;
}
a.home {
color:#fff;
text-decoration: none;
}
#menu a:hover {
color:#555;
}* Now click to save your blogger Template .
* Again go to your bogger Dashboard and click in Design tab.
* Now you are here --->>>> Page element.
* Click in Add Gadget which is in your blog Sidebar,
* When open new window click in HTML/javascript from list.
* When open new blank box copy below code and paste in blank box.
NOTE:- Remove highlighted Text in above code with your own ok.
* Now click to save your HTML/javascript and after saving this element drag and drop below blogger header and again click to save button and you are done. CHEERS.
0 comments:
Post a Comment