Cutie ☆ Source

Hola ♥ Les tengo un menú muy lindo, y les quiero hablar sobre un concurso!

Este menú parece una flor de sakura y eso me gustó mucho así que decidí compartirlo con ustedes porque, para eso tengo un blog >//<.
Otra cosa, me di cuenta de que casi nadie está en blogger en la semana así que publicaré los finde!

Queda así cuando se le hace hover con un efecto muy bonito y no estático.

Muy bien, empezemos.

Plantillas Blogger: Debes pegar este codigo arriba de ]]></b:skin>

Plantillas Clásicas: Debes pegar este codigo justo arriba de </style>

/* SAKURA MENU  by cutie and help of htmltutor*/
    #t1{
    border-top-right-radius: 15px;/*THE BIGGER THE NUMBER, THE ROUNDER*/
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 15px;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
    font-size:14px; color: #7777777;
    background: #ffffff;
    position:fixed;
    left:30px; top:30px; /*THIS IS THE DISTANCE AWAY FROM EACH OTHER*/
    text-align: center;
    padding: 7px;
    bottom: 0px;
    height:20px; width: 20px; /*CHANGE SIZE HERE*/
    overflow:hidden;
    border: 2px solid #ffbdfb;/*CHANGE BORDER HERE*/
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    z-index:25;
    }
     
    #t1:hover{
    text-align: center;
    border-top-right-radius: 15px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 2px solid #ffbdfb; /*CHANGE BORDER ON HOVER HERE*/
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    padding:5px;
    height:440px; width:210px; /*CHANGE BORDER DIMENSIONS HERE peanut*/
    z-index:25;
    opacity: 2.0;
    background:white;
    }
     
    .ttitle {
    background: #E3E4FA;
    padding: 5px;
    font-size: 12px;
    }
     
    #t2{
    border-top-right-radius: 0px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0px;
    font-size:14px; color: #7777777;
    background: #ffffff;
    position:fixed;
    left:70px; top:30px;
    text-align: center;
    padding: 7px;
    bottom: 0px;
    height:20px; width: 20px;
    overflow:hidden;
    border: 2px solid #ffbdfb;
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    z-index:24;
    }
     
    #t2:hover{
    text-align: center;
    border-top-right-radius: 15px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 2px solid #ffbdfb;
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    padding:5px;
    height:150px;
    width:170px;
    z-index:24;
    opacity: 2.0;
    background:white;
    }
     
    #t3{
    border-top-right-radius: 0px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0px;
    font-size:14px; color: #777777;
    background: #ffffff;
    position:fixed;
    left:30px; top:70px;
    text-align: center;
    padding: 7px;
    bottom: 0px;
    height:20px; width: 20px;
    overflow:hidden;
    border: 2px solid #ffbdfb;
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    z-index:23;
    }
     
    #t3:hover{
    text-align: center;
    border-top-right-radius: 15px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 2px solid #ffbdfb;
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    padding:5px;
    height:130px;
    width:170px;
    z-index:23;
    opacity: 2.0;
    background:white;
    }
     
    #t4{
    border-top-right-radius: 15px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 15px;
    font-size:14px; color: #777777;
    background: #ffffff;
    position:fixed;
    left:70px; top:70px;
    text-align: center;
    padding: 7px;
    bottom: 0px;
    height:20px; width: 20px;
    overflow:hidden;
    border: 2px solid #ffbdfb;
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    z-index:22;
    }
     
    #t4:hover{
    text-align: center;
    border-top-right-radius: 15px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 2px solid #ffbdfb;
    -webkit-transition: opacity 0.7s linear;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    padding:5px;
    height:130px;
    width:170px;
    z-index:22;
    opacity: 2.0;
    background:white;
    }
     
    /*END OF SAKURA MENU by cutie and help of htmltutor*/

Cuando ya hayas hecho lo primero, deberás hacer lo siguiente.
Ve al fin o al inicio de tu plantilla y pega esto.

<div class="wrapper">
     
    <div id="t1">
   
<center>
<img src="http://media.tumblr.com/b0a1ae2c577b3bde3dadcfda60d3ae86/tumblr_inline_mkp7ouaoPy1qz4rgp.gif" /></p>
<p>
Aqui el código de tu chat, está ajustado para el tamaño original, que es el largo.

</center>
</div>
<div class="wrapper">
     
    <div id="t2">
     
    <b><div style="font-size: 32px;">
<img src="http://media.tumblr.com/7237fa8029fa82486735405b3418cc2d/tumblr_inline_mkp7p3Hgeo1qz4rgp.gif"></a></div>
</b><br>
     
    <div style="background:#fffaf0; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; padding: 8px;font-size: 23px;">
<b>networks</b></div>
<p>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Edita el texto</span>
    </p>
</div>
</div>
<div class="wrapper">
     
    <div id="t3">
     
    <b><div style="font-size: 32px;">
<img src="http://media.tumblr.com/780c06d5fd1e4a92acadf62dbdd6a3ac/tumblr_inline_mkp7ot9Lox1qz4rgp.gif"></a></div>
</b><br>
     
    <div style="background:#fffaf0; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; padding: 8px;font-size: 23px;">
<b>networks</b></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Edita el texto</span>    </div>
</div>
<div class="wrapper">
     
    <div id="t4">
     
    <b><div style="font-size: 32px;">
<img src="http://media.tumblr.com/58da7c7ccb175f21516b1bea9bdf5644/tumblr_inline_mkp7nr0OZa1qz4rgp.gif"></a></div>
</b><br><p>
<div style="background:#fffaf0; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; padding: 8px;font-size: 23px;">
<b>networks</b></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Edita el texto</span>
    </p>
</div>
</div>

Y ya tienes tu menú sakura!
Yo lo coloqué en un lugar donde no estorbara tanto, como el final del blog.
La magia del border radius hace que parezcan pétalos *-*
El contenido que tenga pueden ser links a páginas así como

MI FACEBOOK
MI CANAL YOUTUBE

o tambien una biografía tuya, o listas de cosas (? hay muchas opciones.
Si hay problemas hazme saber para poder arreglarlo.
LIVE PREVIEW

Ahora les quiero hablar sobre el nuevo concurso de Dayi, que está muy muy interesante. Ok, mi frase pegajosa es horrible pero me encanta participar en concursos, las reglas están en su post que lo puedes leer yendo aquí. Ok mi frase pegajosa es.. #frasepegajosa "seguiré kawaii aunque esté en hawaii" aunque sea muy basura no la copies! (paranoica) Y pues bueno, deberían participar porque lo encontré muy original y yo participo porque.. nosé lo encontré divertido ajdskdf, bueno eso sería todo, espero que se unan y usen el menú que les dejé arriba eh, nos vemos pronto, bye chicas ;3; Los quiere, Cutie.

Etiquetas: concurso, menu, tutorial

sábado, 21 de marzo de 2015 posted at 8:23 p.m.