>
Image Map

Caixinha personalizada 2

1 de agosto de 2013 |


Gente hoje vou trazer um tutorial bem úteis para vocês. Como fazer uma caixa de pesquisa Caixinha Personalizada como a minha. Ela vai ficar deste jeito:
 Quer aprender como fazer? 



Primeiro, vá em Layout e adicione um gadgets HTML/JavaScript com este código:
<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>
Você não precisa mudar nada. Salve e agora vá em Modelo > Editar HTML > Prosseguir > Ctrl + F ou F3 e procure por ]]></b:skin> , e acima cole:
.search{ /* Nesta parte não mude NADA */
float: left;
margin-left: 30px;
font-family: Tahoma, Tahoma;
}
.searchbar{
height: 18px;
width: 140px; /* Largura */
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #FF84AD; /* Cor que aparece quando digitamos algo */
border:solid 1px #ddd;
padding:3px 5px;
border-radius: 10px;
box-shadow:0 1px 0px rgba(0,0,0,.1);
background: #fff; /* Cor de fundo, não precisa mudar */
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{
border: 2px solid #FF84AD; /* Borda do botão normal, apague se não quiser*/
float:right;
background: #FFF; /* Fundo do botão normal */
cursor:pointer;
color:#FF84AD; /* Cor da letra do botão normal */
padding:0 5px 2px 5px;
height:26px;
margin-top: -20px;
margin-right: -35px;
font-family: Tahoma, Tahoma;
border-radius:25px;
-webkit-transition-duration: .5s
}
.searchbut:hover {
background:#FFF; /* Fundo do botão Hover */
color: #734836; /* Cor da letra do botão Hover, apague se não quiser */
border: 2px solid #734836 ; /* Borda Hover */
-webkit-transition-duration: .5s
}
Faça as alterações e Salve. Pronto, você tem sua caixa de pesquisa fofinha pronta

Nenhum comentário:

Postar um comentário

Olá Gurias e Guris também porque não ♥
Fico muito feliz com seu comentário!!
------------------------------------------------------------------
Agora alguns recadinhos importantes:

♥ Deixe seu link para que eu possa retribuir sua visita;
♥ Se estiver seguindo aqui, me avise para que eu possa seguir seu também;
♥ Comente com todo seu carinho, leia o poste e comente algo relacionado, que retribuirei com o mesmo gesto; ♥
♥ Meus comentários são moderados por segurança, e que eu tenha controle e que eu não deixe de responder ninguém.
♥ Para dúvidas e parcerias entre em contato por e-mail: ~coffecomaszamigas@gmail.com~

~ Obrigada e Volte sempre! ♥
Café com as Zamigas |Luana Mendes

Instagram: @luanamendesblog
Canal no Youtube: Luana
https://www.youtube.com/user/meninadivadamoda