Formulario de busqueda original para el blog

Con un sencillo diseño, original y gracioso, os presento este formulario de busqueda realizado integramente utilizando CSS. Una manera diferente de presentar esta utilidad imprescindible para todo buen blog que se precie. Se puede utilizar en Blogger y en practicamente todas las plataformas blogueras. Si os gusta y quereis ponerlo en vuestro blog, elegid un de los dos, copiad el codigo correspondiente y pegadlo donde querais mostrarlo. Sustituid la parte que esta en color rojo por la direccion URL de vuestro blog. Si vuestro blog tiene el fondo claro, aconsejo elegir el primer modelo, de tenerlo oscuro, el segundo.

buscador ->

ver codigo

<div class="contenedorform">
<div class="textoindicativo">
buscador -> </div>
<form class="buscabusca" action='http://redeando.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'>

buscador ->

ver codigo

<div class="contenedorform2">
<div class="textoindicativo2">
buscador -> </div>
<form class="buscabusca2" action='http://redeando.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'>