domingo, 15 de junho de 2014

Tutorial: Personalize a caixa de pesquisa do Blogger

Tumblr

Tutorial super fofo que encontrei no CherryBomb, darei uma alteradas aqui no tutorial, mas ainda assim dou os créditos ao dela! :) Esse tutorial é mega simples, abraços!



1º Modo
(usando o gadget do próprio blogger)


1) Vá em modelo > editar HTML > perte ctrl+F e procure por ]]></b:skin> Cole isso acima:
/*Para remover o logo do blogger*/
.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:#b48f6b; border:0px; font-weight:normal;
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*/
2) Caso não queira as bordas arredondas do botão "pesquisar", apague:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } 
3) Agora é só editar as cores e espessuras como desejar :) 

2º Modo
(adicionando um gadget de HTML)


Agora poderemos adicionar uma imagem no lugar do botão de pesquisar, assim ficará mais fofinho :).

1) Vá em layout > crie um gadget de HTML/javascript e cole o seguinte código:
<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> 
2) Em "Digite o que procura" você pode escrever o que quiser que apareça quando alguém for pesquisar :).

3) Vá em modelo > editar HTML > perte ctrl+F e procure por ]]></b:skin> Cole isso acima:
.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;
}
4) Agora é só personalizar como quiser!

Espero que tenham gostado! :D

Nenhum comentário:

Postar um comentário