30 de jun. de 2012

Caixa de pesquisa personalizada

Minha diva, linda !
Heey meus sorvetes de umbu com sonho de valsa aeugosto ficaram com saudades? Para quem lê os comentários do blog eeeeuuuuuu, eu acho que já dá para perceber que eu estou ajudando nos posts do blog  Garota HTML, que é nosso afiliado ôoooh . Tá vamos ao post que é isso que eu sei que vocês querem?
O assunto hoje é: Tutorial: Caixa de pesquisa personalizada.Que combina com qual  quer tipo de lay, pelo menos eu acho.
Lets go baby?
Você tem duas escolhas:

1º escolha

Usando o gadget do próprio blogger

Vá em Layout ou designer (Layout se seu blogger está no novo modelo) e adicione o gadget de pesquisa do blogger. Adicionou?
Agora vá em Modelo - Editar HTML -Prosseguir -Aperte F3 ou Ctrl f e procure por ]]></b:skin>
Acima disso cole:
/*Para remover o logo do google*/
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
/* Personalização do Campo de texto */
td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#ff0048; font-family:verdana; font-size:11px; } /* Fim da personalização do Campo de texto */
/*personalização do botão*/
input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#ff0048; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
input.gsc-search-button:hover {background:#b779db; color:#fff;} /*fundo e cor do texto quando passa o mouse*/
/*fim da personalização do botão*/
Agora edite como quiser, se não quiser arrendondado apaga a parte que está verde.


2º escolha

Adicionando um gadget de HTML

Nesse outro modo você pode colocar uma imagem no lugar do botão.
Vá em Layout- Adicionar gadget - Html/javascript e cole o código abaixo:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
Na frase em rosa  você pode colocar a frase que quiser !
Agora vá em- Modelo -Editar HTML - Prosseguir - Aperte F3 ou CTRL f e procure por ]]></b:skin> .
Acima disso cole esse código:  
.search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Url da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}
 Bem.. agora personalize do seu jeito , para ajudar estou deixando o site de tabelas de cores HTML click aqui.
Créditos á Htmhelen ,Trashy Girl e Cherry Bomb.






Kisses e até mais , Bia.

10 idiotas perfeitos me amaram (::

Bia disse...

Aceito afiliação siim,e já to seguindo!
Um beijo,
http://queridomundoteen.blogspot.com.br/

Suellen disse...

De todas as maneiras a caixinha fica muito linda!
Eu aceito sim afiliação flor, já te coloquei lá!
Quando me colocar aqui, me avisa ~~
Kisses ^^

http://territorioteen-suh.blogspot.com.br/

Ingrid Sakamoto dos Santos disse...

Aceito afiliação sim flor, já te coloquei nos meus afiliados! Espero que faça o mesmo ♥

perfilsuperperfeito.blogspot.com

Milleny {SI} disse...

Otimo tutorial linda *--*
Claro que aceito afiliação,e ja estou seguindo tambem , é só me colocar nos seus afiliados tambem.

Beijos flor ;

http://blog-sweetimagination.blogspot.com.br/

Milleny {SI} disse...

Floor , esqueci de ti pergunta *---*
Você aceita postar lá no blog ?
Aguardo a resposta .

MSN: blog-sweetimagination@hotmail.com
Blog: http://blog-sweetimagination.blogspot.com.br/

Brenda disse...

Gostei do tutorial, muito útil. E seu blog é muito fofo, uau *o*

http://clube--teen.blogspot.com.br
(Donas - Brenda e Yasmin)

Brenda disse...

Flor, aceita colocar o link-me do meu blog no seu blog, se você colocar ganha duas seguidoras. Muito Obrigada flor, nós íamos ficar muito mas muito agradecida, se colocar nos avise. Beijocas !

Link-me aqui

Letícia Faria disse...

Amei muito seu blog, já to seguindo!!
http://garotavertigem.blogspot.com.br/ (retribui visita?)

Milleny {SI} disse...

Flor , quando der entra no msn , para conversarmos , ok ?

http://blog-sweetimagination.blogspot.com.br

Milleny {SI} disse...

Vou fechar o blog , para fazer o novo Layout , então para falar sobre voc postar no blog, só no msn , ok flor .

http://blog-sweetimagination.blogspot.com.br/

Postar um comentário

Tem até regra para comentar é? Não é assim.. é que eu não gosto muito de coisas que pessoas falam ou fazem!

✓ Logico que pode dar opiniões, dicas de posts.
✓ Fale sempre o que você mais gosta e o que você não gosta aqui no blog!
✓ Pode deixar o link do seu blog eu seguirei se gostar!
✗ Não xingue e nem ao menos discuta pelos comentários do blog.
✓ Quer ajuda para fazer o lay do blog? Claro que ajudo mais terá que ao menos divulgar o blog pelo menos uma vez!
✗ Os comentários falando mal do blog serão imediatamente excluídos!
✓ Retribuirei todos os comentários!
✓ Não entendeu algo? Pode perguntar!
✗ Não aceito parceria com blogs.
✓ Aceito somente parceria com lojas!
✓ Quer se afiliar? Vai nas categorias e procura por Afiliados-Inscrições!


Muitíssimo obrigada por comentar! ♥