Add Ding-Dong Navigation menu to Blogger.
Follow simple and easy step to adding this menu to 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.
* Now find this code ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
Follow simple and easy step to adding this menu to 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.
* Now find this code ]]</b:skin> by CTRL+F key.
* Copy below code and paste before ]]</b:skin>
#navigation {
height : 27.5%;
margin-top : 0;
font-size : 12px;
}
#navigation ul, #navigation li {
list-style-type : none;
display : inline;
margin : 0;
padding : 0;
}
#navigation a:link, #navigation a:visited {
float : left;
display : block;
height : 33px;
line-height : 33px;
text-decoration : none;
background-image : url(http://santabanta.mywapblog.com/files/topmenu.jpg);
text-align : center;
width : 113px;
text-transform : none;
background-repeat : no-repeat;
overflow : hidden;
margin : 0 3px 0 0;
}
#navigation a:hover, #navigation li#current a {
font-weight : 700;
padding-left : 0;
background-image : url(http://santabanta.mywapblog.com/files/topmenu.jpg);
background-repeat : no-repeat;
margin-top : 5px;
}
* 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 click in HTML/Javascript from list.
* When open new blank box copy below code and paste in blank box.
<table><tr><td width="56"></td>
<td width="740"><div id="navigation"> <div class="moduletable">
<ul id="mainlevel-nav"><li><a href="ADD TAB1 URL HERE" >TAB1 TITLE HERE</a></li><li><a href="ADD TAB2 URL HERE" class="mainlevel-nav" >TAB2 TITLE HERE</a></li><li><a href="ADD TAB3 URL HERE" class="mainlevel-nav" >TAB3 TITLE HERE</a></li><li><a href="ADD TAB4 URL HERE" class="mainlevel-nav" >TAB4 TITLE HERE</a></li><li><a href="ADD TAB5 URL HERE" class="mainlevel-nav" >TAB5 TITLE HERE</a></li><li><a href="ADD TAB6 URL HERE" class="mainlevel-nav" >TAB6 TITLE HERE</a></li></ul> </div>
</div></td></tr></table>
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 below blogger header and again click to save .
* Now you are done.
|
0 Responses So Far: