¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

TUTORIAL BLOGGER #24 | Menú responsable con iconos de redes sociales para Blogger mas buscador | *ACTUALIZACION*

Publicado el 10 octubre 2021 por Kc

Tutorial Blogger #24 | *Actualización*

¡Qué tal Lectores!!

 Espero esten todos bien, hoy vamos a actualizar este TUTORIAL que anteriormente ya les había subido al blog (pueden verlo aquí). Font Awesome tiene una nueva versión y lamentablemente no coincide con la versiones anteriores por lo cual debemos actualizar nuestros iconos; por lo cual, ahora vamos a ver los pasos, que son casi los mismos que el anterior.

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

1. Instala Font Awesome, la fuente de  iconos web

En el panel de administración de Blogger selecciona la opción plantilla y clica  en el botón Editar HTML. Mediante el buscador (clica a la vezCTRL + F) busca la etiqueta</head> .Justo antes de esta línea de código pega lo siguiente:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

2. HTML MENU

Este menú está pensado para que permanezca fijo en la zona superior de la pantalla por lo que deberás copiar el siguiente código después de la etiqueta <body> de tu blog, si tienes instalada la plantilla simple de Blogger te aparecerá algo más larga, tal que así  <bodyexpr:class='&quot;loading&quot; + data:blog.mobileClass'>Personaliza el siguiente código y añádelo justo debajo del body.
<navid='menu'>
   <divclass='barra'>
   <inputtype='checkbox'/>
   <label><iaria-hidden='true'class='fas fa-bars'/></label>
   <ulclass='principal'>
   <li><ahref='/'>Inicio</a></li>
   <li><ahref='LINK AQUI'>Sobre mí</a></li>
   <li><ahref='LINK AQUI'>Categorías <iclass="fas fa-chevron-down"></i></a>
   <ulclass='menus'>
   <li><ahref='LINK AQUI'>Categoría 1</a></li>
   <li><ahref='LINK AQUI'>Categoría 2</a></li>
   <li><ahref='LINK AQUI'>Categoría 3</a></li>
   </ul>
   </li>
   <li><ahref='LINK AQUI'>Contacto</a></li>
   </ul>
   <divclass='iconos'>
   <ahref='LINK REDES AQUI'><iaria-hidden='true'class='fab fa-twitter'/></a>
   <ahref='LINK REDES AQUI'><iaria-hidden='true'class='fab fa-facebook'/></a>
   <ahref='LINK REDES AQUI'><iaria-hidden='true'class='fab fa-instagram'/></a>
   <ahref='LINK REDES AQUI'><iaria-hidden='true'class='fab fa-goodreads-g'/></a>
      </div>
      <divid='buscador'>
         <ahref='#'><iclass='fas fa-search'/></a>
      </div>
      <divclass='busqueda'>
         <formaction='/search'id='searchform'method='get'role='search'>
            <div><inputid='s'name='q'placeholder='Escribe y pulsa enter...'type='text'/></div> 
         </form>   
      </div>
   </div>
</nav>
Si deseas añadir más categorías deberás abrir nuevas etiquetas  <li>
<li><ahref='LINK AQUÍ'>CATEGORÍA</a></li>
Los iconos sociales se añaden mediante etiquetas <i> con la clase que nos da la página oficial de la fuente Awesome. Cada red social se representa en una línea, por ejemplo:


<ahref='LINK AQUI'><iaria-hidden='true'class='fab fa-twitter'/></a>
Donde dice LINK AQUÍ debe ser sustituido por la URL de tu página a la cual quieres enlazar tu categoría o icono de redes sociales

3.Añade el código CSS

Ahora desplázate en tu plantilla hasta este código]]></b:skin>. Justo antes pega las siguientes líneas:
/*-----------------------------------------------
Menu responsive de MBT modificado por Kc de Entre Letras 
----------------------------------------------- */
body {
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
.barra{
width:1020px;/*ancho del blog*/
margin:0 auto;
position: relative;
}
#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);
width:100%;
position:fixed; 
z-index:101; 
}
#menu ul,#menu li{
margin: 0px auto;
padding:0 0;
list-style:none;
}
#menu .iconos{
float:right;
margin-right: 70px;
}
#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;
text-decoration: uppercase;
color: #333;/*color del texto*/
text-transform: uppercase;
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: 70px;
display: inline-block;
}
#menu .iconos .fa{
font-size:14px;
line-height: 70px;
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: -2px;
}
#menu .iconos .fa:hover{
color: #999;/*color del icono social al pasar el ratón*/
}
#menu .iconos::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: #000;
    margin-left: 5px;
    opacity: .1;
}
#buscador {
position:absolute;
right:0;
top:0px;
width:50px;
text-align:center;
}
#buscador a {
height: 50px;
font-size: 14px;
line-height: 50px;
color: #333;
display: block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 50px;
}
#buscador a:hover {
color:#999;
}
.busqueda{
position:absolute;
top:50px;
right:0px;
display:none;
z-index:10000;
}
.busqueda #searchform input#s {
border: 1px solid #e5e5e5;
width:190px;
background:#FFF;
padding: 7px 10px;
font-size: 12px;
color: #999;
letter-spacing: 1px;
display:block;
opacity:1;
}
.busqueda #searchform input#s:focus {
border:1px solid #d5d5d5;
}
@media screen and (max-width: 800px){ 
#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;
}
#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;
}
.busqueda{
right:212px!important;
}
}
header{
padding-top:60px;
}
/*-----fin menu responsive-----*/

Lo primero que deberás personalizar es el ancho del menú. En la siguiente línea cambia 1020px por el ancho de tu blog.
barra{
width:1020px;/*ancho del blog*/
margin:0auto;
}

Los elementos susceptibles de a ser personalizados los encuentras comentados en el código de esta manera /*--- comentario ---*/La última regla empuja la cabecera hacia abajo para que no quede tapada por el menú. Está programada sólo para la plantilla simple de Blogger, si usas otra plantilla posiblemente no funcionará bien.

header{
padding-top:50px;
}

4.Añade el script de funcionamiento del buscador

Busca la etiqueta </html>, y justo antes de ella copia el siguiente código:
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> $(document).ready(function(){ $('#buscador a').on('click',function(e){ epreventDefault(); $('.busqueda').slideToggle('fast');});});</script>
La primera línea de código carga la biblioteca jQuery necesaria para que se entienda la siguiente línea, y aparezca la cajetilla de búsqueda. Si ya la tienes enlazada en tu blog porque la añadistes en otro tutorial óbviala, no dupliques la llamada. El script es tan sumamente sencillo que te servirá cualquier versión de jQuery, aunque sea más antiguo.


Guarda los cambios hechos y comprueba si funciona en tu blog el nuevo menú responsive.
Si algo se resiste revierte los cambios en la plantilla (CTRL + Z) y vuelve a intentarlo, a veces una simple llave mal cerrada puede causar estragos. Si aún sigue sin funcionar eres libre de comentar aquí abajo tu incidencia.

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Esto sería todo.Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir!!Besitos¡¡Kc...

¿Te gusta lo que hago? Me ayudas

í