Home Gifs Afilie-se Layout Tutoriais Png Imagens Contato

24 de ago. de 2014

Como colocar caixinha de pesquisa personalizada no blog

oii meninas hoje venho trazer dicas de como colocar caixinhas de pesquisa personalizadas no blog ^^
eu aprendi o tutorial no :: Go Imagine ::

Vá em layout > Adicionar Gadget > Html/javascript
e cole isto :
<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>
 Vá agora em Modelo > Editar HTML e aperte F3 e procure por ]]></b:skin>
e cole este 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 */}
Visualize e veja se está tudo certo e salve ^^
Beijos da Sa !

Nenhum comentário: