How to add Orangy navigation menu in blogger/blogspot. 0

| | ,

How to add Orangy navigation menu in blogger/blogspot.





Follow simple and easy step to adding this navigation menu in 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.

* After Above step find this code ]]</b:skin> By CTRL+F key.

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

#menu_wrapper {
width: 100%;
background: url(http://4.bp.blogspot.com/-2enPIPAguPI/TgBW1lTfbtI/AAAAAAAABaA/oWQQVQUbTxc/s1600/buymythemes.com_menu.png) no-repeat top center;
}
#menu {
width: 980px;
height: 40px;
margin: 0 auto;
}
ul.navigation {
width: 800px;
list-style: none;
margin: 0 auto;
padding: 0;
}
ul.navigation li {
display: inline;
margin: 0px;
padding: 0;
}
ul.navigation a {
margin-left:10px;
float: left;
display: block;
height: 40px;
padding: 8px 15px 0;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
ul.navigation a:hover, ul.navigation a.selected {
background: url(http://1.bp.blogspot.com/-aDJiVnhrg_0/TgBZcoOEXRI/AAAAAAAABaQ/ZTeVU6zoJYY/s1600/buymythemes.com_menu_hover.png) repeat-x top center;
color: #FFFF00;
}
ul.navigation a:focus {
outline: none;
}

* 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_wrapper'>
<div id='menu'>
<ul class='navigation'>
<li><a class='selected' href='TAB1 URL HERE'>TAB1 TITLE HERE<span class='ui_icon home'></span></a></li>
<li><a href='TAB2 URL HERE'>TAB2 TITLE HERE<span class='ui_icon aboutus'></span></a></li>
<li><a href='TAB3 URL HERE'>TAB3 TITLE HERE<span class='ui_icon services'></span></a></li>
<li><a href='TAB4 URL HERE'>TAB4 TITLE HERE<span class='ui_icon gallery'></span></a></li>
<li><a href='TAB5 URL HERE'>TAB5 TITLE HERE<span class='ui_icon contactus'></span></a></li>
</ul>
</div>
</div>

NOTE:- Remove Highlighted Text in above code with your own ok

* Now click to save your HTML/javascript and after saving drag and drop this element below blog header.

* Now again click to save button and you are done. Cheers

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: How to add Orangy navigation menu in blogger/blogspot. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories