How To Add Super Horizontal” Navigation Menu to Blogger

How To Add Super Horizontal” Navigation Menu to Blogger



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

2.Click on 'Add a Gadget' on the sidebar.

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

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwVDUQI3oLEJEQj24czS2LdbxHCCCoaa_Tcn-vG1tFyqbWiTbBtqyciBS-6G8Z-zr957-qozfVeSpJi5PqOXyUdg6qx03jFk8rVQICboOz6VPz_nbXJQ6I2x9NooTTNiTmdz81cxL5mw/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLhMbUzfMjJAxAm89gV7yatJfwHaZD5havtKiFhDKWjNP464D4jEuRlOyU9p9T9tN4gis2oEUMR8RxikvjlsDxwfE2kUwZX96wz7gOUqbh1ta-MmQBdsiyxV2bPsu3ntxosGyClZYRt8/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Note: Replace the hash (#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc with your Page Titles.

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

4.Now save your "HTMl JavaScript" you are done..