Tutoriales blogger: Cuatro tipos de menús

13/9/17



Esta semana no pude poner un tutorial de blogger así que ahorita les traigo uno muy pero muy lindo! se tratan de cuatro lindos navegadores para que adornen su blog tan bonito como el mio. Este tutorial lo saque de kawaiilady un blog en inglés así que trate de traerlo al español especialmente para ustedes.



Antes que nada ACA pueden observar los navegadores en acción, para agregarlo solo tienen que ir a Diseño/ agregar un gadget:


Y agregar el menu que más les guste! cambiando, obviamente, los links por los suyos:



<style>
@import url('https://fonts.googleapis.com/css?family=Amatica+SC');
.tablo{font-size:15px;
color:black;
text-transform:uppercase;
background:#FFF9FA;
font-family: 'Amatica SC', cursive;
text-decoration:none;
padding:3px;
width: 50px;
display:inline-block;
border:1px solid #FFE3E6;
margin-top: 5px;margin-bottom: 5px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
.tablo:hover {
background:#FFC6CF;
color:white;}
</style>
<center>
<div style="background: #ffebed; border: 2px solid #ffeeee; border: 3px solid #ffffff; box-shadow: 0px 2px 2px 2px #ffeeee; margin-bottom: 7px; margin-top: 7px; width: 260px;">
<a class="tablo" href="http://susurrandolibros.blogspot.mx/">Inicio</a>
<a class="tablo" href="http://susurrandolibros.blogspot.mx/">Reseñas</a>
<a class="tablo" href="http://susurrandolibros.blogspot.mx/">Wrap up</a>
<a class="tablo" href="http://susurrandolibros.blogspot.mx/">Anime</a>
</div>
</center>



<style>
.haha{
width:60px;height:40px;
box-shadow:0px 0px 2px 3px #FFE9C6;
background:#FFF9E1;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#888888;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding-bottom:5px;
padding-top:20px;padding-left:0px;padding-right:0px;
display:inline-block;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}

.haha:hover{
background:#FFFFFF;
color:#777;
border-top-right-radius: 35px;
-webkit-transform: rotate(-50deg) ;
-moz-transform: rotate(-50deg) ;
-o-transform: rotate(-50deg) ;
-ms-transform: rotate(-50deg) ;
}
</style>
<center>

<a class="haha" href="http://susurrandolibros.blogspot.mx/">Inicio</a>
<a class="haha" href="http://susurrandolibros.blogspot.mx/">Reseñas</a>
<a class="haha" href="http://susurrandolibros.blogspot.mx/">Wrap up</a>
<a class="haha" href="http://susurrandolibros.blogspot.mx/">Anime</a>
</center>




<style>
.lola{
width:51px;height:35px;
padding-top:17px;
text-transform:uppercase;
border: 1px solid #E7F4FF;
background:#EFF8FF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin:5px;margin-bottom:20px;
display:inline-block;
border-radius: 100%;
}
.lola:hover{
background:#FFFFFF;
color:#FFFFFF;text-shadow:0px 37px 0px #333333;
-webkit-transform: rotate(-360deg) ;
-moz-transform: rotate(-360deg) ;
-o-transform: rotate(-360deg) ;
-ms-transform: rotate(-360deg) ;
}
</style>


<center>

<a class="lola" href="http://susurrandolibros.blogspot.mx/">Inicio</a>
<a class="lola" href="http://susurrandolibros.blogspot.mx/">Reseñas</a>
<a class="lola" href="http://susurrandolibros.blogspot.mx/">Wrap up</a>
<a class="lola" href="http://susurrandolibros.blogspot.mx/">Anime</a>
</center>


<style>
.leaf {
width:55px;height:30px;
padding-top:15px;
text-transform:uppercase;
border: 3px solid #E2FFD5;
background:#E8FFE1;
font:11px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin:3px;
display:inline-block;
border-radius: 100%;
border-top-right-radius:0px;
}

.leaf:hover{
background:#FFFFFF;
color:#000000;
border: 3px solid #E8FFE1;
background:#E2FFD5;
border-top-right-radius:100%;
border-bottom-left-radius:0px;
}
</style>
<center>

<div style="background: #fffcf2; border: 2px solid #ffffff; box-shadow: 0px 0px 2px 3px #fff9e7; padding: 5px; width: 280px;">

<a class="leaf" href="http://susurrandolibros.blogspot.mx/">Inicio</a>
<a class="leaf" href="http://susurrandolibros.blogspot.mx/">Reseñas</a>
<a class="leaf" href="http://susurrandolibros.blogspot.mx/">Wrap up</a>
<a class="leaf" href="http://susurrandolibros.blogspot.mx/">Anime</a>

</div>
</center>


Si les gusto no se olviden compartir en sus redes sociales el tutorial!

1 comentario:

  1. Hola!!
    Q genial el tutorial, estan muy bonitos los menús :D
    Saludos!

    ResponderEliminar

Comenta, tus comentarios son muy importantes para nosotras !!