☆彡 Hover Box {Menú desplegable}
sábado, 14 de julio de 2012 @ 9:42
Hola que tal ✧・゚:*✧・゚:* \(◕ω◕✿)/ *:・゚✧*:・゚✧
Cómo les va???. Les cuento que visité algunos blog...asi que no se quejen xD lalalala.
Hoy amaneció con mucho frio...creo que lloverá >.<!!.
Cambiando de tema, h
ace mucho tiempo que no publico un tutorial para blog. Aquí les traigo una especie de Menú desplegable o mejor dicho un Box desplegable, muy bonito y es el que utilizo en mi blog, por lo tanto, si o si funciona ^^
Imágenes del Box o Caja Desplegable (no lo coloqué "en vivo" o vista previa porque se me bloquean los códigos, pero pueden verlo en la barra lateral derecha ^^
|
Normal |
|
al pasar el cursor se expande |
Es muy sencillo, sólo debes seguir los siguientes pasos:
1.- Edición de plantilla
2.- Debes colocar el siguiente código antes de </style> en el caso de ser una plantilla Blogskin.
3.- Si es una plantilla de blogger, debes añadir un gadget en edición de HTML/Javascrip
4.- Finalmente colocan vista previa (para evitar errores y si realmente funciona) y luego guardar...y woala!!
<style type="text/css">
.box {
width: 265px;
padding: 10px;
background:url(url);}
.box2 {
padding:3px;
display:block;
height:17px;
width:255px;
background:#fff;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
overflow:hidden;}
.box2:hover {height: 150px;}
h01{
font-family:consolas;
padding-top:1px;
font-size:12px;
color:#000;
text-align:center;
text-transform :uppercase;
background: pink;
letter-spacing:5px;
height:16px;
padding-left:6px;
display:block;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}
</style>
<div class="box"><div class="box2"><h01>title</h01>
<div style="font-family:arial;font-size:8px;height:130px; overflow:auto;margin-top:3px;">
Coloca aquí tu texto o imágenes que desees
</div></div></div>
Espero que les resulte y si hay dudas comentan..Okey!★~(◡‿◕✿)
Etiquetas: Hover Box, Tutorial
◀ HOME
▶
http://yourblog.blogspot.com/