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'>