Hoy os muestro como incrustar un buscador en vuestro blog, es sencillos solo teneis que cortar y pegar tal cual. Mi fuente:http://rulecode
EL CODIGO( corta y pega el contenido en un widgets)
<style>
/* Buscador
----------------------------------------------- */
#buscadorbox
{
float:right;
overflow:hidden;
position:relative;
margin-right: 15px;
margin-top: 3px;
}
#buscador
{
margin:7px 0 0;
padding:0;
}
#buscador fieldset
{
padding:0;
border:none;
margin:0;
}
#buscador input[type="text"]{
background: #333!important;
border: none;
float: left;
padding: 0px 10px 0px 15px;
margin: 0px;
width: 150px;
height: 34px;
line-height: 34px;
transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-moz-transition: all 300ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-webkit-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-o-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
color: #D2D2D2!important;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
}
#buscador input[type=text]:hover,#buscador input[type=text]:focus
{
width:200px;
}
#buscador input[type=submit]
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8embE19Q1n9KYKB81W5nWKgQ57s5ZSR1bh9sG5rKOLdQfRFVMsm-_Qv7ZS3sIrPbygE4A9-Wc39Ou0aW5cpt1Uy6X0soJ4BgorTNFnBjzKU3VSUfJl-P0I7ccFH4IFOYj6fHM4HZZfT0w/s1600/icon-search.png) center 9px no-repeat;
cursor:pointer;
margin:0;
padding:0;
width:37px;
height:34px;
line-height:34px;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background-color: #ea5a50;
}
input[type=submit]
{
padding:4px 17px!important;
color:#383838!important;
text-transform:uppercase;
border:none;
font-size:20px;
background-color:#eee; bottom repeat-x;
cursor:pointer;
margin-top:10px;
float:left;
overflow:visible;
transition:all .3s linear;
-moz-transition:all .3s linear;
-o-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
#buscador input[type=submit]:hover
{
background-color:#333!important;
}
#buscador input[type=text]:hover, #buscador input[type=text]:focus {
width: 200px!important;
}
#buscadorbox {
margin-top: 0px;
}
</style>
<div id="buscadorbox">
<form id="buscador" action="/search">
<input type="text" value="Buscar..." onfocus="if (this.value == "Buscar...") {this.value = "";}" onblur="if (this.value == "") {this.value = "Buscar...";}" name="q">
<input type="submit" value="">
</form>
</div>
Este es el buscador:
Déjate llevar
No hay comentarios :
Publicar un comentario