Tutoriales para personalizar Blogger
  1. blogger personalización

Menu pegajoso con Redes Sociales


He visto muchas páginas donde tienen su menu en la parte superior y que al hacer scroll (deslizarse verticalmente) el menu se desliza también y se mantiene siempre en la parte superior de la pantalla. En HoyGeek ya tenemos un tutorial sobre un menu pegajoso para plantillas oficial de Blogger, hoy traemos lo mismo pero para cualquier plantilla (ya sean oficiales o no de Blogger).

Lo nuevo de este menu pegajoso es que le agregamos nuestras Redes Sociales. De esta forma podremos ganar más seguidores en nuestra páginas de Facebook, Twitter, Instagram, etc.


Lo primero que tenemos que hacer es dirigirnos a la sección Plantilla > Editar HTML y buscamos la etiqueta <body> y justo debajo de ella pegamos el siguiente código:

<!--Menu Pegajoso -->
<div id="sticky-menu">
  <nav id="menu">
    <ul>
      <li><a href="URL-página">Inicio</a></li>
      <li><a href="URL-página">Quiénes Somos</a></li>
      <li><a href="URL-página">Contacto</a></li>

      <li class="social">
        <a href="URL-social" target="_blank"><img src="URL-icono-social" alt=""/></a>
        <a href="URL-social" target="_blank"><img src="URL-icono-social" alt=""/></a>
        <a href="URL-social" target="_blank"><img src="URL-icono-social" alt=""/></a>
      </li>
    </ul>
  </nav>
</div>
Ahora veremos que es lo que tenemos que modificar:

  • URL-página   =>   Enlace de la página donde quieras que se dirija al hacer click
  • URL-social   =>   Enlace de tu Red Social
  • URL-icono-social   =>   URL de la imagen de tu red social

Aquí te dejo el pack de iconos que use en el ejemplo.

Luego de cambiar los enlaces por los que nosotros queramos. Seguimos con el siguiente paso que es agregar los estilos del menu. Para agregarlos hay dos formas, la primera es mediante el Editor de HTML y la segunda es con el Editor de Plantillas, sobre esta última tenemos un video explicando su funcionamiento.

En este caso usaremos el Editor de HTML, entonces entramos a Plantilla > Editar HTML y buscamos la siguiente etiqueta ]]></b:skin> y justo antes de esta etiqueta pegamos lo siguiente:

#sticky-menu {
  background: #462917; /*Color de la barra*/
  width: 100%;
  height: 40px; /*Alto de la barra*/
  padding: 7px 0 0;
  position: fixed;
  z-index: 101;
  letter-spacing: 2px; /*Espacio entre las letras*/
}

#menu {
  margin: 0 auto;
  width: 920px; /* Ancho del menu */
  height: 30px;
}

#menu ul {
  background: none;
  margin: 0px;
  padding: 0;
  list-style-type: none;
  height: 25px;
}

#menu ul li {
  display: block;
  float: left;
  height: 30px;
  padding: 10px 10px 0 10px;
}

#menu ul li a {
  display: block;
  float: left;
  color: #fff; /* Color del texto */
  font: 12px "Arial"; /* Tamaño y tipografia del texto*/
  text-decoration: none;
}

#menu ul li a:hover {
  color: #8c7e75; /* Color del enlace al pasar el cursor */
  height: 20px;
}

#menu ul li.social { padding: 0; float: right; }

#menu ul li.social a { margin: 0 5px; }

#menu ul img {
  width: 30px;
  height: 30px;
  border: 0;
}
Todas las propiedades que tienen comentario son los que podemos modificar, entre ellos tenemos: el color de fondo, ancho del menu, color del texto, entre otros.

Algo que podemos modificar también es el tipo de letra que usaremos, para ello ya tenemos un tutorial sobre Como cambiar el tipo de letra en nuestro blog.




Menu pegajoso con Redes Sociales 4.5/5 - 209

¿Tienes alguna duda?

  1. hola tengo una pregunta, como puedo hacer que este mismo menu este junto a la cabecera de mi blog osea el titulo al lado izquierdo del menu y que baje con el

    ResponderBorrar