POST ACTUALIZADO Y COMPLETADO (Diciembre 2016) Debido a la migración de mi blog a wordpress , el texto y código de este post tenía errores de formato. He aprovechado para actualizarlo y añadirle información extra. Espero que te sea de utilidad para mejorar el diseño y organización de tu blog. Un saludo – Ana María Almendro Oliva

​Hola! soy Cintia de Creaypersonalizatublog soy una adicta a blogger,diseño gráfico y todo lo relacionado con el mundo 2.0

y suelo pasarme horas delante del ordenador jugando con fuentes,adobe ilustrator y photoshop ¡ese es mi momento del día!
Hace algún tiempo nos pusimos manos a la obra con Ana para colaborar juntas con nuestros blogs,estoy encantada de que ella haga post de seo para mi blog y yo os enseñare tutoriales para blogger que espero que os resulten útiles y que os sean de ayuda.

 

 


Hoy traigo un tutorial donde os voy a enseñar a conseguir un menú desplegable para vuestro blog.
Y veréis que es muy sencillo! Veamos el paso a paso…

 

COMO INSTALAR UN MENÚ DESPLEGABLE EN TU BLOG

PASO 1-Lo primero que vamos a hacer es ir a diseño→añadir  gadget y lo haremos en el gadget vació que hay debajo de la  cabecera o en su defecto lo creamos y lo arrastramos justo debajo del gadget cabecera.

PASO 2-Pinchamos en Html/Javascript e insertamos el código que encontramos justo debajo de la captura de pantalla.

 

 

<div id=’navmenu’>
<div id=’navmenuleft’>
<ul id=’nav’>
<li><a href=‘url‘>Pestaña1</a></li>
<li>
<li><a href=’url‘>Pestaña2</a></li>
<li>
<a href=’#’>Pestaña3</a>
<ul>
<li><a href=’url‘>Subcategoría 1</a></li>
<li><a href=’url‘>Subcategoría 2</a></li>
<li><a href=’url‘>Subcategoría 3</a></li>
<li><a href=’url‘>Subcategoría 4</a></li>
</ul>
</li>
<li>
<a href=’#’>Pestaña4</a>
<ul>
<li><a href=’url‘>Subcategoría 1</a></li>
<li><a href=’url‘>Subcategoría 2</a></li>
<li><a href=’url‘>Subcategoría 3</a></li>
<li><a href=’url‘>Subcategoría 4</a></li>
<li><a href=’url>Subcategoría 5</a></li>
</ul>
</li>
<li><a href=’url>Pestaña 5</a></li>
</li>
<li><a href=’url‘>Pestaña 6</a></li>
</ul>
</div>
</div>

 

 

Debemos modificar la zona señalada en color azul con la url donde queremos que nos lleve al pinchar en la pestaña y la zona marcada en rosa debemos modificarla con el nombre real que queramos que tenga la pestaña en el menú.

 

Nota: Las líneas que llevan # en lugar de una url, es porque es una categoría padre que no lleva a ningún sitio sino que solo sirve para clasificar las suspestañas.
Si se necesitan más pestañas  debéis escribir este código <li><a href=’URL‘>Pestaña</a></li>
y Si necesitáis una pestaña con subcategorias el código a añadir seria el siguiente:
<li>
<a href=’#’>Pestaña desplegable</a>
<ul>
<li><a href=’URL’>Subcategoría 1</a></li>
<li><a href=’URL’>Subcategoría 2</a></li>
<li><a href=’URL’>Subcategoría 3</a></li>
<li><a href=’URL’>Subcategoría 4</a></li>
</ul>
</li>

 

​PASO 3→y por ultimo tan solo nos queda darle forma al menú,para ello vamos a ir a Plantilla→personalizar→Avanzado►añadir css​ y añadimos el código Css

 

 

 

/* Menu desplegable
———————————————– */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.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 del texto de las pestañas al pasar el ratón por encima*/
background-color: #f2d4c4; /*Color del fondo de las pestañas al pasar el ratón por encima*/
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 #64b6bb; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 0px solid #64b6bb; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #64b6bb; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 980px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 3px ; /*alto del fondo del menu*/
background:#64b6bb;/*color de fondo del menú completo*/
}
#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 18px ‘Georgia’, Trebuchet, Verdana, sans-serif; /* Tipo de letra */
color: #ffffff; /* Color de la letra */
text-transform: uppercase;/*poner texto en mayúsculas, sino lo quieres borra esta línea*/
border-left: 0px solid #b7d6ce; /* Borde izquierdo de la celda */
border-right: 0px solid #b7d6ce; /* Borde derecho de la celda */
}
#nav li a:hover, #nav li a:active {
color: #000000; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px arial; /*Tamaño y tipografías de las subpestañas*/
background: #ffffff; /*Color del fondo de las subpestañas*/
border-top:2px solid #cccccc; /*borde superior de las suspestañas, sino lo quieres borra esta línea*/
width: 150px; /*Tamaño de éstas*/
color: #000000; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #cccccc; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #000000; /*Color del texto de las subpestañas al pasar el ratón por encima*/
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; }

 

►​Solo queda modificar

los colores,

los tamaños y

fuentes: Recuerda que para poner la fuente que quieras debe aparecer en las opciones que ya vienen instaladas por defecto. Puedes consultar el aspecto y nombre si vas a Plantilla→personalizar→avanzado y miras en cualquier opción que te deje personalizar el texto.

fuentes en blogger

Si quieres instalar nuevas fuentes desde gooogle fonts en tu blogs, visita este post.

Si véis que queda una raya blanca bastante molesta debéis modificar ​esta linea del código

width: 980px; /*Ancho del menú*/

​y modificar el ancho hasta que este desaparezca.

 

Si queréis ver el resultado final podéis pinchar aquí    Demo

 ¿Os ha gustado como se ve en mi blog de pruebas? Pues si copiáis los códigos de arriba os quedará igualito. No obstante me gustaría advertirte, que este tutorial no es efectivo en muchas de las plantillas que se descargan de sitios ajenos a Blogger ya que puede causar incompatibilidades con su código y organización.

 

​Espero que este tutorial os haya sido de ayuda! recuerda que puedes ver mas tutoriales como este pinchando aquí! ​

 

​y antes de irme! darle las gracias a Ana por dejarme participar en su blog! ;)​
¿Os a sido útil?¿Lo instalaras en tu blog?
Me encantaría saberlo!

 

 

 

♥♥♥♥♥♥♥♥♥♥♥♥♥

 

¿Qué os ha parecido el tutorial de Cintia? A mi super útil. Yo tengo pensado hacer algo así pero en la baja fija superior de mi blog. De nuevo te doy la gracias por compartir tus conocimientos en mi blog y por darme la oportunidad de escribir en el tuyo.

 

Podéis dejar en los comentarios vuestras peticiones para nuevos tutoriales. Un besito a todos y si os gusta la sección, ¿me ayudáis compartiendo para que llegue a más gente?

 

 

 

 

¿Te ha sido de utilidad el artículo?
(Votos: 2 Promedio: 5)

Pin It on Pinterest