Customizando os formulários de busca do Google com CSS

Olá queridos leitores do Tecnoblog, neste tutorial venho trazendo como modificar a caixa de busca do Google.
Neste tutorial iramos modifica-lo a partir de CSS.


Já postei um artigo de como colocar a pesquisa personalizada do Google no Blogger:

• Instalando a pesquisa personalizada do Google no Blogger - Tecnoblog

Mas atenção antes de seguir este tutorial você dever ter instalado no seu blog a caixa de busca personalizada da Google.
Não Tem? Quer Instalar? Clique aqui e instale para seguir este tutorial.


Vamos a tutorial:
1. Faça o login no blogger e clique em guia do modelo.
2. Depois em Editar HTML
3.Faça uma cópia de segurança do seu template, clicando em: Baixar modelo completo.
5. Pressione Ctrl+F para abrir a janela Localizar, e procure o código abaixo:

]]></b:skin>

6. Imediatamente ACIMA do código citado acima, adicione o código abaixo:

/* ----- CSS da Pesquisa Personalizada ----- */
.cse input.gsc-input, input.gsc-input {
    font: normal normal 16px Arial, serif, sans-serif; /* fonte do texto da caixa de pesquisa */
    color: #333333; /* cor do texto da caixa de pesquisa */
    height: 26px;
}
.cse input.gsc-search-button, input.gsc-search-button {
    font: normal bold 16px Arial, serif, sans-serif; /* fonte do botão */
    color: #AAAAAA; /* cor do texto do botão */
    background: #555555; /* cor de fundo do botão */
    border: none;
    height: 30px;
}
.cse input.gsc-search-button:hover, input.gsc-search-button:hover {
    color: #FFFFFF; /* cor do texto do botão com o mouse em cima */
    background: #FF0055; /* cor de fundo do botão com o mouse em cima */
    cursor: pointer;
}
.cse .gsc-branding, .gsc-branding {
    display: none;
}
.cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result {
    padding: .25em;
    border: 1px solid #FFFFFF;
    margin-bottom: 1em;
}

Fazendo as modificações que se pede, para visitar uma tabela de cores clique aqui.


7. Clique em Visualizar e se estiver tudo como desejado clique em Salvar