Colocar Menú Horizontal Desplegable con Subpestañas en Blogger

Colocar Menú Horizontal Desplegable con Subpestañas en Blogger. Buenas tarde amigos y seguidores del blog, hoy seguimos con nuestro tercer paso para crear el blog de gokustian y lo que realizaremos en esta ocasión será insertar nuestro menú principal el cual tendrá pestañas y subpestañas. También cambiaremos los colores de la barra, podemos cambiar el tamaño de las fuentes etc. Tranquilos que todo lo iré explicando paso a paso. 😉


Lo primero que haremos será ir a Plantilla >> Editar HTML. Luego clic en cualquier espacio en blanco y colocamos Ctrl+F. En el buscador colocamos <b:section class= y damos al intro. Seguiremos dando intro hasta encontrar la siguiente línea:

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

Eliminamos lo que está en color rojo. Es posible que encontremos muchas partes como las que están en color rojo, así que eliminamos todas las que encontremos.

Luego buscaremos el siguiente código /* Tabs
Posteriormente borraremos todo lo que se encuentre entre /* Tabs y /* Headings y en su lufar pegaremos 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;}




Después lo que vamos hacer para insertar nuestro menú horizontal en nuestro blog será ir desde nuestro panel de control a Plantilla >> Editar HTML. Luego damos clic dentro del recuadro donde aparecen los códigos y colocamos Ctrl+F para que nos aparezca el buscador. Dentro del buscador colocamos ]]></b:skin> y daremos al Intro.

Luego de haber encontrado el código anterior, lo que haremos será pegar el código completo que les dejaré a continuación antes de ]]></b:skin>

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51IadG6mjnpLKezKqdfpLwmRaR5bpnZXrwrm9WmhvKhQdKwfAYJkvp_IFc7BgJ_1Ij6BaJQt5573A3Di0rNDxGNr-akTUZrrKuKtFf111xNQdCcbarHmlktibCVznHZJHVi7xzuqK_OuW/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51IadG6mjnpLKezKqdfpLwmRaR5bpnZXrwrm9WmhvKhQdKwfAYJkvp_IFc7BgJ_1Ij6BaJQt5573A3Di0rNDxGNr-akTUZrrKuKtFf111xNQdCcbarHmlktibCVznHZJHVi7xzuqK_OuW/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#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/AVvXsEg8_WzNxOtkUfoQQFGPRZMkjfRACN0YrY5t-Ia1ELopFUGDsOb965cs_bWVsMufRGJOgqbZqXBS0lj8Qge1nf2bLXqMgHBzEZBnL1ZeJ63L8gpx_FOA-HRDYKsvk97Ux8S2LKf_PR2TlRo/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Una vez copiado todo el código anterior, daremos clic en Guardar Plantilla.

IMPORTANTE: En el código anterior, suban el número de todos los z-index a 99, ya que si lo dejan como están lo más probable es que cuando pongan el slider las pestañas del menú queden por debajo de éste.


Ahora lo que haremos será ir a Diseño >> Agregar un Gadget >> HTML/JavaScript. Copiamos y pegamos el siguiente código que les dejo.

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</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>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<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 class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</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>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>


<!-- Buscador -->
<li>
<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>
</li>

</ul>
</div>

Finalizamos dando clic en Guardar.

Contenido obtenido gracias a Ciudad Blogger.




Colocar Menú Horizontal Desplegable con Subpestañas en Blogger  "Vídeo"






¿Qué te ha parecido éste artículo?. Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco más abajo para que te expreses siempre en el margen del respeto y así poder dejar un comentario positivo como tambien uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por internet !!  😉


Puedes Seguirme en





 Colocar Menú Horizontal Desplegable con Subpestañas en Blogger 

Cualquier duda que tengas, puedes dejarla en los comentarios y en cuanto la vea te respondo.

¡¡No te olvides de revisar el Ranking Top 10 donde se encuentran las mejores páginas para ganar dinero por internet!!


37 Comentarios

  1. Hola buenas! Tengo un problema me queda el menú horizontal sin color y las letras tampoco. Seguí todos tus tutoriales y nada. Alguna recomendacion?

    ResponderBorrar
    Respuestas
    1. Pues es raro que te salga sin color el menú. Comenzaste el blog con la plantilla que utilicé al inicio o con otra plantilla?

      Borrar
  2. hola amigo me he quedado un poco atascado con el blog como ago para poner las paginas en el menu y como pusiste tus redes sociales en la parte superior izquierda? me gustas como bas explicando todo un saludo

    ResponderBorrar
    Respuestas
    1. Hola amigo, creo que lo explico en los pasos siguiente, anda avanzando paso a paso y sabrás como hacerlo. Saludos.

      Borrar
    2. Buenas tardes ¡ Estoy siguiendo tu magnifico video y pego los códigos entre Tabs y Headings, le doy a Guardar tema y no hace nada, o sea, que no puedo seguir ¿ en que me equivoco ?

      Borrar
    3. Hola Oscar, la verdad es que no sabría decirte cual es tu error si esque has seguido los pasos tal cual como los explico en el vídeo. Te recomiendo que los repases para ver si encuentras el error. Saludos.

      Borrar
  3. hola que tal disculpa sigo todos los pasos al pie de la letra pero en vez de salirme la barra de busqueda me sale es todo el codigo del ultimo paso

    ResponderBorrar
    Respuestas
    1. Hola Hansel, si seguiste todos los pasos es raro que te suceda eso, quizás has cerrado mal alguna etiqueta o algo por el estilo. Lo mejor es que repases el tutorial quizás así encuentres el error. Un saludo.

      Borrar
  4. hola amigo fijate que ya encontre el problema y es que no se guardan los cambion, que puedo hacer

    ResponderBorrar
    Respuestas
    1. Es raro que te suceda eso, los cambios deberían guardarse a menos que cuando le des al botón para guardar cambios te aparezcan unas letras rojas. En ese caso quiere decir que hay algún código html mal puesto. Te sugiero revisar, o seguir los pasos nuevamente.

      Borrar
  5. Buenos Amigo Gokustian No Me Quede Eso Así Como Explico Que Hago :'(

    ResponderBorrar
    Respuestas
    1. Hola amigo, quizás realizaste algún paso mal, te recomiendo revisarlo nuevamente desde el principio. También puedes contactarme por facebook para poder ayudarte de mejor manera y me puedas enviar una captura de tu problema. Un saludo.

      Borrar
  6. Hola, estaba buscando menus para mi blog y encontre este es muy bonito pero estoy utilizando otro que primero no se como quitar y poner y segundo me sale con la pantalla completa bien pero a medio expandir la pantalla sale en vertical me podrias ayudar con ambos problemas porfa?
    Mi blog es https://escritosparatiromanticayjuvenil.blogspot.com.es/
    Gracias de antemano :)

    ResponderBorrar
    Respuestas
    1. Hola Anita la verdad es que no sabría ayudarte ya que el diseño de tu blog no es igual al mío. Por otra parte este tutorial lo ise con la intención de enseñar el paso a paso de como realicé mi blog pero al ser otro diseño hay que entrar a temas de HTML y no soy experto en eso. Saludos.

      Borrar
  7. Excelente tutorial amigo Sebastian. Bien explicado. Te felicito!!! Espero llegar al final de este curso y conseguir la meta de diseñar mi propia herramienta de marketting.

    ResponderBorrar
    Respuestas
    1. Muchas gracias Matin y claro que lo lograrás si sigues trabajando amigo. Un saludo y mucho éxito.

      Borrar
  8. Disculpa, hago todos los pasos con en los videos pero a la hora de guardar no me sale la barra si no como en lista, que puede ser, un saludo.

    ResponderBorrar
    Respuestas
    1. Hola Jefferson, te fijaste de colocar el menú arriba de las entradas?, si realizaste todo como lo indico en el vídeo al pie de la letra quizas sea porque el menú ya no esté funcionando para la plantilla simple de blogger, creo que lo mismo a pasado con el slider del blog.

      Borrar
  9. oye amigo algunas de los comando ya no aparecen en el blog nose si es por que ya cambio muho desde que hiziste el tutorial o por que sera ??

    ResponderBorrar
    Respuestas
    1. Creo que es por eso. Parece que algunos código ya no estan funcionando con la platilla simple de blogger =(

      Borrar
  10. yo descubrí el error de muchos con el menú lo que sucede es que cuando pegan el código de menú horizontal cuando lo pegan se borra solo algo importante y es esto } del texto de arriba lo ponen y ya

    ResponderBorrar
  11. los pasos son muy bien explicados solo que hay algo que por su puesto no depende de ti, y es la parte donde hay que identificar colores, soy una persona ciega y mi lector de pantalla hay muchas cosas que no describe y una de esas es el color de las letras, pero bueno seguiré intentando probando y probando haber como me sale, saludos.

    ResponderBorrar
  12. Hola Gokustian tengo un problema con el comando <b:section class= no me sale tab me sale es sliderbar es lo mismo,disculpame si no explique muy bien este caso,saludos desde Venezuela

    ResponderBorrar
    Respuestas
    1. Hola buenas, intenta ir quitandole letras al código haber si te aparece, pero debes seguir los pasos tal cual lo indico, de lo contrario lo mas probable es que tengas algún inconveniente. Un saludo.

      Borrar
    2. Ok Gokustian Ya Resolví ese problema me encantó mucho este tutorial por que explicas desde como crearte una cuenta de blogger y como crear un blog con todo lo que necesitas,mucha gracias! sigue así gokustian!

      Borrar
    3. Gracias a ti amigo por seguir el contenido. Saludos.

      Borrar
  13. hola Gokustian segui todos lo paso del video y el menu desplegable me sale muy abajo del titulo del blogs

    ResponderBorrar
    Respuestas
    1. Hola, si has seguido los pasos al pie de la letra, la verdad no sé porque será amigo. Te recomiendo intentar ir cambiándolo de posiciones hasta acomodarlo bien.

      Borrar
  14. hola amigo tengo un problema cuando busco el codigo /* Tabs no me sale nada por mas que le doy a intro

    ResponderBorrar
  15. Intenta ir quitándole letras al código hasta que te salga.

    ResponderBorrar
  16. Hola amigos, si van a usar otra plantilla de blogger les recomiendo no hacer el primer paso, solo hagan el paso de añadir un gadget normal como dice allí, y el ultimo paso que es pegar ese código largo en medio del skin, no lo hagan, ni entren al codigo Html(editar html), solo denle clic en personalizar, luego en avanzado y bajan donde dice añadir CSS y pegan ese codigo completo, listo, les aseguro 100% funciona!

    doname ethereum!:v 0x3ec5B42376BFbE988cC619a0aCFE68049d4fb9bC

    ResponderBorrar
  17. IMPORTANTE: En el código anterior, suban el número de todos los z-index a 99, ya que si lo dejan como están lo más probable es que cuando pongan el slider las pestañas del menú queden por debajo de éste.
    en que parte del codigo sale que debemos colocar el z-index a 99??? deberias hacer un video de esa parte me quede estancado ahy

    ResponderBorrar
    Respuestas
    1. Es solo cosa de ir al código y donde veas z-index con un número, cambiar ese número a 99.

      Borrar
  18. No me funciono seguí todos los pasos y no funciono.

    ResponderBorrar
    Respuestas
    1. Vaya que mal, tendré que revisar si los código hay que actualizarlos =(

      Borrar