Caixinhas de busca para blogs

Olá caros leitores! Antes de mais nada, Feliz Ano Novo à todos! Eu pretendia fazer uma postagem desejando-lhes o melhor para 2009 ontem, porém com a chuvinha que deu por aqui fiquei sem internet :(. E vamos agora à primeira postagem do ano! (lol)

Como muitos de meus leitores gostaram da dica de como montar uma caixa de pesquisa em blogs montei um modelo de caixinha simples, porém bonito e funcional. Os quatro modelos abaixo podem ser instalados muito fácilmente - basta clicar no modelo escolhido. Escolha e divirta-se! ;)

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #330066; background-color: #330066; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #ffffff; font-size:100%; font-color: #cccccc; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #6d6845; background-color: #6d6845; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #ffffff; font-size:100%; font-color: #cccccc; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #cc6600; background-color: #cc6600; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #ffffff; font-size:100%; font-color: #cccccc; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #993300; background-color: #993300; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #cccccc; font-size:100%; font-color: #000000; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

Formulário de e-mail Kontactr

Há alguns dias um de nossos leitores não conseguiu instalar em seu blog o formulário de e-mail básico e então eu prometi que faria uma postagem sobre como conseguir um formulário de e-mail do Kontactr. Este formulário é simples, mas muito prático e útil. Além de evitar os robôs de busca dos spammers, também pode dar um toque elegante em sua página, dependendo de como você customizá-lo (ou então isto é besteira minha...). O melhor de tudo é que o negócio é incrivelmente fácil de instalar. Porém, para os que estiverem com muita preguiça, fiz este tutorial aqui, que espero facilite para vocês. Vamos lá? Vou dar tudo bem ilustrado com telas, seguindo os passos. ;)

1. Entre no site http://www.kontactr.com/ e clique em Sign Up, como na imagem abaixo.

2. Preencha o formulário de inscrição  com os dados: Nome, Sobrenome, Endereço de e-mail, Nome de usuário, senha e confirme a senha. Muito fácil! Quando tiver preenchido todos clique em Submit.

3. Você será redirecionado para a página Sucesso. Agora, você deve verificar seus e-mails buscando o e-mail de confirmação do Kontactr. Lembre-se de que alguns servidores de e-mail identificam e-mails automaticamente gerados como este como spam. Então, se não achar o e-mail, verifique se ele não se escondeu na pasta de itens excluídos.

4. Após receber o e-mail, clique no link nele fornecido, para ativar a sua conta.

5. Então, na página Sucesso, clique onde está escrito Click here to login once you have activated.

6. Faça login, com seu nome de usuário e senha.

7. Após fazer o login você entrará numa página como a da figura abaixo. Você verá duas caixas de texto. Uma Embed Widget e a outra Embed Widget - AJAX. Clique em Customize this widget, embaixo da segunda caixa.

8. Nesta página, você poderá customizar o seu formulário de contato, definindo suas cores. Ao acabar, clique em OK.

9. Copie o código desta caixa de texto (ver imagem abaixo) e cole-o em uma nova postagem em seu blog. Dê o nome à postagem de Contato ou do que achar melhor e publique.

 Seu formulário estará pronto! Que tal o achou?

Formulário de e-mail básico

Hoje veremos como montar um formulário de e-mail básico. Este formulário é utilizado em muitos sites na página contato, em vez do tradicional link de e-mail. Pode ser muito útil para blogueiros, e dá um ar mais profissional à seu blog. Considerando-se que este formulário raramente aparece em blogs, será interessante instalá-lo agora.




Nada mais fácil do que conseguir este formulário para seu blog. Siga os passos dados à seguir.
1. Acesse o seu painel do Blogger.
2. Vá para a página Layout -- Elementos de página.
3. Clique Adicionar um gadget.
4. Na janela pop-up que aparecerá, selecione o gadget HTML/Javascript.
5. Cole aí o seguinte script:

<script>

function CheckFields(pform) {
if ( pform.NOME.value == ""
pform.URL.value == ""
pform.MENSAGEM.value == ""
pform.EMAIL.value == "" ) {
alert( "Todos campos devem ser preenchidos." );
return false;
}
else {
alert ("Obrigado " +pform.NOME.value + "\nEspere um minuto, por favor...")
pform.action="mailto:" +pform.SEUEMAIL.value +"";
location.href="" +pform.REDIRECIONAMENTO.value +"";
return true;
}
}
</script>

Salve o gadget.

6. Vá para a nova postagem onde você deseja colocar o formulário.
7. Cole aí o seguinte código:

<form enctype="text/plain" name="pform" onsubmit="JavaScript:return CheckFields(this);" method="post">

<TABLE cellSpacing=2 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR class=p2>
<TD width="18%" height="23"> <DIV align=right><B>Seu nome: </B></DIV></TD>
<TD colSpan=3><INPUT value="beckerqueiroz@gmail.com" type="hidden" size=50 name="SEUEMAIL"> <INPUT value="http://mestreblogger.blogspot.com" type="hidden" size=50 name="REDIRECIONAMENTO">
<INPUT size=50 name="NOME"> </TD>
</TR>
<TR class=p2>
<TD width="18%"> <DIV align=right><B>Endereço de seu blog:</B></DIV></TD>
<TD colSpan=3><input value="http://" name="URL" size="50" onBlur="if(this.value==''){this.value='http://'}"/></TD>
</TR>
<TR class=p2>
<TD width="18%"> <DIV align=right><B> E-Mail:</B></DIV></TD>
<TD colSpan=3><input name="EMAIL" size="50"/> </TD>
</TR>
<TR class=p2>
<TD vAlign=top width="18%"> <DIV align=right><B> Mensagem:</B></DIV></TD>
<TD colSpan=3> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>
<textarea name="MENSAGEM" rows=5 cols=40></textarea>
</FONT></P></TD>
</TR>
<TR>
<TD vAlign=top width="18%"> <DIV align=right><B></B></DIV></TD>
<TD colSpan=3> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>
<input value="Submeter" name="Submit" type="submit"/>
</FONT></P><P><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><i>Por <a href="http://mestreblogger.blogspot.com">Mestre Blogger</a></i></font></P></TD>
</TR>
</TBODY>
</TABLE>
</form> 

Modifique apenas os dois trechos mostrados em verde. No primeiro, que é o meu endereço de e-mail, coloque o seu e-mail. No segundo, ponha o endereço da página para qual o visitante será redirecionado após enviar o e-mail. A página pode ser uma postagem de seu blog com uma mensagem agradecendo, ou mesmo a página principal de seu blog. Agora publique a postagem.

Lembre-se que é necessário não retirar os créditos de modo algum, pois este trabalho é nosso, e retirá-los é ilegal.

Quando você receber um e-mail, agora, a organização da mensagem será assim:

SEUEMAIL=beckerqueiroz@gmail.com
REDIRECIONAMENTO=http://mestreblogger.blogspot.com
NOME=Aqui o nome do remetente
URL=Aqui o endereço do blog do remetente
EMAIL=Aqui o e-mail do dito
MENSAGEM=E aqui a sua mensagem
Submit=Submeter

Os dados do visitante serão tudo que está mostrado em preto acima, e o resto, que não importa para o formulário, são os seus dados de e-mail, redirecionamento, e submissão de e-mail.

Agora você pode disponibilizar o formulário em sua página de contato facilmente. Não é fácil?