Menú minimalista con efecto zoom para Blogger

En el blog ya he compartido varios menús, hoy compartiré otro más, en esta oportunidad se trata de un menú minimalista con efecto zoom para Blogger, si pasamos el cursor por encima del menú veremos un efecto zoom, cabe resaltar que el menú se realizó con un poco de CSS y HTML, siendo muy ligero, por lo que no sobrecargará tu web.

Menú minimalista con efecto zoom para Blogger
Menú minimalista con efecto zoom para Blogger

Para añadir este menú en tu blog, ve a Diseño y en un gadget HTML/JavaScript (preferiblemente debajo de la cabecera del blog) añade lo siguiente:

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font-size:16px;
}
ul.arrowunderline li{
display:inline;
margin-right:12px;
}
ul.arrowunderline li a{
position:relative;
color:orange;
padding-bottom:3px;
text-decoration:none;
}
ul.arrowunderline li a:hover{
font-weight:bold;
font-style:italic;
font-size:20px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:0px;
bottom: 0;
border-width:0px;
border-style:solid;
border-color: transparent transparent red transparent;
}
</style>
<ul class="arrowunderline">
<li><a href="URL del enlace">Inicio</a></li>
<li><a href="URL del enlace">Perfil</a></li>
<li><a href="URL del enlace">Instagram</a></li>
<li><a href="URL del enlace">Facebook</a></li>
<li><a href="URL del enlace">Twitter</a></li>
<li><a href="URL del enlace">Linkedin</a></li>
</ul>

Lo qué está dentro de <ul class="arrowunderline"></ul> corresponde al HTML que se puede editar.

A continuación se muestra una vista previa del menú:


Entradas que pueden interesarte

disqus