Monday, January 25, 2010

Nice CSS Horizontal Menu to blogger

If you want tip Nice CSS Horizontal Menu to blogger, follow this step.1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .
<style type='text/css'>
 #tabs20 {
 float:left;
 width:100%;
 background:#000;
 font-size:93%;
 line-height:normal;
 }
#tabs20 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
 }
#tabs20 li {
 display:inline;
 margin:0;
 padding:0;
 }
#tabs20 a {
 float:left;
 background:url(&quot;http://4.bp.blogspot.com/_4HKUHirY_2U/SwDTm3I-EiI/AAAAAAAAALs/CHbK3Jk9edo/left.gif&quot;) no-repeat left top;
 margin:0;
 padding:0 0 0 4px;
 text-decoration:none;
 }
#tabs20 a span {
 float:left;
 display:block;
 background:url(&quot;http://4.bp.blogspot.com/_4HKUHirY_2U/SwDTprizcnI/AAAAAAAAAL0/dklu1kGiQ8U/right.gif&quot;) no-repeat right top;
 padding:5px 15px 4px 6px;
 color:#FFF;
 }

#tabs20 a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
 color:#FFF;
 }
#tabs20 a:hover {
 background-position:0% -42px;
 }
#tabs20 a:hover span {
 background-position:100% -42px;
 }
</style>

Note : Please Host above 2 images yourself.

4.Save your template.

5.Now Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" from header section and add the code given below and click save.

<div id="tabs20">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>
7.Now you are done.It will look like this:
CSS Horizontal Menu
CSS Horizontal Menu For Website/blog.

9 Comments:

Indonesia Java International Destination | Leader Street said...

nice post...good luck

Hobby Blog said...

I like u post...

Rival Aditya said...

wah mantab de'... I LIKE This

merawat dan memperbaiki komputer said...

keep share...
thanks for info

aktifis sandal jepit said...

sudah dicoba,tapi ada masalah dengan widgetnya.gak bisa dibongkar pasang...
oke,matur tengkiyu atas infonya.segera di coba dulu kawan..

sound of classick said...

tips yang bermanfaat...
buat otak-atik blog malam ini..

merawat dan memperbaiki komputer said...

makasih infonya kawan....

Sharing ilmu said...

Great tutorial..
thanks bro..
do you wanna exchange link..?

khusnul said...

Waow...
sorry to late coming here.
Thank to all about your comment.

Terima kasih yang tak terucapkan....

Post a Comment

 
top