Barra de Pesquisa no Cabeçalho do Blog 2

cute, hair, girl

Hoy! Mais um pedido feito a mim, desta vez vou ensinar um novo jeito de personalizar e adaptar uma barra de pesquisa no cabeçalho do blog. Clique em Leia mais e confira este tutorial!

EXEMPLO DE BARRA




TUTORIAL


Modelo > Editar HTML

Vamos primeiro aplicar o estilo à barra de pesquisa. Vamos lá! Procure por ]]><b:skin> e acima dele cole o seguinte código já editado:

/* Pesquisa
----------------------------------------------- */
#pesquisaestilo {
line-height:25px; /* NÃO ALTERE */
float:right; /* FLUTUAR (RIGHT-DIREITA, LEFT-ESQUERDA E CENTER-CENTRO) */
padding: 0px; /* NÃO ALTERE */
margin-left: -10px; /* MARGEM À ESQUERDA (ALTERE) */
margin-top: -9px; /* MARGEM DO TOPO (ALTERE) */
}
#pesquisabarra {
border-radius: 3px; /* ARREDONDAMENTO DA BARRA */
height: 16px; /* ALTURA DA BARRA (NÃO ALTERE SE DESEJA A MESMA DO BOTÃO) */
width: 220px; /* LARGURA DA BARRA (ALTERE SE DESEJAR)  */
color: #1C1C1C; /* COR DO TEXTO ESCRITO NA BARRA */
font-family: arial; /* FONTE DO TEXTO ESCRITO */
background: #FFE4E1; /* COR DE FUNDO DA BARRA */
border: 2px solid #FFC0CB; /* ESTIO DA BORDA DA BARRA */
padding: 2px 4px 2px 4px; /* NÃO ALTERE */
margin-right:3px; /* DISTÂNCIA ENTRE A BARRA E O BOTÃO */
}
#pesquisaenviar{
width:90px; /* LARGURA DO BOTÃO */
border-radius: 3px; /* ARREDONDAMENTO DO BOTÃO */
background: #FFC0CB; /* COR DE FUNDO DO BOTÃO NORMAL */
color:#1c1c1c; /* FONTE DO BOTÃO NORMAL */
font-size:12px; /* TAMANHO DA FONTE DO BOTÃO NORMAL */
padding: 3px; /* NÃO ALTERE */
-webkit-transition-duration: .70s; /* EFEITO DE TRANSIÇÃO */
border:none; /* NÃO ALTERE */
font-weight:bold; /* FONTE EM NEGRITO */
}
#pesquisaenviar:hover{
background:#DB7093; /* COR DE FUNDO DO BOTÃO HOVER */
color:#fff; /* COR DA FONTE DO BOTÃO HOVER */
font-size:12px; /* TAMANHO DA FONTE DO BOTÃO HOVER */
padding: 3px; /* NÃO ALTERE */
-webkit-transition-duration: .70s; /* EFEITO DE TRANSIÇÃO */
cursor:pointer; /* CURSOR (NÃO ALTERE) */
}
Certo? Agora vamos aplicar a barra no lugar adequado. Vá em Layout > Adicionar Gadget HTML Java/Script e nele cole o seguinte código:

<form action='/search' id='pesquisaestilo' method='get' style='display:inline;'><input id='pesquisabarra' name='q' type='text'/><input id='pesquisaenviar' type='submit' value='Buscar'/></form>

Salve o gadget e o arraste para debaixo o gadget de cabeçalho. Volte para Modelo > Editar HTML e procure por  #pesquisaestilo. No finalzinho antes de fechar com }, você pode ver estes dois atributos:

margin-left: -10px; /* MARGEM À ESQUERDA (ALTERE) */margin-top: -9px; /* MARGEM DO TOPO (ALTERE) */

Edite os mesmos é vá visualizando para ajeitar perfeitamente sua barra de pesquisa no cabeçalho. Espero que tenham conseguido, dúvidas é só perguntar! 

Créditos ao Uprising Teen!