Caixa de Pesquisa Personalizada

Olá meus amores e amoras! Estou muito feliz porque estou conseguindo manter o blog, postando todos os dias    Bom, hoje eu trouxe para vocês mais um tutorial, que ensina a como personalizar a caixinha de pesquisa do seu blog. Fica bem bonita e com a sua cara. Se quer descobrir como, continue lendo...

Existem dois modos de personalizar a sua caixinha. O primeiro é usando o próprio gadget do blogger e personalizá-lo, e o segundo é adicionando uma caixinha pelo seu html. Vamos lá?

 

1° MODO

Antes de tudo vá em layout e adicione no seu blog o gadget de pesquisa do blogger.

Agora vá em modelo > editar HTML

Aperte ctrl+F e procure por
 

 ]]></b:skin>   

Cole isso acima do código que você procurou:

 /*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 é só fazer as modificações de acordo com seu gosto. Se não quiser bordas arredondadas, apague o trecho em roxo.

2° MODO

Nesse outro modo você pode colocar uma imagem fofa no lugar do botão, que nem é aqui no CB.
Vá em layout e cole o código abaixo em um gadget de html/javascript:

 <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>  

 

No lugar de 'Digite o que procura', escreva a frase que você quer que apareça como título.

 

Agora vá em modelo > editar html >Ctrl+F e procure por:

 ]]></b:skin>  

 

Acima deste código, cole o código a baixo:

 

 .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;  
  }