26 setembro 2012

Barrinha de Pesquisa

                                    Olá Lindos e Lindas!
                                    Hoje eu vou postar uma Barrinha de Pesquisa
                                     super Linda que eu achei no Uprising Teen
                                     vamos lá?
                                     Vá em Design > Editar HTML
                                      e  ACIMA de /* Header, cole:




/* Search
----------------------------------------------- */
.search{
float: left;
font-family: Verdana !important;  /*FONTE*/
}
.searchbar{
border: 2px dashed #ccc; /*BORDA DA BARRA DE PESQUISA*/
background:#fff;  /*COR DE FUNDO*/
color:#ff0066;  /*COR DA FONTE*/
font-family: verdana;  /*ESTILO DA FONTE*/
font-size:14px;  /*TAMANHO DA FONTE*/
}
.searchbut{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOfHwqiCwwCbrXtcbfb_E72EHAisTQWZkb5or2jDNpJivQRYDHFCREYtkERWwEsvtHMxuYp1f63hUOIVrDHLc0D0k05oxkJm0uu74T_z8U_c6gwqLG4CDbH3FK1GkClaocjxOOM7ml-A/s32/buttom_pesquisa_uprising_teen.png) no-repeat;  /*URL DA IMAGEM*/
width: 30px; /*LARGURA DA IMAGEM*/
height: 32px; /*ALTURA DA IMAGEM*/
border:0px;
font-weight:normal;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}
.searchbut:hover {
width: 40px; /*TAMANHO DA IMAGEM*/
height: 42px; /*ALTURA DA IMAGEM*/
transform: rotate(-360deg) scale(1) skew(0deg);
-moz-transform: rotate(-360deg) scale(1) skew(0deg);
-webkit-transform: rotate(-360deg) scale(1) skew(0deg);
-o-transform: rotate(-360deg) scale(1) skew(0deg);
}
Salve vá em Elementos da Pagina adicione um Gadget HTML/JavaScript.
ai nele você cola:
<div id='busca'><form action="/search" class="search" method="get">
Pesquisar: <input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="Buscar" />
</form></div>
Em vermelho você coloca oque você quer que apareça na Barrinha
se não quiser nada apague (:

2 comentários:

  1. É um ótimo tutorial adorei o blog ^^ seguindo.
    extremetutorialsandtips.blogspot.com.br/

    ResponderExcluir