15 de outubro de 2012

Tutorial caixa de Pesquisa personalizada

                                
Oi gente trouce mais um tuto hoje vamos ver?


útil e facilita a navegação do leitor no seu blog, o tutorial está super fácil e essa caixa ajuda no design do seu blog já que você vai personalizar com cor e imagens. Para colocá-la é fácil, você não precisa ter conhecimento de HTML e não precisa mexer no modelo do seu blog, basta apenas seguir as instruções abaixo. 


<style type="text/css">
<!--
#barra-busca {
width: 270px; /*largura da imagem*/
height: 20px; /*altura da imagem*/
background-image: url(IMAGEM 1);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 20px; /*altura da caixa de texto*/
width: 200px; /*largura da caixa de texto*/
margin-top: 10px; /*posição em relação ao topo*/
margin-left: 10px; /*posição em relação á esquerda*/
color: #FF69B4; /*cor do texto*/
border: 1px solid #E8E8E8; /*cor da borda*/
float: left;
padding: 2px;
background-color: #FFFFFF; /*cor do fundo*/
}
#form-busca #bt-busca {
height: 32px; /*altura da imagem*/
width: 32px; /*largura da imagem*/
background-image: url(IMAGEM 2);
border: none;
margin-top: 3px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 15px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get action="http://www.google.com.br/search"><input id="sprocura" type=text name=q maxlength=255 value=" PERGUNTA " />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="NOME DO BLOG" /><input type="hidden" name="sitesearch" value="NOME DO BLOG" /></form></div>
Grifei alguns nomes importantes para começar a personalizar sua caixinha.
- Começando por IMAGEM 1. Nesse espaço você vai colocar o url da imagem de fundo da sua caixinha, da sua preferencia. Crie a imagem, hospede e coloque o url nesse espaço.
- Logo depois você vai encontrar IMAGEM 2, é onde vai ficar o url da imagem do botão de busca. Nesse espaço você pode colocar uma lupa, um "ok" ou o que preferir.

- Na parte PERGUNTA é onde fica escrito a pergunta dentro da caixinha. EX: "O que você procura" "Ta perdido?" ou você pode deixar vazio, é só apagar a parte "PERGUNTA".

As outras alterações tem no código mesmo.
Acompanhou até agora? Claro que sim. Agora é a parte mais simples. Com o código já alterado, você vai em Design > Elementos da página > Adicionar um gadget. Você vai adicionar o gadget de HTML/JavaScript. Cole o código, salve e veja como ficou! Qualquer coisa reveja o código para saber se estar tudo certo ou fala ai :]

creditos

Nenhum comentário:

Postar um comentário

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)