horizontal navigation menu × tips trick blog × toutorial-blog

How to Add a Horizontal menu Version 2

Posted by comportech × 10:19 PM

>>>>>> first

1.Login to your blogger dashboard and go to Page Elements --&-- desing.

2.Click "Add a Gadget 'in the sidebar.

3.Select 'HTML / Javascript' and add one of the code given below

<br /> <style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9lh7L-3SCtkjsX51P8jhCQOOPeaBVgK7oEBSCI00651VlHBGQDIZhaIekiWJybtfJtDLbu1EZzBXem24mLT1sU9-TAfjiffoWkXNyzdln5XgcAZugP0L73Mc53ZVSxtCnJ7frwSQLb0/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYsg3XBWmDbvnloV9d66AIsRs7E_0_I9Ylb5AvWkLP97-Jb4GIuOlwDkjwVaemj8Zf0zxxXODWxbKNwosdzGWRC7u2_AhxmaAKhbIRAI9ZihUctuBxjCFJg0_R21kEQ9YN-1C2YEYfW0/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }      /* Commented Backslash Hack hides rule from IE5-Mac */      #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div id="tabs10"><ul><li><a href="#"><span>Link 1</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 2</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 3</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 4</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 5</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 6</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 7</span></a></li> </ul></div>

Stay Now Save

See the result you want to adjust the position of the In

attention

Replace Signs: # with your link

and Link 1 with your name Each menu
<a href="#"> <span> Link 1 </ span> </ a> </ li>

<a href="#"> <span> Link 2 </ span> </ a> </ li>

<a href="#"> <span> Link 3 </ span> </ a> </ li>

<a href="#"> <span> Link 4 </ span> </ a> </ li>

<a href="#"> <span> Link 5 </ span> </ a> </ li>

<a href="#"> <span> Link 6 </ span> </ a> </ li>

<a href="#"> <span> Link 7 </ span> </ a> </ li>

×

Share

Related Posts

0 comments