.

sábado

Caixa de Pesquisa Animada com Efeito Criado Com CSS

ACESSOS:
AQUI



Veja uma demonstração:


Não encontrou o que você procura? Digite sua busca aqui nesta caixa e veja os resultados!


Para colocar no blogger

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:
<style>
#awan {
background: url(https://abs.twimg.com/images/themes/theme1/bg.png) center top repeat-x;
width: 589px;
height: 149px;
font-family: "Segoe UI Light","Open Sans Light",Sans-serif;
text-align: center;
font-size: 18px;
color: #fff;
animation: awan-animasi 10s linear infinite;
-ms-animation: awan-animasi 10s linear infinite;
-moz-animation: awan-animasi 10s linear infinite;
-webkit-animation: awan-animasi 10s linear infinite;
margin-bottom: 8px;
border: #fff solid 5px;
box-shadow: 0px 2px 0px rgba(0,0,0,0.1);
text-shadow: #fff 0px 2px 2px;
}
@keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}
@-webkit-keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}
@-ms-keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}
@-moz-keyframes awan-animasi {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
};
}
</style>
<div id='awan'>
Não encontrou o que você procura? Digite sua busca aqui nesta caixa e veja os resultados!
<center>
<style type="text/css">
#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form action="/search" id="w2b-searchform" method="get">
<input id="s" name="q" type="text" value="" />
    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</center>
</div>
<div id='#'>
</div>                                                                                                                                                   <div style="text-align: right;">
<span style="color: #eeeeee; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com/" target="_blank"><span style="color: #eeeeee;">DicasHot</span></a></span></div>
Toda a parte destacada de azul, corresponde a caixa de busca. Você pode modificá-la. Veja outros estilos de caixas de busca nesta outra postagem: 
http://dicashot.blogspot.com.br/2014/05/caixa-de-pesquisa-simples-personalizada.html


Tendo colado o código, basta salvar e pronto!!!