Buscadores para nuestro blog

Buscadores para nuestro blog

buscador ->

<div class="contenedorform">
<div class="textoindicativo">
buscador -> </div>
<form class="buscabusca" action='https://milyunacosasutiles.blogspot.com/search' method='get' target="_blank">
<input type="text" placeholder="buscar..." required name="q"></div>
</form>
<style>
.contenedorform{
width:250px;
  margin: 0 auto;
}
.textoindicativo{
  font-family: 'Gochi Hand', cursive;
  font-size:27px;font-weight:bold;
  float:left;padding-top:6px;color: #111;
 position:relativeM;
}

input:focus{
  border:0;
  outline:0;
font-family:Century Gothic;
font-size:15px;color:#5D5E5E;
}

.buscabusca{
  width:20px;
  height:20px;
  border: 4px solid #111;
  border-radius:10px;
  transition:
    height .2s ease .5s,
    width .5s ease 0s;
  position:relative;
  float:left;
  margin-left:5px;
  top:5px;
}

.buscabusca input{
  font-weight:700;
  height:0px;
  width:0px;
  border:0;
  margin:0;
  padding:0 10px;
  background:transparent;
}

.buscabusca:after{
  content:"";
  position:absolute;
  width:1px;
  height:7px;
  bottom:-8px;
  right:-5px;
  background:#111;
  border: 2px solid #111;
  transform:rotate(-45deg);
  transition:all .2s ease;
}

.buscabusca:hover{
  width:100px;
  height:30px;
  transition:
    height .2s ease,
    width .2s ease .2s;
}

.buscabusca:hover input{
  width:100%;
  height:100%;
  transition:all .2s ease;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>

sss

<div class="contenedorform2">
<div class="textoindicativo2">
buscador -> </div>
<form class="buscabusca2" action='https://milyunacosasutiles.blogspot.com/search' method='get' target="_blank">
<input type="text" placeholder="buscar..." required name="q"></div>
</form>
<style>
.contenedorform2{
width:250px;
  margin: 0 auto;
}
.textoindicativo2{
  font-family: 'Gochi Hand', cursive;
  font-size:27px;font-weight:bold;
  float:left;padding-top:6px;
 position:relativeM;color: #cdcdcd;
}

input:focus{
  border:0;
  outline:0;font-family:Century Gothic;
  font-size:15px;color: #cdcdcd;
}

.buscabusca2{
  width:20px;
  height:20px;
  border: 4px solid #cdcdcd;
  border-radius:10px;
  transition:
    height .2s ease .5s,
    width .5s ease 0s;
  position:relative;
  float:left;
  margin-left:5px;
  top:5px;
}

.buscabusca2 input{
  font-weight:700;
  height:0px;
  width:0px;
  border:0;
  margin:0;
  padding:0 10px;
  background:transparent;
}

.buscabusca2:after{
  content:"";
  position:absolute;
  width:1px;
  height:7px;
  bottom:-8px;
  right:-5px;
  background:#cdcdcd;
  border: 2px solid #cdcdcd;
  transform:rotate(-45deg);
  transition:all .2s ease;
}

.buscabusca2:hover{
  width:100px;
  height:30px;
  transition:
    height .2s ease,
    width .2s ease .2s;
}

.buscabusca2:hover input{
  width:100%;
  height:100%;
  transition:all .2s ease;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>

buscador ->