Menú responsive con iconos sociales para Blogger
17.4.16
Post actualizado: 4-Enero-2018
Este tutorial supone una actualización, o mejor dicho añadido, al anterior Crea un menú desplegable responsive para Blogger. Siguiendo unos sencillos pasos instalaremos un menú responsive con nuestros iconos sociales en él. De esta manera los tendremos siempre fijos en la zona superior derecha de nuestro navegador.
Los iconos que enlazaran a nuestras redes sociales son iconos web, así que no debes preocuparte por diseñar y subir imágenes a la red. Utilizaremos la fuente Awesome que es en si es una fuente tipográfica cuyos caracteres en vez de letras son iconos. Esto permite prescindir de imágenes que suelen pesar más y a las que hay que enlazar, cada una de ellas, a una URL concreta. El proceso es muy sencillo y el resultado es limpio y profesional.
Para ver el aspecto y funcionamiento de este menú clica en el enlace inferior. Recuerda que si estas en el ordenador puedes ver como responderá en pantallas más pequeñas estrechando la ventana de tu navegador. Si quieres verlo en la versión móvil de Blogger añade al final de la URL esto: ?m=1.
El código del menú es básicamente el del anterior tutorial. Lo único que he hecho es crear algunas líneas más para alojar estos iconos sociales y que se muestren siempre a la derecha de la barra en cualquier dispositivo y tamaño de pantalla. Al igual que aquel no necesita añadir ningun script jQuery ni externo ni interno para que funcione, aunque si necesitaremos instalar la fuente Awesome.
Si ya instalaste el anterior menú y deseas añadir este nuevo te recomiendo que lo sobreescribas con el que ahora daré. He intentado conservar al máxima su estructura pero los cambios son significativos y es posible liarse al actualizarlo.
Para instalar este menú solo tienes que seguir unos simples pasos que te detallo a continuación. Pero si te lías , no siempre me explico de manera muy llana, o prefieres los videotutoriales, Mónica Lemos de Blogger paso a paso te va a acompañar en el proceso.
Yo no soy muy forofa de los videotutoriales debido a mi impaciencia, pero debo reconocer que para algunos temas son de gran utilidad, como es el caso. ASí pues agradezcamos a Mónica habernos preparado un videotutorial conciso y claro que nos guiará por todo el proceso de instalación del menú.
Videotutorial de Mónica Lemos
Instalación paso a paso
Como primer paso haz una copia de seguridad de tu plantilla y habilita la vista móvil personaliza de tu blog. Puedes ver como hacerlo en el punto 1 y 2 del tutorial anterior. Vamos a tocar la plantilla HTML y toda precaución es poca. Ten a mano las URL de tus enlaces sociales y sigue estos pasos:1. Instala la fuente de iconos web Font Awesome
En el panel de administración de Blogger selecciona la opción plantilla y clica en el botón Editar HTML. Clica dentro de las líneas de código y saca el buscador clicando a la vez CTRL+F. Escribe </head>. Copia el siguiente código y pégalo justo antes de la etiqueta </head>.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
2. Crea el HTML de tu menú
Continuamos en edición HTML de la plantilla. Busca el código <body>. Si tienes instalada la plantilla simple de Blogger te llevará a una línea similar a <body expr:class='"loading" + data:blog.mobileClass'>. Justo debajo pega el código que adjunto:<nav id='menu'> <div class='barra'> <input type='checkbox'/> <label><i aria-hidden='true' class='fa fa-bars'/></label> <ul class='principal'> <li><a href='/'>Inicio</a></li> <li><a href='#'>Sobre mi</a></li> <li><a href='#'>Categorías <i class="fa fa-chevron-down"></i></a> <ul class='menus'> <li><a href='#'>Categoría 1</a></li> <li><a href='#'>Categoría 2</a></li> <li><a href='#'>Categoría 3</a></li> </ul> </li> <li><a href='#'>Contacto</a></li> </ul> <div class='iconos'> <a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a> <a href='#'><i aria-hidden='true' class='fa fa-facebook'/></a> <a href='#'><i aria-hidden='true' class='fa fa-instagram'/></a> <a href='#'><i aria-hidden='true' class='fa fa-pinterest-p'/></a> </div> </div> </nav>
Para añadir las categorías de tu menú y los enlaces a tus redes sociales necesitas unos simples conocimientos de HTML. Los nombres que ves en gris debes cambiarlos por los de tus categorías de menú. Si deseas añadir más categorías o subcategorías te recomiendo que consultes el apartado de listas de mi post sobre marcado de texto en HTML.
Para que los enlaces funcionen debes substituir el signo de parrilla # por la URL donde quieres que enlazen.
He añadido los iconos de las redes sociales que puedes ver en la demo. Para eliminar o añadir más veamos como funciona. Fíjate que cada red social se representa en una línea. Por ejemplo:
<a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a>Entre <a href='#'> y </a> debes introducir el código que identifica al icono de esa red social. La fuente Awesome dispone de muchos iconos. Si necesitas añadir otros puedes acceder al listado completo y sus correspondientes códigos en la página oficial de la fuente Awesome.
Recuerda sustiuir también en estas líneas de código el signo # por la URL de tus redes sociales o no funcionarán.
3. Añade el código CSS
Busca en la plantilla este código ]]></b:skin> . Copia las siguientes líneas y pégalas justo antes de ese código./*-----------------------------------------------
Menu responsive de MBT modificado por Minerva Aurora
Tutorial disponible en http://minervaurora.blogspot.com/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html
Libre para uso personal manteniendo la atribución intacta
----------------------------------------------- */
body {
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
.barra{
width:950px;/*ancho del blog*/
margin:0 auto;
}
#menu{
background: #F1F1F1;/* color de la barra*/
color: #333;/*color de las tres barritas*/
height: 50px;
border-bottom: 1px solid rgba(0,0,0,.05);/* borde inferior de la barra*/
width:100%;
position:fixed;
z-index:101;
}
#menu ul,#menu li{
margin: 0px auto;
padding:0 0;
list-style:none;
}
#menu .iconos{
float:right;
}
#menu li{
float:left;
display:inline;
position:relative;
font: 11px Arial, sans-serif;/*tamaño y fuente del texto */
}
#menu ul a{
display: block;
line-height: 50px;
padding: 0 14px;
color: #333;/*color del texto*/
text-transform: uppercase;/*letras mayúsculas*/
letter-spacing: 1.5px;/*espacio entre letras*/
}
#menu li a:hover{
color: #999;/*color del texto al pasar el ratón*/
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:50px;
height:50px;
opacity:0;
cursor:pointer
}
#menu label{
display:none;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 17px;
vertical-align: middle;
}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #F1F1F1;/*color del fondo del submenu*/
position: absolute;
z-index: 99;
display: none;
border: 1px solid rgba(0,0,0,.05);
}
#menu ul.menus li{
display: block;
width: 100%;
font: 11px Arial, sans-serif;/*tamaño y fuente del texto del submenu*/
text-transform: uppercase;
border-bottom: 1px solid #E9E9E9;
}
#menu ul.menus li:last-child{
border-bottom:none;
}
#menu ul.menus a{
color: #333;/*color del texto del submenu*/
line-height: 35px;
}
#menu li:hover ul.menus{
display:block;
}
#menu ul.menus a:hover{
color: #999;/*color del texto del submenu al pasar el ratón*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.iconos a{
padding: 0 10px;
height: 50px;
display: inline-block;
}
#menu .iconos .fa{
font-size:14px;
line-height: 50px;
color: #333;/*color del icono social*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu ul .fa{
font-size: 8px;
position: relative;
top: -1px;
}
#menu .iconos .fa:hover{
color: #999;/*color del icono social al pasar el ratón*/
}
@media screen and (max-width: 768px){
#menu{
position:fixed;
z-index:101;
}
#menu ul{
background:#F1F1F1;/*color del desplegable del menu movil*/
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none
}
#menu ul.menus{
width:100%;
position:static;
padding-left:20px
}
#menu li{
display:block;
float:none;
width:auto;
font: 11px Arial, sans-serif;
}
#menu ul a{
display: block;
line-height: 40px;
padding: 0 14px;/*tamaño y fuente del menu movil*/
}
#menu input,#menu label{
position:absolute;
top:0;
left:0;
display:block;
}
#menu input{
z-index:4
}
#menu input:checked + label{
color:#333;/*color de las tres barritas una vez se clica*/
}
#menu input:checked ~ ul{
display:block;
top:50px;
}
.barra{
width:95%!important;
}
}
header{
padding-top:50px;
}
/*fin menu responsive*/
He diseñado un menú neutro y sencillo pero si deseas personalizarlo, y tienes ciertas nociones de CSS, cambia aquellas reglas en las que he añadido comentarios encerrados así /*comentario*/ .Los cambios menos comprometidos y más resultones suelen ser los de color. Te anoto los colores utilizados en valores hexadecimales para que puedas sustituirlos por los que desees:
#333 color gris oscuro del texto
#999 color gris del texto al pasar el ratón
#F1F1F1 color gris claro de la barra
Para centrar el menú y que se ajuste al ancho de tu blog en la vista de ordenador deberás modificar el ancho de la segunda regla:
.barra{
width:950px;/*ancho del blog*/
margin:0 auto;
}
Sustituye el valor 950 por el ancho de tu blog.Guarda los cambios hechos en tu plantilla y comprueba si funciona tu nuevo menú responsive.
He añadido una última regla para empujar la cabecera hacia abajo y que no quede tapada por el menú. Está programada sólo para la plantilla simple de Blogger. Dar soluciones para otras plantillas sin conocerlas sería arriesgado. Si vieses que no funciona puedes eliminarla:
header{
padding-top:50px;
}
Y esto es todo. ¿Qué te ha parecido? Dudas, sugerencias, comentarios... Espero volver prontito para publicar el tutorial que os prometí en la página de facebook de Odisea gráfica. Un tutorial pero que muy muy útil, ¡lo prometo!
97 comentarios
Hola Minerva
ResponderEliminarComo sabes puse el menú responsive en mi blog, para añadir los iconos de RR.SS. sólo debo añadir en html la parte de los iconos verdad? Es que la anterior la tengo y el CSS lo tendría que cambiar?
Gracias.
Hola! Es mucho más práctico que borres todo el CSS y vuelvas a copiar éste. En cuanto al HTML a gustos, yo copiaría el antiguo en un bloc de nota. Copiaría el de este post en su lugar y después volvería a pegar todo lo que entre ul..../ul principal. He añadido como tres clases más..si no aparecen el HTML no funcionará bien!!
EliminarGracias por confiar en mi trabajo!!
Muy interesante, gracias por el tutorial. Bss
ResponderEliminartodo esta calidad y muy bonito pero qisiera podes agregarle tambeien el buscador a al menu, nose si pudieras ayudarme
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarMe gusto mucho,soy nuevo en esto de blogger y este tutorial me va genial!!, muchas gracias.
ResponderEliminarSolo una duda, como puedo cambiar los colores de los iconoes de las redes sociales, las queria invertir a blancas por ejemplo, ya que mi barra la quiero un tanto oscura.
Gracias de nuevo !!!!
Uy creo que llego tarde, parece que ya lo tienes solucionado! Enhorabuena!
EliminarJeje si ...de igual manera agradezco la respuesta, saludos y sigue asi :D
EliminarHola Minerva,
ResponderEliminarCambiando de color los iconos de redes sociales, he visto que al pasar el ratón no se cambia el color de los iconos. Justo lo que está en negrita no me funciona:
.iconos a:hover{
background: #E9E9E9;/*color del fondo de la categoria al pasar el ratón*/
color: #000;/*color del icono al pasar el ratón*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
De ese bloque es justo lo que no se cambia, no sé por qué...
Hola! Si solo quieres cambiar el color del icono añadir la siguiente regla:
Eliminar#menu .fa:hover{
color:#f00;
}
Si no sale no dudes en comentarmelo
Pues muchas gracias. Ha sido incluir eso y genial, hasta el color que yo tenía marcado para que saliera. =)
EliminarHola Minerva! Tengo una duda, ¿cómo puedo añadir al menú el buscador?
ResponderEliminarUn saludo.
No me lo he planteado, porque continuar por aquí ya implica un menú más sofisticado y mi intención primera fue dar una solución responsive simple. Lamento mucho no poder ayudar.
Eliminar¿Cómo hacer el menú transparente?, es decir sin la barra gris de fondo. Gracias.
ResponderEliminarHola Eduardo. Es algo muy sencillo debes cambiar el color gris por el atributo transparent así: #menu { background: transparent;. De todas maneras no te lo recomiendo, en todo caso cámbialo a blanco, de lo contrario cuando navegues hacia abajo se superpondrá a las líneas y fotos del blog.
ResponderEliminarMIL GRACIAS POR RESPONDER. Es cierto, lo dejaré blanco. Cariños desde Argentina. www.eduardofouces.com (justo es blanco) ;)
EliminarHola Minerva...gracias por esta aporte, me ha sido de gran utilidad como a los otros compañeros que han comentado.
ResponderEliminarTengo dos consultas:
1. Como minimizar la velocidad de despliegue
2. El menú móvil hay manera que no tape la cabecera cuando se despliega. La regla que sugieres "header{
padding-top:45px;}" no me funciona y sigue el menu tapando la cabecera.
gracias una vez mas.
Hola! Lo de la velocidad es posible aplicando CSS. Es posible que dependiendo de tu plantilla esa última regla no funcione. Mándame el link a tu blog en todo caso.
EliminarUn saludo
Este comentario ha sido eliminado por el autor.
ResponderEliminarse podria poner como si fuese un gadget? es que ya tengo un menu para la version pc y no me interesa quitarlo
ResponderEliminarHola Sergio,no acabo de entender muy bien lo que me preguntas. Supongo que se refiere a insertar el código debajo de la cabecera mediante un gadget. En principio no funcionaría porque el CSS está preparado para quedar fijo en la zona superior de la pantalla, pero supongo que podría adaptarse.
EliminarUn saludo
Muchísimas gracias or el tutorial, lo he instalado y funciona de maravilla pero solo en el ordenador, cuando miro el movil en la versión móvil no sale ningún menú, lo he copiado tal cual lo pones tu y no sale. Me puedes ayudar?
ResponderEliminarMucas gracias.
OK, puede ser por muchas cosas. Mejor será que cuando lo vuelvas a instalar me avises (a traves de messenger o el formulario de contacto) y miro que es lo que pasa.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar¡me quedó genial! gracias Minerva.
ResponderEliminarLo que seria ya super genial es que dijeras como se puede poner el buscador en la misma barra. Pero por lo demas O.K,
gracias!! Saludos desde Andalucía
¡Hola! Quiero este tipo de menú unicamente para la plantilla móvil ¿Es posible? Lo instalé tal cual dice ahí pero no me sale bien, sólo me sale el texto y es como si no se cargara bien.
ResponderEliminarLa manera más sencilla para desactivarloen desktop será mediante CSS. Si no se carga bien pueden ser muchos motivos, revisa bien el código, una sola llave mal puesta o repetida puede causar estragos.
EliminarUn saludo
Sos una Genia! Me encantó como quedó en mi blog en construcción. ¿es posible generar un cuarto nivel? no tengo ni idea de htlm y llevo días agregando y sacando lineas sin encontrar la solución. Gracias!
ResponderEliminarHola!! Me ha venido Genial =)
ResponderEliminarPero tengo un problema, cuando minimizo la ventana me aparece el letrero "menú" en vertical, no en horizontal. ¿sabes si me he equivocado en algo?.. ojala me ayudes.
Gracias!
Hola, tengo un problema a la hora de ajustarlo al tamaño del blog. Tan solo se me mueven las redes sociales. Las demás paginas se quedan pegadas a la izquierda.
ResponderEliminarUn beso y muchas gracias por el post!
Hola Violet, he visitado tu blog 16 violet. Lo que te está pasando es bien sencillo, tu plantilla, Voux de Themexpose ya tiene menú, y el mío se ve desplazado por este. Si lo que deseas es tener un menú desplegable instala la plantilla Minimal de Themexpose, es muy parecida a Voux.
EliminarUn saludo!
Hola Minerva!!
ResponderEliminarGracias por el tutorial, es justo lo que estaba buscando, pero... me ha surgido un problemilla, los iconos de las redes sociales me queda un renglón por debajo de la barra, ¿cómo puedo solucionarlo? te paso el enlace del blog de prueba para que lo veas.
Muchas gracias.
Saludos.
https://prueba739.blogspot.com.es/
Hola Sandra, me parece que no te puedo ayudar. El menú que tienes implementado no es el de este tutorial, difiere en mucho al que yo comparto aquí. Revisa el código y compáralo con el que tomaste de referencia.Espero que puedas encontrar la solución.
EliminarUn saludo!
Hola, Minerva,
EliminarMuchas gracias por contestar tan pronto.
Siguiendo tus pasaso lo que me sale es un desastre... a saber dónde he metido la pata, jaja.
Un saludo.
Ya he conseguido solucionarlo :)
EliminarMuchas gracias!
Todo funciona bien excepto los iconos, no se ven los iconos. :(
ResponderEliminarComprueba que tengas linkado fontawesome. Si examinar tu blog no sabría decirte que pasa.
EliminarMe a servido de mucho pero a la hora de abrir mi blog por el mobil no me sale.
ResponderEliminarTu plantilla, Voux de themexpose, ya tiene un menú responsive y está interfiriendo. Si lo que deseas que el menú tenga subcategorías puedes instalar cheerup de themexpose.
EliminarUn saludo
Hola linda, muchas gracias por este tutorial. Me ha encantado, pero he tenido un problema con los iconos, cuando pongo el ratón sobre ellos, no cambia de color ¿qué puedo hacer?. Gracias de ante mano.
ResponderEliminarHola Catalina. He actualizado el código. Prueba ahora si te funciona. Al cambiar solo el fondo en mi diseño no comprobé si esa función se cumplía. Disculpa las molestias.
EliminarBuenos días Minerva, mil gracias por el tutorial mereces un gran Like... todo funciona muy bien pero cuando lo veo en un celular desaparece las icono tres rallitas para poder llamar al menú oculto. Te agradecería me apoyaras porque me rompo el cerebro y no encuentro la solución.
ResponderEliminarHola, sin poder entrar en tu blog no sé qué puede estar pasando.
ResponderEliminarhola MINERVA, de nuevo aqui... como puedo agregar el boton de buscar al menu.
ResponderEliminarHola, en el móvil las letras "menu" me salen colocadas para abajo (no en horizontal, sino en vertical). Ayudaaaaa por faaaa!!!
ResponderEliminarHola!
ResponderEliminar¿Cómo puedo hacer para que sólo se vea en la versión móvil y en el ordenador no?
Hola! Me encanta tu post. He hecho todo, pero sólo me figura el ícono de Instagram, el enlace me redirige correctamente, pero en el lugar de los otros íconos no sale nada, pero sí genera enlace, lamentablemente también a Instagram. Intenté cambiar el código del ícono con los que da la página Font Awesome, y el de Instagram presisamente está actualizado; sin embargo me sigue saliendo el viejo y no pasa nada. Te paso el link de mi blog para que veas. Te agradezco una repuesta. Besos!
ResponderEliminarMe olvidé de darte el link https://mendozatrendy.blogspot.com.ar/
ResponderEliminarHola Alexandra, he actualizado el post con el enlace a la versión actual de fontawesome y otros ajustes. He estado revisando tu código. Creo que has intentado arreglar un problema de espacio en la barra modificando sin mucha fortuna el código CSS. Te aconsejo que vuelvas a actualizar todo el código y elimines una o o dos categorías del menú. Si no te sale avísame. Un saludo
EliminarHola, Minerva!
ResponderEliminarEstupendo post que me viene de maravilla :) Pero... me ha surgido un problemilla, el icono de pinterest no se ve y no sé a qué se puede deber, lo estoy probando en una prueba (te paso el enlace por si encuentras el motivo: pruebabis2.blogspot.com)
Muchas gracias,
Saludos.
Y tampoco se ven las rayitas en la versión móvil...
EliminarYa lo he solucionado :) Muchas gracias!
Eliminarcomo hago para que el menu despegable me quede en la parte de abajo de la cabecera ; y no arriba no me gusta :..ayuda porfavor no se que hacer ,
ResponderEliminarUn tutorial magnífico. ¿Se puede generar un icono de lupa para integrar la opción de búsqueda,por favor? Me encantaría aplicarlo en mi sitio o en otros blogs que tengo, pero por más que indago no encuentro ningún tutorial que lo explique. Un saludo.
ResponderEliminarClaro lo tienes en otro post mío http://minervaurora.blogspot.com.es/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html
EliminarGracias por responder tan rápido. Justo al poco de leer este post indagando un poco más en Google me ha remitido a esa otra entrada tuya. Millones de gracias por unos tutoriales tan estupendos y útiles.
EliminarHe seguido todos los pasos de tu magnífico tutorial, y se me descolocan continuamente los iconos. Se me recolocan en una columna (al ser blancos no se visualizan, pero están ahí). ¿Qué tengo que modificar en tu código para que esto no suceda, por favor? Un saludo.
ResponderEliminarHola. Ahora no tienes el div con los iconos y no puedo investigar que está pasando.
Eliminar¡hola! tengo un pregunta, si quisiera poner el menu debajo de la cabecera ¿como le haría?
ResponderEliminarNo es de fácil adaptación, se tiene que recurrir a código.
Eliminarhola, otra cosita, al entrar en la versión movil, no me aparece el menú, no sé q hice pero si me pudieses ayudar te lo agradecería
ResponderEliminarHola, siento no poder ayudarte. El tutorial que has seguido para añadir el buscador no es el mío.
EliminarTe recuerdo que tengo un tutorial en el que añado un buscador:
http://minervaurora.blogspot.com.es/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html
Espero que te sea de ayuda. Un saludo.
Hola, saludos! esta genial el menú. estoy intentanto colocar el ícono de messenger, saben si es posible, agradezco de antemano cualquier aporte
ResponderEliminarCreo que la versión que se usa de fontawesome no tiene ese icono https://fontawesome.com/v4.7.0/icons/
EliminarQUedo agradecido contigo mira mi blog http://teologiareformadadelagraciadecristo.blogspot.com/
ResponderEliminarHola Moni, SI solo quiero tener en el menu los iconos de redes sociales centrados, como se lograria? Saludos desde Mexico
ResponderEliminarHola, en dónde deseas los iconos centrados, ¿en la versión móvil?
EliminarHola! como hacer para que el menú aparezca al ir despalazandome hacia abajo de la pagina. Lo que quiero es que cuando vaya bajando y ya no se vea la cabera del blog, aparezca el menu. Te lo agradezco
ResponderEliminarDiculpa, no entiendo bien la pregunta. Este menú es fijo, siempre está la parte superior del navegador.
Eliminarsaludos, muy bueno el post, pero me genero una duda, existe la posibilidad de poner unas mini imagenes en los sub menus, es decir unas fotos Png que sirvan de iconos al lado de los nombres de las categorias
ResponderEliminarejmeplo
Menu
(foto pequeña)sub-menu
(foto pequeña)sub-menu
Hola. Lo he intentado también con este tutorial, sin busador y el efecto es el mismo. Si quieres revisarlo... porque es curioso que partiendo de la plantilla básica no consiga que funcione. Gracias.
ResponderEliminaranaml1234.blogspot.com
lo he conseguido arreglar modificando el código...
ResponderEliminarHola! Tengo un problema y es que mi plantilla es la sencilla de blogger y intento buscar el Código ]]> pero no aparece en el HTML de la plantilla y no se muy donde ubicar el Código siguiente, no se mucho de informatica jajaaja. Espero y me respondas :)
ResponderEliminarHola, puedes añadir el código CSS desde la opción de Personalizar tema, no hace falta que entres en el HTML de la plantilla. Pero introduce allí solo el código CSS.
EliminarEl código CSS que aparece en este tutorial solo funcionará con los iconos de fontawesome en la versión de font awesome que enlaza. El resto de CSS te está funcionando bien en el blog de pruebas que he examinado.
ResponderEliminarHola! Antes que nada agradecete tus post, super utiles!
ResponderEliminarY tenia una duda, a ver si podias ayudarme:
Sigo todos los pasos y se instala la barra con los widgets. El problema, que mi anterior barra negra, sigue apareciendo y tapa la tuya que acabo de instalar... Basicamente me bajé una plantilla, la instalé y fui añadiendo cosas que necesitaba.
Alguna idea de como quitarla? O poner la tuya por delante?
Gracias!
Para quitar la barra original necesitarás saber un poco de HTML. Para colocar mi barra encima podrías añadir en el CSS esta regla y cruzar los dedos para que funcione. #menu{z-index:2000}
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarRealmente un tutorial impresionante, didáctico, sencillo, y fácil de realizar. Pero tengo una pregunta ¿Se podría cambiar la fuente utilizada en las pestañas? ¿Cómo? Gracias de antemano.
ResponderEliminarPedro Madrigal
Claro, está indicado en el código. Por ejemplo en la regla #menu li{font: 11px Arial, sans-serif;/*tamaño y fuente del texto */}. Si no deseas Arial nombra la fuente que deseas. Puedes usar fuentes del sistema o aquellas instaladas en tu plantilla.
EliminarGenial, muchas gracias por la respuesta. Saludos
EliminarGracias por este tutorial! Me estaba volviendo loca y con este tutorial lo he conseguido a la primera. ¡Gracias mil!
EliminarHola Minerva Auora, personalize mi menu y le añadi un traductor, al momento de traducir todo bien, el unico problema q la barra desaparece, sabes el motivo, te mando imagen para q lo entiendas:
ResponderEliminarhttps://i.imgur.com/r4ursLi.jpg - Aparece la barra normal
https://i.imgur.com/n8yc3Wc.png - No aparece la barra al traducir
Curioso. Lo he comprobado también con el simulador del navegador y a mi si me se muestra. Supongo que pudiste arreglarlo.
Eliminarhola, excelente video como colocar submenus?
ResponderEliminarHola Minerva, tengo un blog en el que, como menú, lleva tres gadchets. No sé si funcionaría igual y no lo veo, me podrías indicar?
ResponderEliminarhttps://piesdefamosas1.blogspot.com/
Hola de nuevo, hice los cambios en un blog que tengo de pruebas y al final me funcionó. Ya te iré diciendo al trasladar los nuevos códigos al principal. Muchísimas gracias
EliminarUna duda que he visto te han preguntado pero no has contestado. Quiero poner el menú debajo de la cabecera, no encima como propones en el post. No sé hacerlo...me puedes indicar?
EliminarSalu2
Y otra duda... por qué no aparece la palabra MENU al lado de las tres rallitas en la versión móvil?
EliminarSalu2
Por cierto, lo puedes ver aplicado en este otro blog:
recordandoati.blogspot.com
Este comentario ha sido eliminado por el autor.
ResponderEliminarOtra cosa que me pasa en otro blog. Le he cambiado el fondo del menú y el color de las tres rayitas pero no se ve el botón con esas tres rayitas. Si pulso a la izquierda (donde se supone que está el menú) sí sale el desplegable con las etiquetas pero sigue sin aparecer el botón.
ResponderEliminarPor qué puede ser? Un saludo. La direccion del blog es https://caracolasenlasnubes.blogspot.com/
Ya lo he solucionado cambiando la opacidad, estaba en 0 y la he subido al 1 pero siguen sin aparecer las tres rayitas... por qué?
ResponderEliminarHola! tu tutorial ha sigo genial, pero me pasa un detalle. No me salen los iconos de redes sociales en la barra superior con el resto de categorías, me aparecen en vertical y los quiero en horizontal. Además han quedado muy pequeños.
ResponderEliminarTe dejo mi blog por si puedes revisarlo https://coichet4all.blogspot.com/
Muchas gracias.
¡Hola! Antes que nada muchas gracias por el tutorial, me ha servido mucho. Solo que tengo un problemita y me preguntaba si podrías ayudarme. Cuando agrego dos iconos más (el de goodreads y tiktok) no me aparecen (como si fueran invisibles) pero si paso el cursor si me dirigen a la pagina, además al ponerlos hace que los otros logos se me bajen, y si los quito todo se arregla. He tratado de modificar un poco el código pero ni así me funciona y me preguntaba si podrías echarle un vistazo a mi página. te la dejo aquí abajo. Gracias de antemano, me encanta tu contenido.
ResponderEliminarhttps://golddenwordsbooks.blogspot.com/
¡Buenas Minerva!. Estamos en 2023 y me he estado pasando por tu blog para retocar el mío. Buenísimos todos tus posts :)
ResponderEliminarBien, como tengo 0,00 conocimiento de html y css me ha costado bastante implementarlo y es que resulta que se veía bien en el celu pero en la pc se veía desordenado y apretujado...Metiendo mano, me fui al @media de mi plantilla(Simple) y modifiqué el número por defecto del ancho máximo que aceptaba el menú en pantalla grande, y en mi caso, probé en 1500px.
¡Y funcionó!, hahah. Lo publico por si a alguien le sirve:
@media screen and (max-width: 1500px) {
/* #masthead is the original menu */
#navtop {
display:none;
}
Me he vuelto ''changa'' como decímos acá, pero valió la pena...¡Mil gracias y saludos desde Argentina!.
Mil gracias por el aporte, pero ¿cómo se podrían añadir subcategorías a las subcategorías? Es decir, que la Subcategoría 1 también pueda mostrar subcategorías 1.1,1.2, 1.3...
ResponderEliminar