Tutorial Blogger #4: menú Blogger con iconos sociales
Publicado el 24 enero 2021 por Kc
Menú | Sub-menú | Iconos sociales
Que tal Lectores!!!Como pudieron ver en el tutorial Blogger #3 añadimos un menú responsable, adaptable a dispositivos móviles con buscador. Ahora vamos a ver otro estilo de menú sin el buscador es exactamente igual al que tengo en el blog. Por lo tanto los pasos son los mismos o casi iguales al anterior. *Recuerda que todo esto es gracias al blog de Odisea GraficaPD: esta entrada no es patrocinada.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.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
CTRL+C. (copiar) CTRL+V. (pega)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="https://entreletrasnoesunblogderesenas.blogspot.com/">Inicio</a></li> <li><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL">Sobre mi</a></li> <li><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL">Categorías <i class="fa fa-chevron-down"></i></a> <ul class="menus"> <li><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL">Categoría 1</a></li> <li><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL">Categoría 2</a></li> <li><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL">Categoría 3</a></li> </ul> </li> <li><a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL">Contacto</a></li> </ul> <div class="iconos"> <a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL"><i aria-hidden="true" class="fa fa-twitter"></a> <a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL"><i aria-hidden="true" class="fa fa-facebook"></a> <a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL"><i aria-hidden="true" class="fa fa-instagram"></a> <a href="https://entreletrasnoesunblogderesenas.blogspot.com/feeds/posts/AQUI URL"><i aria-hidden="true" class="fa fa-pinterest-p"></a> </div> </div></nav>
Para eliminar o añadir iconos de redes veamos como funciona. Fíjate que cada red social se representa en una línea. Por ejemplo:<ahref='AQUI URL'><iaria-hidden='true'class='fa fa-twitter'/></a>
Entre <a href='AQUI URL'> 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 Awesome3. 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*/
si deseas personalizarlo, y tienes ciertas nociones de CSS, cambia aquellas reglas en las que se añadido comentarios encerrados así /*comentario*/ .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:0auto;}
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.
Esto seria todo.Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir!!Besitos¡¡Kc... ¿Te gusta lo que hago? Me ayudas
í
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure