Bueno, he estado liado está semana y ya es hora de algo nuevo. ¡Ya hemos llegado a los 20 seguidores! Muchas gracias a todos \(>.<)/ Estoy muy feliz pero... no se creerán que no lo celebraré ¿no? Este sábado actualizaré el blog y comenzaré con las clases de dibujo/diseño a demás de que puede que vaya a crear un concurso aunque nadie se presente, en fin, ahora el tutorial. VAMOS, Vamos, vamos
Se trata de el menú a la izquierda de este blog de pruebas (es el gadget navi) Para ponerlo nos vamos a añadir un gadget y ponemos esto:
Y ya esta, donde pone link here va el link y donde pone link *numero* va el nombre del link. Lo que está en azul es la foto del menú. Recuerden estar atentos al blog (*-*)
<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="http://i13.piczo.com/view/s/w/n/p/r/6/r/d/3/8/9/img/i140470009_35076_7.gif" 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>
Y ya esta, donde pone link here va el link y donde pone link *numero* va el nombre del link. Lo que está en azul es la foto del menú. Recuerden estar atentos al blog (*-*)
Hola! Me encantó tu blog, es muy original!
ResponderEliminarTe sigo! Te gustaría afiliar?
PD: Buen tutorial. :D
muchas gracias, me encantaria :D
Eliminargracias x el menu y felicidades wiii n.n
ResponderEliminarGracias :D
EliminarFelicidades!!!! Vamos!! yo se que pronto llegaras a los 100 seguidores ;3 sigue asi!! Esta muy bueno el menu!! *O*
ResponderEliminarSaludos y Cuidese!
Muchas gracias! eso espero :D me animas mucho ^^
Eliminarlindo menú! felicidades por los seguidores!!!!!
ResponderEliminarsaludos
Muchas gracias !!
Eliminar