06/12/2014

Caixa de Busca Personalizada (Exclusivo)


Olá gatinhoos (・ω・) Como vocês estão?
Como prometido eu trouxe um tutorial para vocês meus lindos! Sabe aquela caixa de busca padrão do blogger que é horrível? Então, pra quem gosta de deixar o blog cada vez mais bonito, hoje trago o tutorial de uma caixa personalizada feita por mim.Ela é assim: 

Gostou? Aprenda a colocar no seu blog!: *--*

Para usar a caixinha você precisa ir em MODELOS depois em Editar HTML e procurar por:

]]></b:skin>
Acima dele você colocará o código da caixinha escolhida.


/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FONT-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #F394BF; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
TEXT-shadow:0 1px 0px #; /* Sombra interna */
border:solid 1px #F394BF; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #FCE4EF 20%, #F5A9CB 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #F394BF; /* Borda */
float: right;
background: #F5ADCE; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #EF76AC;
background-image: linear-gradient(to bottom,  #FCE4EF 20%, #F5A9CB 100%, #fff 100%, #fff 100%);
}



/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FOTN-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #8B658B; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
border:solid 1px #BE9EBE; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #F0E8F0 20%, #CCB3CC 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #BE9EBE; /* Borda */
float: right;
background: #CCB3CC; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #8B658B;
background-image: linear-gradient(to bottom, #F0E8F0 20%, #CCB3CC 100%, #fff 100%, #fff 100%);
}



/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FONT-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #8DB6CD; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
TEXT-shadow:0 1px 0px #; /* Sombra interna */
border:solid 1px #8DB6CD; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #EAF0F7 20%, #B0C4DE 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #8DB6CD; /* Borda */
float: right;
background: #B0C4DE; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #8DB6CD;
background-image: linear-gradient(to bottom,  #EAF0F7 20%, #B0C4DE 100%, #fff 100%, #fff 100%);
}


/----------CAIXA DE PESQUISA PERSONALIZADA-SonhosHTML------------/
.search{ /* Geral */
float: left;
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce  */
font-family: ARIAL, ARIAL;
FONT-SIZE: 5PX;
}
.searchbarra{ /* Barrinha onde se digita */
FONT-SIZE: 12PX;
height: 15px; /* Altura da barrinha */
width: 140px; /* Largura da barrinha */
margin-left:-50px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce  */
margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */
color: #838B83; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
TEXT-shadow:0 1px 0px #; /* Sombra interna */
border:solid 1px #838B83; /* Borda */
padding:3px 5px;
border-radius: 5px /* Bordas Arredondadas */
box-shadow:0 1px 0px ; /* Sombra interna */
background: #DDCCDD; /* Cor do fundo */
background-image: linear-gradient(to bottom, #F0FFF0 20%, #C1CDC1 100%, #fff 100%, #fff 100%);
}
.searchbotao{ /* Botão */
border:solid 1px #838B83; /* Borda */
float: right;
background: #C1CDC1; /* Cor do fundo do botão */
cursor: pointer;
color:#fff; /* Cor do texto */
padding:0 5px 2px 5px;
height:22px; /* Altura do botão */
margin-top: -17px;
margin-right: 37px;
border-radius:0px;  /* Bordas Arredondadas */
box-shadow:0 0 2px #aaa; /* Sombra */
text-shadow:0 -1px #aaa; /* Sombra no texto Go */
}
.searchbotao:hover { /* Botão Hover */
color: #838B83;
background-image: linear-gradient(to bottom, #F0FFF0 20%, #C1CDC1 100%, #fff 100%, #fff 100%);
}
Agora vá em Layout > Adicionar um gadget > Escolha o de HTML/JavaScript. Dentro desse  gadget cole:
<center><form action="/search" class="search" method="get"><br /><br /><input class="searchbarra" id="s" name="q" type="text" value="" /><br /><input class="searchbotao" type="submit" value="OK" /><br /></form></center>
Depois de escolhido o modelo e ter alterado ao seu gosto. Salve!

Por hoje é só! Espero que tenham gostado do tutorial! Não se esqueçam de comentar se você gostou!
E não se esqueça de  SEGUIR o blog! Por favorimage Beijoos no ♥ 

3 comentários:

  1. As caixas são muito lindas! Irei publicar em meu blog,certo?? Deixarei os devidos créditos ao seu bloguito, bejos >3<

    There | Fluffy White

    ResponderExcluir
    Respostas
    1. Fico agradecida! Fique a vontade para reblogar!
      Kissus~♥

      Excluir
  2. Irei usar no meu novo lay ^^

    ResponderExcluir

♥ Comente algo relacionado ao post !
♥ Proibido xingar, ofender e ser agressivo !
♥ Seja educado (a) !