Personaliza tu Blog: Menú con Sub-Secciones

9 Comments , , , , Edit
Por Makita desde Chile 

Algunas de las lectoras que han escrito a BeBloggera por ayuda en la personalización de sus blogs, han preguntado por el menú que maneja las distintas secciones de nuestro blog, hoy las ayudaré con eso para que todo les resulte mucho más ordenado.

Menú con Buscador

Lo primero que deben hacer es habilitar sus plantillas a que soporten este tipo de menús (CSS) por lo que deben ir a Plantilla->Edición HTML y sin expandir los artilugios buscar lo siguiente:

 <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>

 Deben eliminar lo que esta destacado y buscar nuevamente si ese extracto se encuentra en el código, si es así, deben eliminarlo también.

 Luego hay que buscar /* Tabs y reemplaza todo hasta /* Headings con lo siguiente:

#crosscol ul {
z-index:200;
padding:0 !important;
}

#crosscol li:hover {
position:relative;
}
#crosscol ul li {
padding:0 !important;
}
.tabs-outer {
z-index:1;
}:

Te debe quedar así:

/* Tabs
----------------------------------------------- */
#crosscol ul {
z-index: 200;
padding:0 !important;
}
#crosscol li:hover {
position:relative;
}
#crosscol ul li {
padding:0 !important;
}
.tabs-outer {
z-index:1;
}:
/* Headings
----------------------------------------------- */

Con esto cualquier menú con subpestañas debería funcionar correctamente en las plantillas de Blogger.... ahora a insertar nuestro menú.

Se debe buscar en el código ]]></b:skin> y antes de él debes pegar:

* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAUZWRXL-smn7HuCi49maFyl3G4KFqpiE2QJO1wYb-k71E42t_QfLrzCElmOoGxoEyTYmbKqHdc9BC45ZoAUg4v7VAZgc9r7MqmeQ2x2gtoPpm7JiH6M1nqcO0xd_g38TSW5a7Smbe5iU/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pestañas al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAVuBpV1pJf8VmCRMUBqh-jLpbm-eyz8-2HhvSLMR88C1EvBvem2eHQxHmrOvcFNySnIU8AuWo8B78iBRLwmw5wOGhbi9e-Z6U3VZItdMt-U9mtpvBIPaHbpip10fZCqdNbqvo37adO70/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Puedes modificar los campos que estan destacados para personalizarlos y que se adapten al estilo de tu blog, luego debes guardar la plantilla. En este punto aún no podrás ver los resultados ya que solo son los estilos.

Ahora vamos a agregar el menú en el blog.

Ve a Diseño y agrega un gadget HTML/JavaScript, luego pega el siguiente código que corresponde a la estructura que tendrá el menú:

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
<li><a href="URL del enlace">Pestaña 3.4</a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>

</ul>

<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</div></div>

Aquí puedes empezar a jugar, se pueden agregar o quitar pestañas, según tus necesidades.

En "URL del enlace" va la dirección que quieras que se acceda al presionar, donde dice "Pestaña" agregas el nombre que desees.

Recuerda guardar la plantilla original antes de comenzar a modificar todos los códigos que se han entregado en esta entrada.

Espero que les ayude y no olviden dejar sus inquitudes.





CONVERSATION

9 ya son Blogger@s:

  1. Pameliry2 de abril de 2013, 13:50

    Hola.
    hice todos los pasos y me resulto todo!! muy contenta de recibir esta asesoria.
    Lo que queria consultar es que si es que hay alguna posibilidad de cambiar los colores del menú?..

    Muchas gracias BeBloggera por estos consejos! =)

    ResponderEliminar
  2. Unknown4 de abril de 2013, 18:10

    Buenísimo consejo, aunque aun no me resulta X_x. seguiré intentándolo xP

    saludos :D

    ResponderEliminar
  3. Unknown4 de abril de 2013, 20:15

    Ya lo hice, y me encantó <3 xP

    ResponderEliminar
  4. Xinita9 de abril de 2013, 20:00

    Waaaaaa.. me encanto! Me funciono a la perfección! Como hace de funcional el blog esto!! :D

    ResponderEliminar
  5. Unknown20 de mayo de 2013, 18:15

    Hola! Estoy muuuuy interesada en esta sección para nuestro blog y he intentado seguir vuestros pasos que son muy sencillos pero tengo el siguiente problema:

    La parte de :

    /* Tabs
    ----------------------------------------------- */
    #crosscol ul {
    z-index: 200;
    padding:0 !important;
    }

    y la de:

    ]]>

    no aparecen en mi blog, no existen.

    ¿Qué puedo hacer? Mi correo es: equipajesdemano@gmail.com

    Agradecería mucho vuestra ayuda en esta cuestión pues me interesa muchísimo.

    Muchas gracias! Aurora

    ResponderEliminar
  6. Unknown22 de agosto de 2013, 23:40

    Hola, tengo la plantilla Simple... Y no tiene

    Podrían Ayudarme?

    Mi Blog es:

    www.ahorrosparatodas.com

    ResponderEliminar
  7. Little Red18 de septiembre de 2013, 12:37

    Hola!! He realizo todos los pasos que indicas en el tutorial y mi menu se queda en forma de lista. no con la forma que debería
    ¿Qué puede ocurrir?
    http://littlered-readinghood.blogspot.com.es/

    besos

    ResponderEliminar
  8. Romertheroots22 de julio de 2014, 12:40

    Hola buen dia como estan ?le escribo ya que soy nuevo en esto de los codigos y cosas asi no entiendo mucho . Tengo 2 problema con una plantilla que descargue y no he podido solucionarlo he hecho tutoriales tanto suyos como otros y nada .
    Este el link de mi plantilla http://prueba2rc.blogspot.com/ y este es link de la plantilla demo original http://boardmag.blogspot.com/.

    1. Que mi plantilla he tratado de agregar el slider pero no me sale tal cual como en la plantilla original , me sale la imagen pequeña , o no se mueven, también salen como tipo collage pequeña pero nada como el formato original

    2. La segunda es que no me sale el submenu para la plantilla si hago los paso me crea es otro menu yo lo que quiero es nada mas agregar el menu desplagable que ya trae ese menu

    También le anexo el cogido de la plantilla https://drive.google.com/file/d/0B2Kw4BvKAqssOXhMdnZHTWlBOVk/edit?usp=sharing

    De ante mano gracias y disculpa la molestia

    ResponderEliminar
  9. Unknown9 de noviembre de 2021, 0:15

    To customize the menu you need a nice font, fonts online free will help you do that simply and easily.

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Suscribirse a: Enviar comentarios ( Atom )
Back
to top