Inscreva-Se

Como colocar pesquisa por VOZ no BLOG


Hey, I've just received a free Minecraft Giftcode!
You can get one too!

>> minecraftcodes.me <<

1º Passo - Instalando o CSS da busca

Vamos a instalação do CSS da caixa de busca! 
1. Faça o login no Blogger.
2. Em seguida no menu suspenso clique em Modelo.
3. Depois clique no botão Editar HTML.
4. E procure pela seguinte tag:


]]></b:skin>

5. acima dele adicione o seguinte código:

div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top right no-repeat;
}
div.search-form .search-sliding {
position: relative;
top: 11px;
left: 14px;
border: none;
background: none;
width: 220px;
font-style: italic;
color: #999;
height: 27px;
}
div.search-form .search-label-sliding {
position:absolute;
top:34px;
left:-4000px;
}
div.search-form .search-button {
position: absolute;
left: 263px;
top: 10 px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top left;
width: 55px;
height: 45px;
}
div.search-form .search-button:hover {
background-position:-55px 0;transition: all 0.4s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease;
}
div.search-form .search-button:active {
background-position:-55px 0; -webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease;
-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8); -webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;
div.search-form .search-button a {
background-position:-55px 0;
margin:1px 0 0 1px;
}

Agora vamos ao segundo passo! 


2º passo - Utilizando a busca em seu blog

1. No menu do Blog, clique em Layout
2. Em seguida clique em Adicionar um Gadget
3. Escolha a opção HTML/JavaScript
4. Dê um título ao Gadget
5. E no campo do Gadget adicione o seguinte código HTML:


<form action='/search' class='search' method='get'>
<div class='search-form'>
<label class='search-label-sliding' for='search-sliding' style='left: 15px; opacity: 0.4;'></label>
<input class='search-sliding' id='search-sliding' name='q' onblur='if (this.value == "") {this.value = "pesquisar";}' onfocus='if (this.value == "pesquisar") {this.value = ""}' title='Pesquisar post' type='text'x-webkit-speech="x-webkit-speech" value='Pesquisar'/>
<input class='search-button' src='http://1.bp.blogspot.com/_Zuzii37VUO4/TYq4Kue_QwI/AAAAAAAAFkQ/tQUrOpAJe6g/s000/transparent.gif' type='image'/>
</div>
</form>




Pronto terminamos, fácil né?
Bom, até mais, fiquem com Deus!
Abraços e até a próxima! 

e acesse tbm !

http://www.saintsingame-brasil.blogspot.com/

Comentários