Top Navigation Menu Bar Added

1) Go to Layout >> Edit HTML >> tick on Expand Widget Templates and find this code

</b:skin>

2) Paste this codes below just before the code

/*TOP NAVIGATION BAR URL: http://www.timugon.com/ */

.basictab{

padding: 3px 0;

margin-left: 0;

font: bold 12px Verdana;

border-bottom: 1px solid gray;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu*/

}

.basictab li{

display: inline;

margin: 0;

}

.basictab li a{

text-decoration: none;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid gray;

border-bottom: none;

background-color: #f6ffd5;

color: #2d2b2b;

}

.basictab li a:visited{

color: #2d2b2b;

}

.basictab li a:hover{

background-color: #DBFF6C;

color: black;

}

.basictab li a:active{

color: black;

}

.basictab li.selected a{ /*selected tab effect*/

position: relative;

top: 1px;

padding-top: 4px;

background-color: #DBFF6C;

color: black;

}


3) Save template

4) Now, go to your Blogger Dashboard, Layout >> Page Elements >>and now above blog posts area, click add gadget,

5) Pick add HTML/Javascript and paaste this following codes

<ul class="basictab">

<li class="selected"><a href="http://www.timugon.com">TIMUGON.COM</a></li>

<li><a href="XXXX.html(paste your url here)">ABOUT</a></li>

<li><a href="XXXX.html(paste your url here)">EDIT HERE</a></li>

<li><a href="http://www.timugon.com/2009/02/circle-of-friends.html">EDIT HERE</a></li>

<li><a href="http://xxpasteyoururlherexx"><img border="5" alt="Subscribe to RSS" width="30" src="http://i.drunk.googlepages.com/rss_left.png" height="25"/></a></li>

<li><a href="http://twitter.com/gagaukon"><img border="5" alt="Hey! Im on Twitter" width="30" src="http://i.drunk.googlepages.com/left01.png" height="25"/></a></li>

</ul>