Web Toolbar by Wibiya

25/01/2012

Barra de Pesquisa Personalizada+Caixinhas Fofas com Códigos


Recebi dois pedidos do blog  Muffins Achocolatados que eram para ensinar a fazer uma barra de pesquisa personalizada e como colocar caixinhas com códigos dentro e resolvi atender o pedido e aqui estão os tutoriais, acho que vai ser bem útil.
 Para fazer os tutoriais você vai precisar hospedar imagens e ter os códigos HTML de algumas cores. Hospede as imagens aqui e encontre os códigos das cores aqui.
Se você está cansada daquela barra padrão do Google esse tutorial é pra você! Antes de mais nada abra o seu Bloco de Notas e cole o código abaixo nele:


<style type="text/css">
<!--
#barra-busca {
width: LARGURA DA SUA BARRApx;
height: ALTURA DA SUA BARRApx;
background-image: url(URL DO BACKGROUND DA SUA BARRA);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 31px;
width: 130px;
margin-top: 8px;
margin-left: 8px;
color: #FF1493;
border: 0px solid #9400D3;
float: left;
padding:0px;
background-color: #FFFFFF;
}
#form-busca #bt-busca {
height: LARGURA DO SEU BOTÃOpx;
width: ALTURA DO SEU BOTÃOpx;
background-image: url(URL DA IMAGEM DO BOTÃO);
border: none;
margin-top: 4px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 10px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get action="ENDEREÇO DO SEU BLOG/search"><input id="sprocura" type=text name=q maxlength=255 value="MENSAGEM QUE QUER QUE APAREÇA(EX:PESQUISE)" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="ENDEREÇO DO SEU BLOG" /><input type="hidden" name="sitesearch" value="ENDEREÇO DO SEU BLOG" />
</form></div>

Altere as partes em preto do código pelo pedido. Já? Então agora deixe seu Bloco de Notas um pouco de lado e abra outra aba entrando na conta do seu blog. Vá em Design, Elementos da Página, Adicionar um Gadget e clique em HTML/Javascript e na parte Conteúdo cole o código que nós preparamos no Bloco de Notas. Agora é só salvar e ver se gosta do resultado.



Se você não sabe direito como montar sua barra mas quiser fazer você mesma, mas com uma ajudinha claro, aqui está a solução. Vamos fazer o seguinte, crie um background para sua barrinha deste tamanho:


Agora crie um botão para sua barrinha desse tamanho:


Já? Então hospede as imagens que você fez e substitua as partes em preto do código abaixo:

<style type="text/css">
<!--
#barra-busca {
width: 205px;
height: 45px;
background-image: url(URL DA PRIMEIRA IMAGEM QUE VOCÊ FEZ);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height:31px;
width: 130px;
margin-top: 8px;
margin-left: 8px;
color: #000000;
border: 0px solid #9400D3;
float: left;
padding:0px;
background-color: #FFFFFF;
}
#form-busca #bt-busca {
height: 40px;
width: 40px;
background-image: url(URL DA SEGUNDA IMAGEM QUE VOCÊ FEZ);
border: none;
margin-top: 4px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 10px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get action="ENDEREÇO DO SEU BLOG/search"><input id="sprocura" type=text name=q maxlength=255 value="Pesquise *--*" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="ENDEREÇO DO SEU BLOG" /><input type="hidden" name="sitesearch" value="ENDEREÇO DO SEU BLOG" />
</form></div>

Prontinho, agora é só usar!


 É um pouco difícil deixar a barra certinha então se tiverem dificuldade de criar uma barrinha, aí em baixo tem algumas, para funcionar vocês só precisam substituir os trechos "ENDEREÇO DO SEU BLOG"  no código que é referente a caixinha que você vai usar.


