Si te gusta los estilos de youtube, no te puede faltar el
buscador youtube css3 en tu blog, fácil y rápido de poner en nuestro blog. Entramos en diseño y añadimos un nuevo Gadget, HTML/Javascript, Añade una característica de un tercero u otro código a tu blog.
Demo
Buscador youtube css3
Código buscador
<form id="ytc-ajmrdesign" action="/search" method="get">
<input id="bbytc-ajmrdesign" name="q" type="text"/>
<input id="beytc-ajmrdesign" value="" type="submit"/>
</form>
Código css
#bbytc-ajmrdesign {
background: #fff;
float:left;
margin: 0;
padding: 0 0 0 10px;
width: 250px;
height:32px;
line-height:32px;
color:#000;
font-size: 15px;
text-align: left;
border: 1px solid #ccc;
-moz-box-shadow: inset 2px 1px 5px #efefef;
-webkit-box-shadow: inset 2px 1px 5px #efefef;
box-shadow: inset 2px 1px 5px #efefef;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
}
#bbytc-ajmrdesign:hover, #bbytc-ajmrdesign:focus {
border: 1px solid #b0c4de;
}
#beytc-ajmrdesign {
background: #ffffff url(http://2.bp.blogspot.com/-VYMvuxIvbwU/UCU2O0dn48I/AAAAAAAAFXc/THhKD8aXzG0/s400/btt-ajmrdesign.png) no-repeat;
float:left;
margin: 0;
padding: 0;
height:34px;
line-height:34px;
width: 49px;
border: none;
cursor:pointer;
}
#beytc-ajmrdesign:hover {
background: #ffffff url(http://2.bp.blogspot.com/-VYMvuxIvbwU/UCU2O0dn48I/AAAAAAAAFXc/THhKD8aXzG0/s400/btt-ajmrdesign.png) 0% 100% no-repeat;
-moz-box-shadow: 0px 0px 3px #cacaca;
-webkit-box-shadow: 0px 0px 3px #cacaca;
box-shadow: 0px 0px 3px #cacaca;
}
No hay comentarios: