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 favor! Beijoos no ♥
As caixas são muito lindas! Irei publicar em meu blog,certo?? Deixarei os devidos créditos ao seu bloguito, bejos >3<
ResponderExcluirThere | Fluffy White
Fico agradecida! Fique a vontade para reblogar!
ExcluirKissus~♥
Irei usar no meu novo lay ^^
ResponderExcluir