<style type="text/css">
<!--
#barra-busca {
width: 205px;
height: 45px;
background-image: url(http://img812.imageshack.us/img812/7558/backbarrinha.png);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 31px;
width: 130px;
margin-top: 8px;
margin-left: 8px;
color: #FF1493;
border: 0px solid #9400D3;
float: left;
padding:0px;
background-color: #FFFFFF;
}
#form-busca #bt-busca {
height: 40px;
width: 40px;
background-image: url(http://img810.imageshack.us/img810/9178/cupcakebotton2.png);
border: none;
margin-top: 4px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 10px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get action="ENDEREÇO DO SEU BLOG/search"><input id="sprocura" type=text name=q maxlength=255 value="Pesquise aqui *o*" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="ENDEREÇO DO SEU BLOG" /><input type="hidden" name="sitesearch" value="ENDEREÇO DO SEU BLOG" />
</form></div>


<style type="text/css">
<!--
#barra-busca {
width: 205px;
height: 45px;
background-image: url(http://img829.imageshack.us/img829/8778/backblue.png);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 31px;
width: 130px;
margin-top: 8px;
margin-left: 8px;
color: #FF1493;
border: 0px solid #9400D3;
float: left;
padding:0px;
background-color: #FFFFFF;
}
#form-busca #bt-busca {
height: 40px;
width: 40px;
background-image: url(http://img252.imageshack.us/img252/151/botoabelha.png);
border: none;
margin-top: 4px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 10px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get action="ENDEREÇO DO SEU BLOG/search"><input id="sprocura" type=text name=q maxlength=255 value="Pesquise aqui *o*" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="ENDEREÇO DO SEU BLOG" /><input type="hidden" name="sitesearch" value="ENDEREÇO DO SEU BLOG" />
</form></div>


Agora vamos aprender a fazer uma caixinha com código dentro. Abra seu Bloco de Notas e cole o seguinte código nele:

<form>
<textarea rows="4" cols="40" name="myForm" wrap="virtual">SEU CÓDIGO OU TEXTO AQUI</textarea>

Substitua as partes em preto para modificar sua barrinha a seu gosto. Trocando os números 4 e 40 do código você muda o tamanho da caixinha. Quando terminar é só colocar o código no local que desejar, pode ser nas postagens, em um gadget...


Se quiser que a caixinha venha acompanhada do botão "Selecionar" para copiar o código de dentro da caixinha é só usar esse código:

<form>
<textarea rows="4" cols="40" name="myForm" wrap="virtual">SEU CÓDIGO OU TEXTO AQUI</textarea>

<input value="SELECIONAR" onclick="javascript:this.form.myForm.focus();this.form.myForm.select();" type="button"/>

</form>

E agora é só fazer os mesmo como mostrado mais acima. Se quiser que apareça outro texto no lugar de "Selecionar" no botão, você só precisa substituir o trecho em roxo do código acima pelo que desejar.


Ainda tenho outra dica (tô muito boazinha hoje SHUAHSU). Se quiserem que sua caixinha tenha um background copiem o código abaixo e colem no seu Bloco de Notas.

<textarea cols="14" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="3" style="background-image: url(URL DO BACKGROUND DA CAIXINHA); border: 1px solid #COR DO TEXTO DENTRO DA CAIXINHA; font-family: FONTE(EX: VERDANA, ARIAL); font-size: TAMANHO DA FONTE,INDICO O TAMANHO 8pt;">SEU CÓDIGO AQUI</textarea>

Altere as partes em preto e o código já estará pronto para ser usado! Quem quiser umas caixinhas já prontas, aí estão, para usar é só copiar o texto que tem dentro da caixa desejada.

      




Gostaram? Se quiserem mais utilitários é só pedir por comentário *--* Fiz os tutoriais com muito amor!

30 Comentários:

Cabide Moderno disse... [Responder essa Fofura]

Muito bom esse tutorial, vou usar no próximo lay *u*
Te espero lá, bjbj
http://cabidemoderno.blogspot.com/

Muffins Achocolatados disse... [Responder essa Fofura]

Oi dedessa!!Adorei o post,muito obrigada por atender a minhas duas perguntas:como é que se usa o imageshack?eu não consigo usar de jeito nenhum!me ajuda?desculpa tar te pedindo tantas coisas!bjs!!

Muffins Achocolatados disse... [Responder essa Fofura]

Ops...deixa pra lá!Eu já aprendi!Mesmo assim,obrg!!

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Li e respondi :)

Lu Ayub . disse... [Responder essa Fofura]

OMG! Eu sempre quis essa barra de pesquisa personalizada! No meu próximo layout com toda certeza do mundo eu vou usar!! E essas caixinhas personalizadas são um amor *-* Mas eu prefiro por códigos de tutos no blockquote hehe Beijos

www.guitarra-imaginaria.blogspot.com

Melisa Salazar disse... [Responder essa Fofura]

Wow, adorei os tutoriais :D

http://esmaltesycia.blogspot.com/

Muffins Achocolatados disse... [Responder essa Fofura]

Ooi dedessa!Eu não consigo fazer com que a caixa procure alguma coisa,quando eu pesquiso aparece que o blog não existe!Outra coisa,o botão ta indo pro lugar errado!eu tô tentando usar aquele do cupcake de limão!O que eu faço?? :o

Camilla Demézio disse... [Responder essa Fofura]

Muito perfeito esse tuto,vou usar com certeza *--*
http://meumundomudando.blogspot.com/

Quezia blog disse... [Responder essa Fofura]

Adorei seus post e principalmente seu blog,muito criativo e muito fofinho.Amei,de uma olhadinha lá no meu blog.
http://parameninas-s2.blogspot.com/
Beijos!

Ana e Júlia disse... [Responder essa Fofura]

caaaaaaaaaaaramba, entrei no seu blog, vi o cabeçalho E JA COMECEI A AMAAAAAAAAAAAAR, LINDOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
AAAAAAAAI SOCORRO LINDO LINDO!


seguindo seg de volta floooor ?
ai ti fofix seu blog adoreei (:

www.garotasglamour-blog.blogspot.com

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Respondidos, e Muffins Achocolatados eu testei os códigos mas não vi nenhum problema. Será que é com a conta do seu blog? Se mais alguém não conseguiu com o código me avise para eu testar de novo. Beijoos

www.tudyteen.blogspot.com

Sabrina Paquiela disse... [Responder essa Fofura]

Amei o tutorial, bem fácil de entender e interessante
Seguindo você :)
Sucessos, super beijo

http://sempreessencial.blogspot.com/
Visitem-me sou nova por aqui ;)

