How to add Newbie CSS navigation menu to blogger . 0

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 ]]</b:skin> by CTRL+F key.

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

#menu {
width:922px;
height:51px;
padding:0 20px;
margin:2px auto 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxX372CocUxmunVE0PNLuF4HnXV9ZgzS8Jf4hEitfmzu1YB7RHCgf-IgU5R8dmobwy0HHCke4JsYmkSMMf8bJ5sgJn9kXESgJ856x9ddLgelRU2zxsF2HQdfF8sJP8_jGUrke4j2cJ4c/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/AVvXsEjRozHY9AMXRyo-BcnbMDdgvpKNRGtCAA0jbC6Cb2ruGfIPaRFhAdLUEkXFgSl7YtD2ug0EwqP8CaCa-xVsauzRJsDXiM7_LDFBcazdIc6dun57nxp3iejHogWdEVzHPHUhIPN5AH167N4/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/AVvXsEjRozHY9AMXRyo-BcnbMDdgvpKNRGtCAA0jbC6Cb2ruGfIPaRFhAdLUEkXFgSl7YtD2ug0EwqP8CaCa-xVsauzRJsDXiM7_LDFBcazdIc6dun57nxp3iejHogWdEVzHPHUhIPN5AH167N4/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.

<div id='menu'>
<li><a class='home' href='/' rel='nofollow' title='Home'>Home</a><div class='leftback'></div></li>
<li><a class='menu-item' href='TAB1 URL HERE' rel='nofollow' title='title1'>TAB1 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB2 URL HERE' rel='follow' title='title2'>TAB2 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB3 URL HERE' rel='nofollow' title='title3'>TAB3 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB4 URL HERE' rel='nofollow' title='title4'>TAB4 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB5 URL HERE' rel='nofollow' title='title5'>TAB5 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB6 URL HERE' rel='nofollow' title='title6'>TAB6 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB7 URL HERE' rel='nofollow' title='titl7'>TAB7 TITLE HERE</a></li>

</div>

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.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: How to add Newbie CSS navigation menu to blogger . ~