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:
ai nele você cola:
se não quiser nada apague (:
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:
/* SearchSalve vá em Elementos da Pagina adicione um Gadget HTML/JavaScript.
----------------------------------------------- */
.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);
}
ai nele você cola:
<div id='busca'><form action="/search" class="search" method="get">Em vermelho você coloca oque você quer que apareça na Barrinha
Pesquisar: <input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="Buscar" />
</form></div>
se não quiser nada apague (:
É um ótimo tutorial adorei o blog ^^ seguindo.
ResponderExcluirextremetutorialsandtips.blogspot.com.br/
Obrigado *-*
Excluir