17/2/13

Tutorial:Floating Menu III


Hi my sweet bloggers~
como estan?espero que muuuuuy bien

hoy vengo a traerles un tercero estilo de menu flotante ,espero les guste.
example:

                


empezemos:




❤Como siempre para las chicas que usan blogskin deberan pegar el codigo antes de  </style>

❤ Y para las que usan plantilla de diseñador deberan pegar el codigo en un gadget html/javascript

aclarado esto les dejo el codigo:


<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:20px;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="url de la imagen" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" >
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
</div>




aqui deberan pegar la url de la imagen de cabezera que tendra el menu y
lo demas ya saben que pueden ir jugando con los valores hasta que
quede al gusto de ustedes.

cualquier duda que tengan solo pregunten y les contestare
lo antes posible.

y eso a sido todo,muy facil cierto?
bueno nos vemos en otra entradita


bye bye~

Atte. Tetsuki 


3 comentarios:

  1. Me encanto este tuto :) muy lindo la verdad! ♥

    ResponderEliminar
  2. ¿Por qué debería darte los créditos a ti si solo has COPIADO Y PEGADO este tuto de Wanaseoby? :S http://wanaseoby.blogspot.com.es/2012/10/floating-navigation-3.html

    ResponderEliminar
    Respuestas
    1. disculpa pero yo no lo he copiado y pegado por que yo lo acomode a mi estilo,por eso deje de ejemplo la imagen por que asi se ve el mio,no voy a negar que tome como base el de Wanaseoby.

      ahora si no quieres dar credito ese es problema tuyo,no los estoy obligando a nada.

      ahora para la proxima no me molestaria que dejaras tu nombre,personas que se ponen anonimo es solo para armar problemas y no caere en provocaciones.

      Eliminar