HOME ☁ Biography ☁ Facebook ☁ Twitter ☁ Instagram ☁ Blogskin ☁
disclaimer

Instagram


Tagboard


History

Friends


Twitter


Credit

Skin by → Pipie Panini
Html code → Mary / Hanie.Heykiim
Images from → weheartit.
Caixa de pesquisa personalizada18 de jun de 2013 leave me ♥?


As caixas de pesquisas são muito importantes para um blog,concordam? Mas a caixa de busca que o blogger nos oferece,não combina muito com o layout do nosso blog,por que é bem feinha!

Em alguns blogs,encontrei vários tutoriais de como personalizar ela,e então resolvi mostrar à vocês como é fácil deixar essa caixinha bem mais interessante!


Vá em Layout > Adicionar um gadget > Escolha o HTML / JavaScript. Dentro desse gadget cole
Você pode trocar a palavra GO pela palavra que você quiser.

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>
Agora entre em Modelo > Editar HTML,e procure (CTRL + F) por }]]></b:skin> .Acima dele,cole o seguinte código:
.search{ /* Geral */
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: Tahoma, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{ /* Barrinha onde se digita */
height: 18px; /* Altura da barrinha */
width: 230px; /* Largura da barrinha */
margin-left:0px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
border:solid 1px #ddd; /* Borda */
padding:3px 5px;
border-radius:2em; /* Bordas Arredondadas */
box-shadow:0 1px 0px rgba(0,0,0,.1); /* Sombra interna */
background: #fff; /* Cor do fundo */
background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.searchbut{ /* Botão */
border:0 !important;
float: right;
background: #D9D9D9; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:26px; /* Altura do botão */
margin-top: -20px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-right: -35px; /* Margem direita, edite se precisar */
border-radius:25px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto GO */
}
.searchbut:hover { /* Botão Hover */
background:#F3A7C2; /* Cor do fundo do botão hover */
}
Sua caixa personalizada ficará mais ou menos assim:


Você pode mudar as cores de acordo com o seu gosto,basta editar o código.

Visualize,e se estiver tudo certo,Salve!

Marcadores: ,


FUTURE
PAST