2 de ago de 2012

Tag ; Tutorial : Caixa de pesquisa personalizada

Oi amores , hoje to aqui para ensinar a vocês como deixa Caixa de pesquisa personalizada, bom é tuto simples e rápido que eu aprendi em outro blog então todos os créditos a  mundodatwotwoka

fica bem fofinho então vamos lá
 Vá em Painel -> Design -> Editar HTML
Aperte  F3 e procure por:
]]></b:skin>
(clique em leia mais e continue lendo)





O código vai ficar destacado de laranja como mostra a imagem acima , então você cola o código abaixo antes da tag procurada


 .search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte  */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

onde esta destacado de roxinho  é o link do botão de ''pesquisar'' , se quiser, ele pode ser mudado é só copiar o link do seu botão e colar la 

----------------------------------------------------------------------------------------

Agora vá em Elementos da página
 Clique em adicionar gadget, e escolha o gadget: Html/JavaScript


 Cole o código a seguir no gadget adicionado sem fazer nenhuma modificação


<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form> 


é isso meninas espero que tenham gostado beijokas 

2 comentários:

  1. Ótimo tutorial! Obrigado pela visita! Volte sempre ao meu blog :)
    Beijos

    blogmodaonline.blogspot.com

    ResponderExcluir
  2. Obrigada pela visita volte sempre que quiser flor :)
    beijokas

    ResponderExcluir