Olá Prezados leitores do Blog Dicas do Artony!
Essa postagem, é dedicada aos blogueiros iniciantes iguais a mim! Sabemos que o Blogger é um tanto quanto "limitado" na customização de certos recursos e alterações mais profundas no template requerem um pouco mais de conhecimento e pesquisa. Mostrarei como customizar a barra de pesquisa do Blogger e deixá-la com um aspecto mais elegante!
O código inicial, foi indicado pelo Dicas Blogger, porém, confesso que achei o resultado "meio" simplista, por isso, decidi ser um pouco mais arrojado e inserir algumas alterações próprias!
Adicionando a caixa de pesquisa padrão!
- Faça Login no Blogger, acesse: https://www.blogger.com/home. Escolha seu Blog que receberá a customização e clique em "Layout".
- Clique em "Adicionar um Gadget" e clique para adicionar a "Caixa de pesquisa". Escolha suas preferências para a pesquisa e clique em "Salvar".
Adicionando o código HTML ao template!
- No painel de controle do Blogger, clique em "Modelo", depois em "Editar HTML".
- Clique dentro da área do template e tecle Ctrl+F. Agora pesquise por: ]]></b:skin> digitando ou colando.
- Copie o código abaixo e cole-o logo acima da tag: ]]></b:skin>
/*BUSCA*/
Etd.gsc-input input {
background: #FFFFFF; /*Cor de fundo do campo de texto*/
border: 1px solid #C6DBEF; /*Estilo e cor da borda do campo de texto*/
border-radius: 5px 0px 0px 5px; /*Estilo de borda arredondada do campo de texto*/
color: #333333; /*Cor do texto do campo de texto*/
font-size: 18px; /*Tamanho do texto do campo de texto*/
font-family: Calibri, Trebuchet MS; /*Fonte do texto do campo de texto*/
height: 18px; /*Altura do campo de texto*/
padding: 5px ; /*Margem interna do campo de texto*/
margin: 5px 0 0 0; /*Margem externa do campo de texto*/
}
td.gsc-input input:hover {
border: 1px solid #8EB9E5; /*Estilo e cor da borda quando o mouse estiver em cima do campo de texto*/
background: #EAF8FC; /*Cor de fundo do campo de texto quando o mouse estiver em cima do campo de texto*/
}
input.gsc-search-button {
border: 1px solid #8EB9E5; /*Estilo e cor da borda do botão de pesquisa*/
background: url(http://i.imgur.com/vkRTL7l.png) no-repeat 0 50% #F6F6F6; /*Imagem e cor de fundo do botão de pesquisa*/
color: #2B71BC; /*Cor do texto do botão de pesquisa*/
padding: 3px 5px 5px 37px; /*Margem interna do botão de pesquisa*/
font-family: Calibri, Trebuchet MS; /*Fonte de texto do botão de pesquisa*/
border-radius: 0px 10px 10px 0; /*Estilo de borda arredondada do botão de pesquisa*/
font-size: 18px; /*Tamanho do texto do botão de pesquisa*/
margin: 5px 0 0 0; /*Margem externa do botão de pesquisa*/
}
input.gsc-search-button:hover {
border: 1px solid #3B80CE; /*Estilo e cor da borda quando o mouse estiver em cima do botão de pesquisa*/
background: url(http://i.imgur.com/vkRTL7l.png) no-repeat 0 50% #e6e6e6; /*Imagem e cor de fundo quando o mouse estiver em cima do botão de pesquisa*/
color: #E74B37; /*Cor do texto quando o mouse estiver em cima do botão de pesquisa*/
}
input.gsc-search-button:focus {
border: 1px solid #3B80CE; /*Estilo e cor da borda quando o mouse clica no botão de pesquisa*/
background: url(http://i.imgur.com/vkRTL7l.png) no-repeat 0 50% #888888; /*Imagem e cor de fundo quando o mouse clica no botão de pesquisa*/
color: #FFFFF; /*Cor do texto quando o mouse clica no botão de pesquisa*/
} - Clique em "Salvar Modelo", aguarde as alterações serem feitas e pronto! Curta sua nova e elegante caixa de pesquisa!
O código acima, é exatamente o mesmo que estou utilizando no Dicas do Artony nesse momento!
Espero que tenham gostado dessa dica! Gostou? Compartilhe! Um abraço e até a próxima!
Para receber postagens no seu E-mail, assine nossa Newsletter! → Clique e assine agora!
Informar link quebrado eu erro nesta postagem! → dicasdoartony@gmail.com
