Add Jungle CSS Navigation Menu to Blogger / V1 1

Add Jungle CSS Navigation Menu to Blogger

Follow simple and easy step to adding this special menu to 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:90%;
	margin:25px auto;
}
#menu ul{
	list-style:none;
}
#menu li{
	display:block;
	float:left;
}
#menu li a{
	background:#749b10 url(http://santabanta.mywapblog.com/files/menu-bgm.gif) repeat-x;
	border:2px solid #80a225;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	height: 50px;
}
#menu li a span{
	color:#52651f;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}
#menu li a:hover{
	background:#e46825 url(http://santabanta.mywapblog.com/files/menu-hover.gif) repeat-x;
	border:2px solid #c04118;
	text-decoration:none;
}
#menu li a:hover span{
	color:#ffd9c7;
}
.current{
	background:#e46825 url(http://santabanta.mywapblog.com/files/menu-hover.gif) repeat-x;
	border:2px solid #c04118;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	cursor:pointer;
	font-weight:bold;
	height: 50px;
}
.current span{
	color:#ffd9c7;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}

* 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 choose HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div id="menu">
	<ul>
		<li class="current">Home<br /><span>takes you to<br /> home page</span></li>

		<li><a href="TAB1 URL HERE">TAB1 TITLE<br /><span>takes you to<br />about us page</span></a></li>		
		<li><a href="TAB2 URL HERE">TAB1 TITLE<br /><span>takes you to<br />products page</span></a></li>
		<li><a href="TAB3 URL HERE">TAB1 TITLE<br /><span>takes you to<br />partners page</span></a></li>		
		<li><a href="TAB4 URL HERE">TAB1 TITLE<br /><span>takes you to<br />contact page</span></a></li>

	</ul>
</div>

<div style="clear: both;"></div

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 this below blogger Header and again click to save and you are done.

CHEERS.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Add Jungle CSS Navigation Menu to Blogger / V1 ~