Bruna disse... [Responder essa Fofura]

awwwwwn, q fofo q ficou a caixinha da imagem ai haha ♥]
eu adorei as caixinhas tbm!
o blog ta mara;

Bjs,
bnascimentooo.blogspot.com

Tutti Berry disse... [Responder essa Fofura]

Nossa tuto grande
mas muito legal
ah participa do concurso que está rolando no gp e no annalaurasla: smile ag
confira :
http://gpurple.blogspot.com/2012/01/concurso-smile-ag.html

beijinhos

Anna Sophia disse... [Responder essa Fofura]

Seu blog é lindo,amei muito kawaii!!!Vou seguir!já está nos favoritos!beijos
www.cotidianodeumabarbie.blogspot.com

*Vanessa* disse... [Responder essa Fofura]

oi meu nome é vanessa amei seu blog ele é super fofo e lindoooo!!!

Já estou seguindo segui de volta??

Links:
www.iluvcandybars.blogspot.com
www.cute-teenagerz.blogspot.com
www.livina-teenagedream.blogspot.com

Trixie . disse... [Responder essa Fofura]

Oi linda , desculpe pela demora dos prêmios do concurso , é que deu uns problemas aqui e eu não consegui lhe enviar o pacote e a entrevista , mas calma que lhe enviarei imediatamente .
Beeijos , Trixie .

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Respondi todinhos *--*

Sweet Princess disse... [Responder essa Fofura]

amei os tutoriais!!!!! ja estou seguindoo!!!

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Obrigada :)

Data Clipe disse... [Responder essa Fofura]

Com seu código pronto ficou muito mais simples só editar o tamanho, imagens e fazer a barrinha do meu blog. Só queria saber agora como faço para os posts da busca ficarem organizados por data. Obrigado :)

Conectada* disse... [Responder essa Fofura]

Floooooor,seu blog é nota 10!!
Que cantinho lindo :D
E amei os tutos :))
Bezos!

veryconnected.blogspot.com.br
@Loh_Anielly

Anônimo disse... [Responder essa Fofura]

Não gostei muito das barras de pesquisas(pelo fato de serem extremamente Fofas!) pois eu sou menino e isso não cairia bem no meu site, mas amei o Tutorial! Da hora! A partir do Tutorial pude fazer uma barra perfeita pro meu site.
Ps.: Passei 29:05 minutos da minha vida tentando fazer figuras com os brilhos que saem do ponteiro do mouse no seu site -_-... Foram um dos melhores da minha vida!

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

HAHA você não sabe o quanto me fez rir com o seu comentário, anônimo shuahsuau Fico muito feliz de ter ajudado ( e que o glitter que sai do mouse aqui do blog tenha te divertido kkk). Por que você não deixa o endereço do seu site para que eu visite? Beijoos *-*

Anônimo disse... [Responder essa Fofura]

@Dedessa (*TudyTeen*) Não publiquei o site ainda, to terminando, queria um tuto que mostrasse algum comando para aplicar a funcionalidade da barra de pesquisa como a do Google e a do The Pirate Bay, tipo: Uma barra de pesquisa grande(bem no centro) na pagina inicial, dai botamos o q desejamos pesquisar nela e clicamos Enter, depois ela se desloca para o canto superior direito da tela e os resultados aparecem abaixo. Se não for pedir muito :D. É sério, só falta isso pra publicar meu site(e tbm falta o conteúdo, mais vamo q vamo!):D

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Anônimo eu gostaria muito, muito mesmo de poder ajudar, mas eu realmente não sei :/ Não sei se não entendi corretamente a sua pergunta, mas de qualquer forma fiz algumas pesquisas porém não encontrei nada relacionado ao que pediu. O que você pode fazer para destacar mais a barra de pesquisa do seu blog é alterar no próprio código do tutorial o tamanho da sua barra. Outra coisa que você pode fazer é colocar a barra de pesquisa no próprio cabeçalho, veja esse tutorial aqui, que é bem simples: http://wehearthtml.blogspot.com.br/2012/08/gadgets-no-cabecalho-sem-exclui-lo.html . Caso ainda tenha alguma dúvida em relação ao que disse basta me contatar, tá bom? Ah, caso não consiga fazer a barra de pesquisa e queira uma pronta (só que não tão fofa shauhsua) basta me dizer quais são as cores principais do seu blog que eu posso fazer uma barra de pesquisa pra você :) Ah, não esqueça de deixar o link do seu site quando ele estiver pronto! Beijoos *-*

Anônimo disse... [Responder essa Fofura]

@Dedessa (*TudyTeen*)Hum, valeu msm Dedessa, Já encontrei pow, tenho de hospedar meu site num host com suporte PHP, mas caso não consiga achar um host gratuito vou seguir vou ter de fazer isso que vc disse, botar a barra de pesquisa no cabeçalho :/

Meu nome é Lercio, to com preguiça de logar no Google -o-

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Poxa, isso parece um pouco complicado :/ É bem mais fácil colocar a barra de pesquisa no cabeçalho :) Olha, encontrei um site que acho que é o que você procura: http://www.gratisphphost.info/ Espero que consiga, Lercio! Sucesso :)

Junior disse... [Responder essa Fofura]

@Dedessa (*TudyTeen*)Dedessa, nesse site, as inscrições pro Brasil estão suspensas :/ tentei fazer no Wix.com, meu site ficou da hora, pois lá eles oferecem um construtor de sites gratuito com o sistema "arraste-e-solte" muito massa, mas não tem suporte PHP. To vendo se o site AWARDSPACE é confiavel, se ele for eu vou hospedar meu site nele.
Onde vc achou esse site? vc pesquisa no google msm? Vc achou tão rápido : |

Dedessa (*TudyTeen*) disse... [Responder essa Fofura]

Sim eu procurei no Google por: host com suporte PHP gratuito e apareceram esses resultados: https://www.google.com.br/search?q=host+com+suporte+PHP+gratuito&rlz=1C1DVCJ_enBR455BR456&oq=host+&sugexp=chrome,mod=11&sourceid=chrome&ie=UTF-8 Nossa, esse Wix.Com parece bem legal! Conheço um site que também tem esse sistema arraste e solte, o link é esse: http://www.stiqr.com/free Talvez ele tenha o suporte PHP, vê lá :) Além disso ele é gratuito e parece confiável e simples de usar e funciona nas plataformas do Wordpress, Blogger e Tumblr. Quero ver o seu blog ficar lindo, hein? Beijos *-*