domingo, 12 de mayo de 2013

Menu Horizontal De Navegacion Para Blogger

Leave a Comment
Menu Horizontal De Navegacion para blogger
Si deseas anadir mas informacion e enlaces a otras paginas dentro de la pagina de tu blog puedes hacerlo implementando el siguiente codigo a la seccion de gadget de la barra del lado de tu blog,siguiendo estos simples pasos .Puedes customizarlo a tu gusto dandole el color ,tamano,letra,cantidad de enlaces,,,etc.

Como Añadir Super Horizontal  Navigation Menu a Blogger

1.Entre a la interface de blogger y vaya a Diseño>>Elementos de Paginas

2.Da Click en 'Añadir un Gadget' en la barra del lado

3.Selecciona 'HTML/Javascript' ay añade el codigo de abajo.


<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/AVvXsEgigOL6pR4eMoiTvdN4yDKEsi1mcPCbRcgWq8K1VuJyuWBzm3h6g5ie5i6k44iMbfMYcsMe4mW_eaOk_GIsVMj4XVZymsi3eq2jUvUkhVTcqUEuSUhXE_VZkCqVd1eD_gTWftyPcDeHc-0/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/AVvXsEj7ucABmVCfU8IPtf_V4Lr-Ha8fxIKmwjWEPrmC1aMMDHlO2yrELbdFlOcMtIY5YTg7OJv4LlG4kZv-MFfJCigGXDnW7P06kfnfcKlkAKHrUr6QCrvdryND8RfFlJYG5J7lZh6eEPySxm4/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>


Nota: Reemplace el signo (#) con el enlace o direccion /URL de la pagina a diregir y reemplace
Enlace1, Enlace2, Enlace3 etc con el titulo de la pagina.

<li><a href="#" ><span>Enlace 1</span></a></li>
<li><a href="#" ><span>Enlace 2</span></a></li>

<li><a href="#" ><span>Enlace 3</span></a></li>
<li><a href="#" ><span>Enlace 4</span></a></li>
<li><a href="#" ><span>Enlace 5</span></a></li>

<li><a href="#" ><span>Enlace 6</span></a></li>
<li><a href="#" ><span>Enlace 7</span></a></li>

4.Ahora guarda tu "HTMl JavaScript" y Listo
Enhanced by Zemanta
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario