Então só pra adiantar vou mostrar qual é o resultado:
Clique em Leia Mais para ver o tutorial *-*
Abra o seu blog, vá em Design -> Elementos da página -> Adicionar um gadget -> escolha o de HTML/Java Script e cole o código abaixo:
<style type="text/css">
<!--
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 18px;
width: 150px;
margin-top: 4px;
margin-left: 0px;
color: #453830;
border: 1px solid#FFC6FF;
float: left;
padding: 2px;
background-color: #FFE4E1;
}
#form-busca #bt-busca {
height: 20px;
width: 23px;
background-image: url ( url );
border: none;
margin-top: 6px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 35px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get
action="http://goimagines.blogspot.com/search"><input id="sprocura" type=text name=q maxlength=255 value="O que você procura?" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="http://goimagines.blogspot.com " /><input type="hidden" name="sitesearch" value="http://goimagines.blogspot.com " />
</form></div>
Note que a url do GI aparece 3 vezes (destacada em negrito) e troque-as pela url do seu blog.
A frase destacada em lilás você pode alterar, é a frase que fica dentro da caixa.
A frase destacada em lilás você pode alterar, é a frase que fica dentro da caixa.
Lembra que eu disse que você pode personalizar a caixa? Para isso vamos entender a parte que refere-se a caixa em si:
#form-busca #sprocura{
height: 18px; (trata-se da altura da caixa, quanto maior o numero mais alta fica AVÁ)
width: 150px; (trata-se da largura da caixa)
margin-top: 4px;
margin-left: 0px;
color: #453830; (é a cor do texto)
border: 1px solid#FFC6FF; (é a cor da borda da caixa)
float: left;
padding: 2px;
background-color: #FFE4E1; (é a cor do fundo da caixa)
}
Para alterar as cores use uma tabela, clique aqui para acessar uma.
Para esclarecer:
- Quanto maior o valor do numero de "margin-left" mais para a direita a caixa fica. Se quiser que a caixa fique mais para a esquerda use um numero negativo por exemplo: -4px
-Quanto menor o valor do numero de "margin-top" mais para cima fica. Se quiser que a caixa fique mais para baixo aumente o valor do numero.
Agora vamos entender a parte do código que trata-se ao botão que fica ao lado da caixa:
#form-busca #bt-busca {
height: 20px; (altura do botão)
width: 23px; (largura do botão)
background-image: url(url do seu botão);
border: none;
margin-top: 6px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 35px;
}
Detalhes:
-O valor de "height" e "widht" você deve alterar conforme o tamanho da imagem do seu botão.
-Quanto maior o valor do numero de "Margin-top" mais pra baixo o botão fica, se quiser por ele mais pra cima diminua o valor do numero.
-Margin-right: É complicado dizer ao certo as "coordenadas" de quanto maior o numero mais pra baixo ou pra cima fica. Eu fui testando e se colocava um numero muito baixo (- negativo) ou muito alto o botão ficava longe da caixa. Então vá alterando o valor do numero até ficar como você deseja.
-Url: Acho que não preciso explicar o que é né? -rs É só colocar entre os (parenteses) a url da imagem que você escolher. Como sou muuito boazinha (não) eu fiz 2 botões pra vocês e uma base para fazerem os seus próprios botões, espero que de pro gasto haha.
0 Comentários