Menu em imagem com efeito hover


Todo blog precisa de uma caixa de busca não é mesmo? Afinal ela é ótima para seus leitores encontrarem posts antigos do seu blog que merecem atenção também. Hoje trouxe dois modos para você deixar a caixa de pesquisa do seu blog muito fofa e combinando com o resto do lay. Pra variar, todos os dois são bem fáceis, basta entender o mínimo de css e ter algum programa ou site que te mostre o código HTML das cores.


1º Modo
Usando o gadget do próprio blogger

Antes de tudo vá em layout e adicione no seu blog o gadget de pesquisa do blogger.
Agora vá em modelo > editar HTML
Aperte ctrl+F e procure por:


Cole isso acima do código que você procurou:

/*Para remover o logo do google*/
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
/* Personalização do Campo de texto */
td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#ff0048; font-family:verdana; font-size:11px; } /* Fim da personalização do Campo de texto */
/*personalização do botão*/
input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#ff0048; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
input.gsc-search-button:hover {background:#b779db; color:#fff;} /*fundo e cor do texto quando passa o mouse*/
/*fim da personalização do botão*/

Agora é só fazer as modificações de acordo com seu gosto. Se não quiser bordas arredondadas, apague o trecho em roxo.

2º Modo
Adicionando um gadget de HTML/JavaScript:

Nesse outro modo você pode colocar uma imagem fofa no lugar do botão, que nem é aqui no DC.
Vá em layout e cole o código abaixo em um gadget de html/javascript:



Você pode substituir o texto em roxo pela frase que quiser.
Agora vá em modelo > editar html e cole antes de

o código abaixo:

search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Url da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}
Agora é só personalizar como quiser e salvar, se usar dê creditos, qualquer duvida comente kiss.
fonte: (www)

4 comentários:

  1. Super legal...
    Acho que vou usar o primeiro modelo
    beijos

    kawaii-dreamslea.blogspot.com.br

    ResponderExcluir
  2. Oie vim aqui dizer que aceito o pedido da afiliação ^^ , já ta lá na elite espero que faça o mesmo
    > http://small-kawaii-world.blogspot.com.br <

    ResponderExcluir

REGRAS:

✖ Proibido xingar, insultar
✖ Faça criticas construtivas
✖ Siga, Comente e divulgue
✖ Não plagie as postagens, pegar algum post Credite
✖ Comente sobre o assunto do blog, e no final do comentário coloque o link do seu blog, que eu visitarei e seguirei.