Thursday 18 August 2011

How to Add Dolphin Navigation menu to blogger.

How to Add Dolphin Navigation menu to blogger.





Follow simple and easy step to adding ths 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 </head> by CTRL+F key.

* Copy below code and paste before </head>

<style type="text/css">
<!--
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://santabanta.mywapblog.com/files/dolphin-bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://santabanta.mywapblog.com/files/dolphin-bg-over.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://santabanta.mywapblog.com/files/dolphin-left-on.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://santabanta.mywapblog.com/files/dolphin-right-on.gif) no-repeat top right;height:33px;}
-->
</style>
 
* 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 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="dolphincontainer">
	<div id="dolphinnav">
		<ul>
			<li><a href="TAB1 URL HERE" title="css menus"><span>TAB1 TITLE HERE</span></a></li>
			<li><a href="TAB2 URL HERE" title="css menus" class="current"><span>TAB2 TITLE HERE</span></a></li>
			<li><a href="TAB3 URL HERE" title="css menus"><span>TAB3 TITLE HERE</span></a></li>

			<li><a href="TAB4 URL HERE" title="css menus"><span>TAB4 TITLE HERE</span></a></li>
			<li><a href="TAB5 URL HERE" title="css menus"><span>TAB5 TITLE HERE</span></a></li>
		</ul>
	</div>
</div>
NOTE:- Remove highlighted text from above code with your own ok.

* Now click to save your HTML/javascript and now you are done.
CHEERS. Related Posts Widget for Blogger

0 Responses to “How to Add Dolphin Navigation menu to blogger.”

Post a Comment

All Rights Reserved pkcompany | Blogger Template by pkcompany
Sponsored by pkecompany, clickemag, eMAG