Adicionando e personalizando uma caixa de busca no cabeçalho

Compartilhar:
Olá queridos leitores. Hoje, recebi um e-mail de um leitor, que pede para que ensinemos a personalizar e posicionar uma caixa de busca no cabeçalho (header) do blog. O processo é bem simples e consiste em apenas dois tutoriais. Vamos começar?

1. Em primeiro lugar, teremos de separar o cabeçalho em dois. Aqui no blog, já existe um tutorial mostrando como você pode fazer isso. Clique aqui para acessar o tutorial.

2. Após fazer a divisão do cabeçalho, vamos personalizar caixa de busca. Antes disso, teremos de, instalar a caixa de busca personalizada que o Blogger oferece. Para isso, vá em Layout, Adicionar um gadget e selecione a opção Caixa de pesquisa. Lembre-se de adicionar o gadget de pesquisa, no cabeçalho duplicado.

3. Depois disso, vamos personalizar. Vamos na guia Modelo e clicar no botão Editar HTML. Pressione Ctrl+F e procure pelo código a seguir.

]]></b:skin>

4. Cole o seguinte código fazendo modificações desejadas. Lembre-se de modificar somente o que sabe, qualquer modificação errada, pode deixar a busca desorganizada.

#header-right .CustomSearch {
max-width:275px;
min-width:275px;
padding:20px 0px 0px 150px;
}
#header-right .CustomSearch .widget-content {
background: #f3f3f3;
border:1px solid #DADADA;
padding:10px 0px 3px 0px;
}
.cse input.gsc-input, input.gsc-input {
font-family: Arial, Trebuchet MS, Verdana;
font-size: 12px;
font-weight: normal;
color: #000000;
padding:5px;
margin:0px 1px 0px 5px;
max-width:152px;
min-width:152px;
background:#FFFFFF;
border:1px solid #999;
height: 25px;
}
.cse input.gsc-input, input.gsc-input:focus {
border: 1px solid #222;
}
#uds-searchControl .gs-result .gs-snippet {
margin: .25em 0;
line-height: 1.2em;
text-align: justify;
}
.cse input.gsc-search-button, input.gsc-search-button {
font-family: Segoe UI Semibold, Segoe UI;
font-size: 13px;
font-weight: normal;
color: white;
background: #a2d;
border:1px solid #000;
text-decoration:none;
margin:0px 8px 0px 0px;
padding:5px 5px;
width:82px;
height:28px;
outline:0px solid #FFFFFF;
cursor:pointer !important;
}
.cse input.gsc-search-button, input.gsc-search-button:hover {
background: #333;
text-decoration: none;
}
.cse .gsc-branding, .gsc-branding {
display: none;
}
.cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result {
padding:5px 0px 10px;
border: 1px solid #FFFFFF;
margin-bottom: 0;
border-bottom:1px dashed #CCCCCC;
}

5. Clique em Visualizar e se o gadget estiver personalizado, clique em Salvar modelo.

Pronto. O gadget já foi adicionado, o cabeçalho duplicado e caixa de pesquisa personalizada. Espero que tenho ajudado ao Kelven e aos que tinham as mesmas dúvidas. Até a próxima.
► Postagens Relacionadas:

Seja o primeiro a comentar!

Postar um comentário