Hoje vou mostrar para vocês como criar uma caixa de pesquisa super fofa, que possui um efeito bem legal: ao posicionar o mouse na área em que irá digitar o texto, ela se expande! Assim você pode economizar espaço :3 Super fácil! Vai ficar assim:
Passe o mouse ou clique para pesquisar algo e veja o efeito
Vamos lá! 1. Acesse a área de edição de HTML do seu modelo e procure por ]]></b:skin>
2. Quando encontrar, cole isso acima dele:
#cute-search {
margin: 0 auto;
width: 100px;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
#cute-search br { display: none; }
#cute-search #search {
background: -moz-linear-gradient(center bottom , #fc86c5 0%, #fa87ce 50%, #ffe6ff 50%, #fcc2c2 2550%);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fc86c5),color-stop(0.5, #fa87ce),color-stop(0.5, #ffe6ff ),color-stop(25.5, #fcc2c2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fc86c5', EndColorStr='#ffe6ff ');
border-radius: 5px;
padding: 4px;
}
#cute-search:hover { width:200px; }
.form-search {
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#f799c7), to(#ffd6ff));
background: -moz-linear-gradient(-90deg, #ffd6ff, #f799c7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f799c7', EndColorStr='#ffd6ff');
border: 1px solid #fcc;
border-radius: 3px;
box-shadow: inset 0 1px 1px #fee, 0 1px 0 #FFF;
height: 32px;
position: relative;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.form-search input[type='text'] {
background: none;
border: none;
color:#f73b83;
height: 34px;
line-height: 34px;
padding: 0 27px 0 6px;
font-family: verdana;
font-size: 13px;
text-shadow: 0 1px 0 #FFF;
}
#cute-search:hover input[type='text'] { color:#f73b83; }
#cute-search:hover .form-search {
background: -moz-linear-gradient(-90deg, #fc86c5, #ffe6ff);
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ffe6ff), to(#fc86c5));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe6ff', EndColorStr='#fc86c5');
box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
color: #f73b83;
}
.form-search input[type='image'] {
height: 32px;
opacity: .5;
filter:alpha(opacity=50);
position: absolute;
right: 0px;
top: 0px;
width: 32px;
}
.form-search input[type='image']:hover {
opacity: 1;
filter:alpha(opacity=100);
}
Esse código acima é o que vai mudar a aparência da caixinha. Nele você pode mudar os códigos das cores (que sempre começam com um '#' seguido de letras e números, tipo #FFF) para trocar os planos de fundo. Em color:#f73b83; você muda a cor do texto; também pode alterar o tamanho da imagem de busca, que no caso é essa lupa
que mede cerca de 32x32px, se trocar, substitua esses valores pelos de sua imagem. Pode também mudar a opacidade, tamanho e estilo do texto, tamanho máximo (200px) e mínimo (100px) da caixinha... várias coisas, só dar uma olhada no código com atenção, ir testando tudo e vocês vão perceber o que alterar ^-^
que mede cerca de 32x32px, se trocar, substitua esses valores pelos de sua imagem. Pode também mudar a opacidade, tamanho e estilo do texto, tamanho máximo (200px) e mínimo (100px) da caixinha... várias coisas, só dar uma olhada no código com atenção, ir testando tudo e vocês vão perceber o que alterar ^-^
3. Visualize seu modelo só para ver se continua tudo normal, mas ainda não vão aparecer mudanças. Para que a caixinha de pesquisa apareça, você deve adicionar o código abaixo no local que desejar e que aceite HTML, como em um gadget HTML/JavaScript por exemplo:
<div id="cute-search">
<div id="search">
<form class="form-search" method="get" action="/search" target="_blank">
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfs87TT2zG-99kNkeTOfGEcZTvmQ6j9VhK0pm0mT6w1cftovpLK6sLNqqA0U167jXXhPOrj-GC4rJZ9GZS70MIXebSXkhyRWigKxMTuakAECj2ZCRO8sdWUEDZ9M-pXN1NTDsvC08Nc/s1600/busca.png" type="image"/>
<input type="text" name="q" value="search" onfocus="this.value='';" onblur="this.value='search';" onmouseover="this.value='';" onmouseout="this.value='search';" />
</form>
</div>
</div>
Pronto! Só isso :) Eu espero que gostem e beijus!!!
É muito fofinho,adorei,vou usar agora, eu vivia procurando uma caixa de pesquisa, mais todas que eu usava dava errado. bjs
ResponderExcluirno-planetaroom
Que bom que gostou ^^
ExcluirEssa deu certo em todos os navegadores que testei (exceto o Internet Explorer).
Beijus e obrigada...
Vc Pode fazer tutos sobre a nova interface do blog?
ResponderExcluircom esses naum percebo mt bem(sou novata ainda),se poder agradecia imenso~
Olá ^^ Vou procurar postar algumas dicas para a nova interface também :3
ResponderExcluirDei algumas dicas para iniciantes aqui; dá uma olhadinha nos arquivos em uma postagem com o nome de Alguns Tutoriais e Dicas Básicas para seu Blog, e no post Dicas de Sites, Programas e Recursos; em ambos dei dicas que me auxiliaram quando comecei.
Beijinhus e muito obrigada.
Adorrei, coloquei no meu e ficou lindo <3
ResponderExcluir