Magic Button Flotante.

Perdón por la demora, pero aquí esta el tutorial que me pedían.
Para colocar nuestro cosito magico vamos a:
Plantilla / Edición HTML / Buscas [CTRL +F] la linea:
<body 
ARRIBA de ella pegas el siguiente código:
<link href='http://fonts.googleapis.com/css?family=Kristi' rel='stylesheet' type='text/css'/>
<div style='position: absolute; left: 480px; top: 50px; z-index: 1;'>
<ul class='ca-menu'>
    <li>
        <a href='URL LINK'>
            <span class='ca-icon'>ICON ALT + NRO</span>
            <div class='ca-content'>
                <hM class='ca-main'>TITULO PRINCIPAL</hM>
                <hM class='ca-sub'>TITULO SECUNDARIO</hM>
            </div>
        </a>
    </li>
</ul>
</div>
<style>
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 370px;
}
.ca-menu li{
    width: 420px; /* ANCHO DEL MENU */
    height: 90px; /* ALTO DEL MENU */
    overflow: hidden;
    position: relative;
    display: block;
    border-radius: 20px; /* BORDES REDONDEADOS */
    background: #fff; /* FONDO DEL MENÚ */
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
    margin-bottom: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333; /* COLOR DE LOS TITULOS */
    position: relative;
}
.ca-icon{
    font-size: 60px;
    color: #d7b6ff; /* COLOR DEL ICON ALT + NRO */
    text-shadow: 0px 0px 5px #d7b6ff; */ SOMBRA DEL ICON */
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 0px;
}
.ca-main{
        margin-top: 17px;
        font-family: Kristi , cursive; /* FUENTE DEL TITULO 1 */
        font-size: 30px;
        -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
        display: block;
}
.ca-sub{
   margin-left: 50px;
}
hM {
   font: 11px arial;
   text-transform: uppercase;
}
.ca-menu li:hover{
    background-color: #95d0d6; /* FONDO DEL MENÚ HOVER */
}
.ca-menu li:hover .ca-icon{
    color: #fff;
    font-size: 120px;
    opacity: 0.2;
    left: -20px;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
    color: #fff; /* COLOR HOVER DEL TITULO 1 */
    opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
    color: #fff; /* COLOR HOVER DEL TEXTO 2 */
    opacity: 0.8;
}
</style>
Edita lo marcado.
Para ubicarlo en la cabecera o donde gustes, edita la linea marcada en cursiva:
left: 480px; top: 50px; {left: izquierda / top: arriba}
Para cambiarle la fuente al Titulo Principal {o Titulo 1} cambia la siguiente linea:
<link href='http://fonts.googleapis.com/css?family=Kristi' rel='stylesheet' type='text/css'/>
& la fuente del titulo:
font-family: Kristi , cursive; /* FUENTE DEL TITULO 1 */
ayudándote con el tutorial: Letra original "title post".

¿Que es el ICON ALT + NRO?
Lo nombre asi, ya que son conocidos como los signos que realizamos con el teclado, presionando ALT + {un nro cualquiera}.
Los ejemplos mas comunes: ♥ ♣ ♠ ♦ ☼ ♪ ♫ et.
Les dejo nuevas variedades: ✪ ❅ ❆ ✿ ❀ ❤ ❥ ✦ ✧ ✰ ✎ ✐ ♡ ♬ ♭ ☮ ☯ ☪ ☆ ★ ☂ ☀ ▶ ▷ ▲ △ ◉ ◀ ◁ ▼ ▽ ◈ ◇.
{CODIGOS}

15 comentarios:

  1. Kotomi★Chan26 de febrero de 2013 a las 11:11

    Gracias che!! te agradesco Muhco siempre atenta♥ lo colocare en mi blog de pruebas♥♥ Arigato!!
    bai~

    ResponderEliminar
  2. кuму26 de febrero de 2013 a las 11:15

    muchas gracias *0* me encanto a por cieto te sigo desde hace mucho me gustaria ke te pasaras por mi blog n.n gracias
    http://clasicylove.blogspot.com.es/?m=1

    ResponderEliminar
  3. hotaru ♡ 26 de febrero de 2013 a las 12:39

    *u* hooo gracias por el tuto, lo intentare en mi blog de prueba, porque soy tan mala con los codigos T_T un beso !!!

    ResponderEliminar
  4. POPOTAN26 de febrero de 2013 a las 14:17

    >.< interesante efecto... wow mucho tiempo de nuevo... la verdad que estare mas ocupado, ya que se terminan mis vacasiones y regreso al trabajo TTwTT bueno aun asi seguire atento a mi blog... saludos mi adorada princesa... besotes.

    ResponderEliminar
  5. Cookie26 de febrero de 2013 a las 15:13

    Siempre tenia la duda respecto a como lo hacias, gracias por compartirlo con nosotras ^^

    ResponderEliminar
  6. yuuu27 de febrero de 2013 a las 7:18

    Me encanta tu blog te he afiliado en el mío en beautiful club: es dónde pongo los blogs más bonitos que encuentro (algunos son de mis amigas) Bueno cuando puedas visita misslucya.blogspot.com Please!!!
    Un beso Miss Lucy.

    ResponderEliminar
  7. Tania Medina S.27 de febrero de 2013 a las 19:42

    Konichiwa Mel,
    Aún no aparezco en tu lista de afiliados u.u

    ResponderEliminar
    Respuestas
    1. Mell!★//28 de febrero de 2013 a las 7:55

      COMO!? <33
      Ya te estoy agregando... Disculpa, tengo una mexcla con los afiliados Cx

      Eliminar
  8. yuuu28 de febrero de 2013 a las 3:19

    Tienes un premio en mi blog http://misslucya.blogspot.com.es/2013/02/premio-al-blog-que-nunca-duerme.html

    ResponderEliminar
  9. yuuu28 de febrero de 2013 a las 4:25

    Perdón el enlace es el siguiente http://misslucya.blogspot.com.es/2013/02/premio-al-blog-que-nunca-duerme.html#comment-form
    siento las molestias

    ResponderEliminar
  10. Anónimo28 de febrero de 2013 a las 9:24

    Hola! Hermoso tutorial, seguro algún dia lo aplicare en mi blog >w<!! Por cierto, te envié un email ^^ espero que lo leas owo saludos!!!! :3

    ResponderEliminar
    Respuestas
    1. Mell!★//28 de febrero de 2013 a las 10:54

      Ya lo leí <33 & Respondí también, MUCHAS GRACIAS otra ves <33

      Eliminar
  11. S4kuya-Desu7 de marzo de 2013 a las 10:06

    me faltan mas imagenes graficas de como quedara el efecto XDDDD

    ResponderEliminar
  12. terapia30 de abril de 2014 a las 17:29

    deberías poner una preview para poder visualizar el efecto

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)