11/11/13

Tutorial: Menú Flotante

Heeeeeey Hola image Ya nos habíamos saludado en la entrada anterior x3 Pero bueno para los que no había visto antes, Holaaaa! >w< Hooooooooooy, bueno, estoy hiperactiva, ¡¡SOMOS 45!! image (cara de exaltación y felicidad) Awww :'3 voy por los 50 image Estoy feliiz, por eso
Les traigo un menú flotante [ de Yukii ] super chulo para que uses en tu blog image 

Lo que debes hacer es pegar este código en Diseño>>Añadir gadget>>HTML/Javascript
<style>
.raejun{
width:96px;
padding:2px;
margin-top:5px;
box-shadow:2px 2px 4px #DFDFDF;
background:#eee;
font:8px tt; 
text-align:center;
Text-decoration:none;
color:#FF8888;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:0px solid #FF8888;
}

.raejun:hover{
width:66px;
border-left:30px solid #FFBBBB;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:fixed; top:100px;left:R;width:100px; color:#aaa;">
<div style="background:#FFBBBB;color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:uppercase;">
Navi</div>
<img src="http://i.imgur.com/DO8LY.png" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" >

<a class="raejun" href="URL">Link 1</a>
<a class="raejun" href="URL">Link 2</a>
<a class="raejun" href="URL">Link 3</a>
<a class="raejun" href="URL">Link 4</a>
</div>
Rojo: El link de tu página o entrada
Verde: El texto que te llevará al link anterior.
Celestito: El URL de tu iconito
Eso es todo:3

6 comentarios:

  1. ¡¡¡Se ve súper !!! :3
    Gracias por compartirlo

    ResponderEliminar
  2. Gracias por compartirlo :)
    Puede que me anime alguna vez a colocarlo ^^

    ResponderEliminar
  3. Está genialoso ^w^
    Saludillos 4u!! ♫♫♫

    ResponderEliminar
  4. Muy bueno!! Waaaaa 45 seguidores kawaiis *-* Felicidades, pontro en unos dias llegarás a los 50 ya verás ;3 Un saludo (^^) *sale corriendo a hacer una tarta* si, tengo hambre ;n;

    ResponderEliminar
  5. Es demasiado genialoso~ una vez intenté ponerlo pero no me salió, güiiiiii~
    Intentaré de nuevo a ver que tal x3. AH! Felicidades por los 45 seguidores~ :D.

    ResponderEliminar

Reglas:
-Respeto
-No insultar

¡Gracias por comentar!

Emojis:
(∩ω∩) | (>△<) | (>▽<) | (⊙▽⊙) | (●ω●) | (╯ω╰) | (☆▽☆) | (≧ω≦) | ≡(▔﹏▔)≡
Simbolos:
☺♥♫△☆ღ