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!
