caixinha de pesquisa personalizada -

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/AVvXsEg5gjCI1l9pxMEU2rm2bwqj_QxszG_59awbZrTTw4rvq6bjLeS63EB3iKcIeRFdV1EqPp3epSse4lsRy6BQd6gn8OToZ7v6vtIxLXYrQK_43dT7sps73_J5SiYBwVEPfDavF_GlPevNMOs/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