Como poner subpestañas en blogger

¡Hola blogger!
Hoy os traigo un tutorial para blogger "Como poner subpestañas en blogger", este tutorial me lo han pedido por correo electrónico, si no sabes como hacer algo puedes escribirme a eresblogger@gmail.com.

Normalmente si es algo cortito os contesto en el mismo correo, pero cuando es algo bastante largo me trae más cuenta hacer el post, porque tardo menos y además os puede servir a otras bloggers.

como poner subpestañas en blogger


Como poner subpestañas en blogger:

1. Os aviso que no es un tutorial fácil, pero si pones los 5 sentidos te saldrá perfectamente. Yo lo he realizado en un blog de pruebas porque en este no la necesito.

2. Lo primero que tienes que hacer es eliminar las paginas que ya tienes y después vamos a blogger/diseño/ añadir html y pegamos esto encima de las entradas, donde tenias antes las paginas antiguas:

<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='Dirección Url'>Pestaña1</a></li>
<li>
<a href='
#'>Pestaña con subpestaña 1</a>
<ul>
<li><a href='Direccion URL
'>Pestaña 1</a></li>
<li><a href='Dirección URL
'>Pestaña 2</a></li>
<li><a href='Dirección URL
'>Pestaña 3</a></li>
<li><a href='Dirección URL
'>Pestaña 4</a></li>
</ul>
</li>
<li>
<a href='
#'>Segunda subpestaña </a>
<ul>
<li><a href='Dirección URL
'>Pestaña 1</a></li>
<li><a href='Dirección URL
'>Pestaña 2</a></li>
<li><a href='Dirección URL
'>Pestaña 3</a></li>
<li><a href='Dirección URL
'>Pestaña 4</a></li>
</ul>
</li>
<li><a href='Dirección URL
'>Pestaña 1</a></li>
</ul>
</div>
</div>

Solo tenéis que sustituir "Dirección URL" por la url a la que queréis enviar a vuestros seguidores y en Pestañas le ponéis el nombre de esa pagina. 

Aunque así parece un poco difícil a medida que lo vayáis poniendo en practica y vayáis viendo como queda os será mucho más fácil. Cuando termines de poner todas las url guarda y listo.

Varios consejos: No pongas titulo, mejor sin nombre, que se ve muy feo si se lo pones.

Yo os he puesto pestañas variadas, pero como cada blog es un mundo, si quieres añadir una pestaña mas, normal sin categorías, solo tienes que pegar:

<li><a href='Dirección URL'>Pestaña 1</a></li>

y si lo que quieres es añadir otra con subpesñas pues pegas:

<ul>
<li><a href='Dirección URL'>Pestaña 1</a></li>
<li><a href='Dirección URL'>Pestaña 2</a></li>
<li><a href='Dirección URL'>Pestaña 3</a></li>
</ul>
</li>

Y si quieres eliminar alguna, pues eliminas lo mismo.

Después de esto nos quedará descolocado más o menos así:
subpestañas blogger

Para ordenarlo cuando hayas terminado esta parte vamos a plantilla/personalizar/avanzado, añadir Css y pegamos:

/* Menu paginas blogger
----------------------------------------------- */
.tabs-inner .section:first-child ul { margin-top: 2px;}
.tabs-inner .widget ul { background: #ffffff; text-align: center !important;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000; /*Color texto al pasar el raton*/
background-color: #000000; /*Color fondo pestañas al pasar el raton*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}

#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 0px solid #F6CEF5; /*Aumenta el px si quieres borde*/
border-bottom: 0px solid #F6CEF5; /*Aumenta px si quieres borde debajo*/
background: #F6CEF5; /*El color del fondo de las pestañas*/
}
#NavMenuleft {
width: 700px; /*El largo del menu de blogger*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:transparent;}

#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
font: normal normal 16px Arial; 
color: #000000; /*Color del texto*/
display: block;
margin: 0;
padding: 12px 16px 12px;
}
#nav li a:hover, #nav li a:active {
color: #F6CEF5; 
margin: 0;
padding: 12px 16px 12px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px Arial; /*Fuentes y tamaño*/
background: #F6CEF5; /*Fondo de las subpestañas*/
width: 140px; /*Tamaño*/
color: #000000; /*Texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #F6CEF5; /*Fondo subpestaña*/
color: #000000; /*Texto subpestaña*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }

Simplemente vas cambiando a tu gusto cada cosa como te he explicado al lado de cada una de ellas, guardamos y se acabo. Los colores html puedes cogerlos de http://html-color-codes.info/codigos-de-colores-hexadecimales/

Es un tutorial blogger un poco lioso pero que cualquiera con un poquito de paciencia puede hacer.

¿Que te ha parecido este tutorial blogger para poner subpestañas en blogger?




Suscribete

melyssa

15 comentarios:

  1. Gracias por los truquillos. Yo tengo unas pestañas y no sé como acceder a ellas para enlazar. Así que menudo desastre. ;)

    ResponderEliminar
    Respuestas
    1. Pero tu no tienes pestañas de blogger, lo que tienes es la barrita superior, ¿Te refieres a que por ejemplo en la zona premio entras y no te sale nada no? Si es eso, es algo totalmente diferente, pero facilisimo de solucionar con este tutorial http://eresblogger.blogspot.com.es/2014/09/barra-en-la-parte-de-arriba-de-blogger.html

      Eliminar
  2. Llevo mucho tiempo peleándome con mi plantilla para poner así el menú!! Tengo que probarlo sin duda!! Ojalá me funcione!! Da igual que lanplantilla sea de blogger o de otro diseñador??? Muchas gracias! Besitos!

    ResponderEliminar
  3. Llevo mucho tiempo peleándome con mi plantilla para poner así el menú!! Tengo que probarlo sin duda!! Ojalá me funcione!! Da igual que lanplantilla sea de blogger o de otro diseñador??? Muchas gracias! Besitos!

    ResponderEliminar
  4. Lo estoy probando y sí que me funciona, lo que pasa que ahora en el móvil que hay código html de la plantilla para móvil, me ha desaparecido tanto el menú anterior como este nuevo!!!

    ResponderEliminar
    Respuestas
    1. ¿Y tienes puesto bien el modo móvil? Es decir ves a plantilla, movil y pinchas en la rueda, tienes que tener seleccionado "Si mostrar plantilla para moviles".

      Eliminar
    2. Es que la plantilla es responsive y se va adaptando al tamaño de la pantalla, sí que tengo activado lo de la plantilla apra moviles, de hecho ahora mismo he probado a cambiarla por otra a ver que pasaba pero al no tener el menú "pages" no me aparece nada. Y desde el ordenador con la ventana maximizada se ve el menú sin problemas, pero en cuanto empeizas a minimizarla jugando con ella para ver el efecto responsive de que se va empequeñeciendo todo y adaptando al tamaño de la ventana, el menú de arriba de pestañas desaparece, cosa que no me ocurría con el menú "Pages".... ainssss, ojalá hay auna solución y no tenga que volver al menú anterior!! con el tiempo que llevaba queriendo poner pestañas!!! :(

      Eliminar
    3. Antes al reducir la pantalla como tenía el menú de PAges que venía por defecto con la plantilla al encoger la pantalla o con Tablet, etc, se comprimía el menú de esto que queda en 3 rallitas y desde ahí despliegas... pero al quitar las PAges ya no aparece... no se si me explico....

      Eliminar
    4. ¿Y por que lo tienes puesto arriba de todo en vez de donde se supone que deben de estar normalmente las paginas? Puede que no se te vea en el movil por eso.

      Eliminar
  5. como me gustan tus explicaciones, van genial

    ResponderEliminar