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 ❤