Hello friends now add stylish colorful navigation menu in your blogger blog easily.
PREVIEW:-
Follow simple and easy way to adding this navigation menu in 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 ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
PREVIEW:-
Follow simple and easy way to adding this navigation menu in 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 ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
#menu {
width : 660px;
height : 42px;
position : absolute;
left : 340px;
top : 125px;
}
#menu ul {
margin : 0;
padding : 0;
list-style-type : none;
}
#menu li {
float : left;
}
#menu li a {
background : #6abc45;
display : block;
width : 108px;
height : 32px;
text-decoration : none;
color : #fff;
text-align : center;
padding-top : 10px;
font-size : 95%;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
border-right : 2px solid #fff;
}
#menu li a:hover {
background : #ff8800;
}
#menu li a.active {
background : #ff8800;
}
#menu li a.disabled, #menu li a.disabled:hover {
color : #c0c0c0;
background : #ddd;
}
* 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 in your blogger 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">
<ul>
<li><a href="TAB1 URL HERE" class="active" >TAB1 TITLE HERE</a></li>
<li><a href="TAB2 URL HERE" >TAB2 TITLE HERE<</a></li>
<li><a href="TAB3 URL HERE" >TAB3 TITLE HERE<</a></li>
<li><a href="TAB4 URL HERE" >TAB4 TITLE HERE<</a></li>
<li><a href="TAB5 URL HERE" >TAB5 TITLE HERE<</a></li>
<li><a href="TAB6 URL HERE" >TAB6 TITLE HERE<</a></li>
</ul>
</div>
NOTE:-Remove highlighted Text in above code with your own ok.
* Now click to save your html/javascript and drag and drop this element below blogger header .
* Now click in save button now you are done.
|
0 Responses So Far: