Top Navigation Menu Bar Added
If you want the code jump right in to allblogtools.com for the original source. Or simply copy from here.
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>
Thats it, have fun and im out!
