Mostrando las entradas con la etiqueta menu horozontal para blog de blogger. Mostrar todas las entradas
Mostrando las entradas con la etiqueta menu horozontal para blog de blogger. Mostrar todas las entradas

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
Read More