Como fazer uma caixinha de pesquisa com efeito

Oooooooooooooooi pessoal vocês devem estar bem né. Bem hoje eu irei ensinar como colocar a caixa de pesquisa que tem aquele efeito que se espande. Então vamos ao tuto.
cliquem em leia mais

-Primeiro vocês devem ir para modelo-editar html- apertem f3 e procurem por ]]></b:skin>
-Quando acharem cole o código abaixo,

ACIMA

do código que vocês procuraram

#cute-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #cute-search br { display: none; }
  #cute-search #search {
    background: -moz-linear-gradient(center bottom , #fc86c5 0%, #fa87ce 50%, #ffe6ff 50%, #fcc2c2 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fc86c5),color-stop(0.5, #fa87ce),color-stop(0.5,  #ffe6ff ),color-stop(25.5, #fcc2c2));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fc86c5', EndColorStr='#ffe6ff ');
    border-radius: 5px;
    padding: 4px;
  }
  #cute-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#f799c7), to(#ffd6ff));
    background: -moz-linear-gradient(-90deg, #ffd6ff, #f799c7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f799c7', EndColorStr='#ffd6ff');
    border: 1px solid #fcc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #fee, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#f73b83;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: verdana;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #cute-search:hover input[type='text'] { color:#f73b83; }
  #cute-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #fc86c5, #ffe6ff);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ffe6ff), to(#fc86c5));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe6ff', EndColorStr='#fc86c5');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #f73b83;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }

Esse código é para personalizar a caixinha caso queiram é só irem mudando os códigos de cores os que são assim #fffff.

Depois é só visualizarem e se estiver tudo certo com o seu blog

(Mas a caixinha ainda não aparece)

então é só salvar.
Agora essa é a parte que você colocar a caixa de pesquisa. É só ir em layout- adicionar um gadget HTML/javascript e colocar esse código abaixo

<div id="cute-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtqSNCQxaJ_qhq0iF7RLUi030SbPiwQdhN_B2Prz_9wmus0_MeXI3yVque8PHYDROS9f-9FdTfhNpAhvrUL7pIsY7FHG1n-rPhsIzI1UXdMgfFVf78sn1Qnjox9riyQbxv2IwnW803KJ0/s1600/busca.png" type="image"/>
    <input type="text" name="q" value="search" onfocus="this.value='';" onblur="this.value='search';" onmouseover="this.value='';" onmouseout="this.value='search';" />
    </form>
  </div>
</div>

Depois é só salvar e pronto. bjs e até a próxima.
créditos-reino kawaii