Mestre Blogger

Voltei a responder comentários

2010-02-10T16:32:00.002-02:00

Olá caros leitores. Estou apenas registrando que voltei a responder os comentários de dúvidas, que tinha negligenciado nos últimos tempos. Aos poucos vou ativar o blog novamente. Sintam-se a vontade para perguntar qualquer coisa. Alberto.

Elemento de página sobre a postagem

2009-12-18T18:36:00.005-02:00

Olá, caros leitores. Não tenho tido ocasião para novas postagens faz certo tempo, e lamento não poder responder a todos comentários e e-mails. Dentro em breve espero estar de volta com muitas novidades e novas postagens. Estou colocando esta aqui porque um amigo, do blog Treino de Xadrez estava curioso a respeito disto. Possivelmente muitos de vocês conhecem e usam este recurso do Blogger, mas para quem não souber... Como colocar um elemento de página sobre as postagens, logo abaixo do cabeçalho? Fácil! Faça como indicado - 1. Após o login no Blogger, entre na página Layout de seu blog, na aba Elementos da página. 2. Clique em Adicionar um gadget. 3. Escolha a opção desejada (no caso é HTML/Javascript, porque vamos colocar um menu de blog sob o cabeçalho). 4. Cole neste elemento de página o código HTML equivalente ao menu e salve. 5. Voltando agora para a página Elementos da página, clique com o botão esquerdo do mouse sobre o gadget que você acabou de criar, mantenha seguro o botão e arraste até em embaixo do cabeçalho. Um espaço vai se abrir para o gadget no local, solte-o aí (Veja figuras abaixo).

6. Finalmente, clique Salvar e visualize seu blog. Desculpem não facilitar indicando alguns menus em HTML ao alcance de mão. No entanto, uma busca no Dicas Blogger pode ajudar! ;) Abraços!

Caixinhas de busca para blogs

2009-01-01T13:23:00.002-02:00

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! ;)

Icones para blogs no FreeIconsWeb

2008-12-26T11:38:00.000-02:00

Conferindo as atualizações de meus sites favoritos hoje, achei esta bela coleção de ícones para sites ou blogs disponível sem restrições no site Free Icons Web, um de meus favoritos na busca de ícones para uso em blogs. Os ícones podem ser baixados em formato .zip . Para isto é só acessar este link: http://www.freeiconsweb.com/free_developers_icons.html e clicar no ícone Download, no fim da página.

Para os que não estão acostumados a lidar com o programa Win Zip, necessário para o download dos ícones, recomendo esta postagem no Dicas para Blogs, ótimo blog de dicas que muito me ajudou quando eu era um iniciante e que ainda hoje me ajuda em alguns problemas.

Bom proveito!!

Googlifique seu logo

2008-12-20T16:24:00.002-02:00

Achei no Compulsivo o link para o site Google Font que 'googlifica' qualquer logo digitado lá. Agora todos podem ter seu logotipo com a cara do Google. ;) É só acessar este site, digitar o nome de seu blog e dar um enter. A imagem será carregada e você poderá baixá-la (em formato .gif) rapidamente.

Achei interessante mesmo foi o novo verbo que o Compulsivo inventou lá...: Googlificar.

Um novo verbo foi inventado?

Contador de visitas únicas

2008-12-20T14:09:00.004-02:00

A dica de hoje é como instalar um script muitíssimo simples e bem interessante em seus blogs. O script é um contador de visitas no blog, porém é diferente dos demais. Ele mostra à cada visitante quantas vezes ele mesmo atualizou a página, e não o total de atualizações por diferentes visitantes. Funciona baseado no sistema de cookies, de modo que se o visitante excluí-los a contagem recomeçará, mas isto acontece raramente. Também é facílimo instar este script. Os primeiros passos são para quem ainda não sabe onde instalar estes códigos.

1. Vá para a página Layout -- Editar HTML.
2. Clique em Adicionar um gadget.
3. Escolha a opção HTML/Javascript na janela pop-up que aparecerá.
4. Cole aí o código a seguir e salve o gadget, após o que é só ver o blog para confirmar. ;)

<table border="0" width="200" style="border:4px solid white">

<tr>
<td>
Obrigado por sua visita! Você já atualizou esta página <script language="JavaScript">
function getCookieSlsv (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieSlsv (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString()))
+
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie(name) {
var exp = new Date();
FixCookieDate (exp);
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
if (cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expdate = new Date();
var num_visits;
expdate.setTime(expdate.getTime() + (365*24*60*60*1000));
if (!(num_visits = GetCookie("num_visits")))
num_visits = 0;
num_visits++;
SetCookie("num_visits",num_visits,expdate);
document.writeln(num_visits+" vezes!");
</script>
</td>
</tr>
</table>

E aqui está uma demonstração do código. Divirtam-se!

Obrigado por sua visita! Você já atualizou esta página

Tic Tac Toe

2008-12-18T18:32:00.002-02:00

Lembra do clássico joguinho "da velha", ou Tic Tac Toe? Agora temos a versão dele em javascript, onde você pode jogar contra um computador. E também pode ser adicionado à seu blog muito facilmente. A versão tem os créditos do site Dynamic Drive.Veja como consegui-la:

1. Vá para a página Layout -- Elementos de página.

2. Clique em Adicionar um Gadget.

3. Escolha a opção HTML/Javascript na janela pop-up que aparecerá.

4. Cole aí o código dado a seguir e salve.

<script language="javascript">

//Tic Tac Toe- By Brian (http://scriptasylum.com/bgaudiodr/)
//Modified by Yossi Cohen (yossi@prosite.co.il)
//Featured on Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script

var image1=new Image(); image1.src="http://beckerqueiroz.googlepages.com/ex.gif";
var image2=new Image(); image2.src="http://beckerqueiroz.googlepages.com/oh.gif";

var level=1, myway, mynextmove;
var tmp, done, iswon, content;
var pcwins=[0,0,0,0];
var playerwins=[0,0,0,0];
var draws=[0,0,0,0]; 
var playerstarts=true;
var moves=new Array();
var game=new Array(9);
var choices=[11,12,13,21,22,23,31,32,33];
var corners=[11,13,31,33];
var ways=new Array();
ways[1]=[0,11,12,13];
ways[2]=[0,21,22,23];
ways[3]=[0,31,32,33];
ways[4]=[0,11,21,31];
ways[5]=[0,12,22,32];
ways[6]=[0,13,23,33];
ways[7]=[0,11,22,33];
ways[8]=[0,13,22,31]; 
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

function init(){
oktoplay=true;
iswon=false;
done=0;
writetext(4);
moves[11]=0; moves[12]=0; moves[13]=0; moves[21]=0; moves[22]=0; moves[23]=0; moves[31]=0; moves[32]=0; moves[33]=0;
for(i=0;i<=8;i++){
document.images['rc'+choices[i]].src="http://beckerqueiroz.googlepages.com/nothing.gif";
document.images['rc'+choices[i]].alt="";
game[i]=0;
}
if(!playerstarts)pcturn();
}

function writetext(num){
switch(num){
case 1: content='Este jogo foi um empate.';
break;
case 2: content='O computador ganhou esta rodada.';
break;
case 3: content='Você ganhou esta rodada.';
break;
case 4: content='NÍVEL: '+level+'\n\nComputador ganhou:  Este nível- '+pcwins[level]+'  (Total: '+(pcwins[0]+pcwins[1]+pcwins[2]+pcwins[3])+')\nJogador ganhou  :  Este nível- '+playerwins[level]+'  (Total: '+(playerwins[0]+playerwins[1]+playerwins[2]+playerwins[3])+')\nEmpates        :  Este nível- '+draws[level]+'  (Total: '+(draws[0]+draws[1]+draws[2]+draws[3])+')';
break;
}

document.scores.scores2.value=content

if(num<4)setTimeout('init(4)',1000);
}

function setlevel(x){
 if (level!=x){
  level=x;
  init();
}}

function setbutton(cellnum){
if (!iswon){    // Thanks to Roger for finding this Bug !!!
if(moves[cellnum]==0){
document.images['rc'+cellnum].src="http://beckerqueiroz.googlepages.com/ex.gif";
document.images['rc'+cellnum].alt=" X ";
moves[cellnum]=1;
game[done]=cellnum;
done++;
findwinner(true);
}else alert('Você não pode mexer aqui!');
}}

function pcstrategy(istowin){
if (level>0){
var str=(istowin)? 2 : 1;
for(n=1;n<=8;n++){
if((moves[ways[n][1]]==str) && (moves[ways[n][2]]==str) && (moves[ways[n][3]]==0)) tmp=ways[n][3];
if((moves[ways[n][1]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][2]]==0)) tmp=ways[n][2];
if((moves[ways[n][2]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][1]]==0)) tmp=ways[n][1];
}}}


function selecCorner(which){
if (which=="empty"){
do{
tmp=corners[Math.floor(Math.random()*4)];
}while(moves[tmp]!=0);
}
else
tmp=corners[Math.floor(Math.random()*4)];
}


function pcdontlose(){
if (!playerstarts){
if (done==0){
tmp=choices[2*Math.floor(Math.random()*5)];
if (tmp==22) myway=1;
else myway=2;
}
else if (done==2){
if (myway==1){
if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33)
tmp=44-game[1]; 
else{
dlta=22-game[1];
op0=22+dlta+(10/dlta);
op1=22+dlta-(10/dlta);
tmp=eval("op"+Math.floor(Math.random()*2));
}}
else if (myway==2){
if (game[1]==22){
tmp=44-game[0];
myway=21;
}
else if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33){
selecCorner("empty");
myway=22;
}
else{
tmp=22;
myway=23;
}}}
else if (done==4){
if (myway==22){
for (i=0; i<4 ;i++){            
if (moves[corners[i]]==0){
tmp=corners[i];
}}}
else if (myway==23){
dlta=game[1]-game[0];
op0=44-(game[1]+dlta);
op1=(op0+game[0])/2;
tmp=eval("op"+Math.floor(Math.random()*2));
}
else if (myway==1)
tmp=44+game[2]-(2*game[3]);
}}
else if (level==3){
if (done==1){
if (game[0]==11 || game[0]==13 || game[0]==31 || game[0]==33){
tmp=22;
myway=1;
}
else if (game[0]==22){
selecCorner("any");
myway=2;
}
else{
tmp=22;
myway=3;
}}
else if (done==3){
if (myway==1){
if (game[2]==44-game[0])
tmp=choices[1+(2*Math.floor(Math.random()*4))];
else
tmp=44-game[0]
}
else if (myway==2){
if (game[2]==44-game[1])
selecCorner("empty");
}
else if (myway==3){
if (game[2]==11 || game[2]==13 || game[2]==31 || game[2]==33)
tmp=44-game[2];
if (game[2]==44-game[0]){
dlta=22-game[2];
tmp=22+(10/dlta);
mynextmove=tmp+dlta;
}
else{
dlta=22-game[0];
op0=game[0]+(10/dlta); 
op1=game[0]-(10/dlta); 
op2=game[2]+dlta; 
tmp=eval("op"+Math.floor(Math.random()*3));
}}}
else if (done==5 && myway==3){
tmp=mynextmove;
}}}


function findwinner(isplayer){
me=(isplayer)? 1 : 2;
for(n=1;n<=8;n++){
if( (moves[ways[n][1]]==me) && (moves[ways[n][2]]==me) && (moves[ways[n][3]]==me) ){
iswon=true;
break;
}}
if(iswon){
if(isplayer){
playerwins[level]++;
playerstarts=true;
writetext(3);
}else{
pcwins[level]++;
playerstarts=false;
writetext(2);
}}else{
if(done>8){
draws[level]++;
playerstarts=!playerstarts;
writetext(1);
}else if(isplayer) pcturn();
}}

function pcrandom(){
do{
tmp=choices[Math.floor(Math.random()*9)];
}while(moves[tmp]!=0);
}

function pcturn(){
tmp='00';
pcstrategy(true);
if(tmp=='00')pcstrategy(false);
if(tmp=='00' && level>1)
 pcdontlose();
if(tmp=='00')
 pcrandom();
moves[tmp]=2;
game[done]=tmp;
document.images['rc'+tmp].src="http://beckerqueiroz.googlepages.com/oh.gif";
document.images['rc'+tmp].alt=" O ";
done++;
findwinner(false);
}

window.onload=init;

window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
}
</script>


<table border="5" bordercolor="black" cellpadding="0" cellspacing="0" bordercolorlight="gray" bgcolor="white"><tr>
<td width="55"><a href="javascript:setbutton(11)"></a></td>
<td width="55"><a href="javascript:setbutton(12)"></a></td>
<td width="55"><a href="javascript:setbutton(13)"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(21)"></a></td>
<td width="55"><a href="javascript:setbutton(22)"></a></td>
<td width="55"><a href="javascript:setbutton(23)"></a></td>
</tr><tr>
<td width="55"><a href="javascript:setbutton(31)"></a></td>
<td width="55"><a href="javascript:setbutton(32)"></a></td>
<td width="55"><a href="javascript:setbutton(33)"></a></td>
</tr></table><br/>

<form name="scores"><textarea rows="6" cols="30" name="scores2" readonly></textarea>

<br/><br/>
<input id="level" name="level" onclick="setlevel(0)" type="radio"/>nível 0 --  o Computador é completamente tonto. <br/>
<input id="level" checked name="level" onclick="setlevel(1)" type="radio"/>nível 1 --  O Computador é mais esperto. <br/>
<input id="level" name="level" onclick="setlevel(2)" type="radio"/>nível 2 --  Você pode conseguir ganhar (somente se você começar). <br/>
<input id="level" name="level" onclick="setlevel(3)" type="radio"/>nível 3 --  O Computador NÃO perde. <br/>

</form>

E está pronto! Experimente em seu blog agora.

Como bloquear o mouse em seu blog

2008-12-17T14:09:00.000-02:00

Aqui veremos um dos muitos truques para proteger seu blog de cópia. No entanto, sempre haverão outros métodos para gravar o texto ou imagem bloqueados, esteja certo. O script que veremos aqui impede a utilização do botão direito do mouse, desabilitando assim a forma mais usada de gravação e cópia. O script é muito fácil de instalar, e funciona nos navegadores Internet Explorer, Firefox e Opera com sucesso. Quanto a outros, não sei. Para proteger seu blog deste modo, proceda assim:

1. Entre em Layout -- Editar HTML.

2. Clique em Adicionar um Gadget.

3. Na janela pop-up que abrirá então, escolha a opção HTML/Javascript.

4. E, finalmente, cole o código abaixo neste gadget e salve. Depois disso é só verificar seu blog para comprovar o funcionamento do script.

Código necessário:

Tabela de códigos das cores (postagem referencial)

2008-12-16T14:47:00.002-02:00

Aqui temos um script retirado e customizado à partir do origninal no site Dynamic Drive que mostra os códigos referentes a todas as cores. Para utilizá-lo, clique aqui e abra o selecionador. Veja na imagem acima como conseguir o código desejado. É só clicar na cor com o mouse que o código refente a ela aparecerá. Mais simples impossível! :)

Formulário de e-mail Kontactr

2008-12-15T19:31:00.002-02:00

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?

Widget Top Comentaristas customizado

2008-12-15T14:36:00.003-02:00

Wanda e Cosmo, os comentaristas mágicos!

Há alguns dias atrás me veio uma ideiazinha impertinente que me perseguiu até que a pus em prática: uma customização do super-usado widget Compulsivo Top Comentaristas.

A modificação coloca tudo numa lista em menu suspenso, em vez da lista clássica e sempre usada. Após enviar um e-mail para o Compulsivo perguntando se estava tudo bem publicar aqui o código, e-mail este que foi respondido em menos de dois minutos, aqui estou disponibilizando para quem quiser a modificação. E para facilitar ainda mais para quem quiser instalar o widget, há o mesmo gerador usado lá no Compulsivo. Vejamos o que é dito sobre o widget na postagem original:

Quer aumentar pra valer os comentários no seu blog? Instale o Widget Compulsivo Top Comentaristas para o Blogger / Blogspot e estimule seus leitores a participarem das discussões para ganhar links!

Este Widget exibe uma lista de links para os sites dos comentaristas mais ativos, permite filtrar até dois nomes na lista e definir a quantidade de comentaristas exibidos.

E as principais características e diferenciais do widget do Yahoo no qual foi baseado:

Características e Diferenciais do Widget Compulsivo:

Backlinks: Os links na lista apontam para o blog do comentarista e não para o comentário mais recente. Este é o maior estimulante, pois os aqueles que mais comentaram usando a opção OpenID, recebem um backlink direto. Quem comenta usando a Conta Google recebe um backlink para a página do seu perfil no Blogger;
Lista simples: Ao invés de usar uma lista numerada, optei pela lista simples. Afinal os Top Comentaristas já são organizados em ordem decrescente. Além disso a lista simples integra-se melhor a maioria dos templates;
Filtragem de Comentaristas: Além de filtrar seu próprio nome da lista de comentaristas mais ativos, você também terá disponível a opção de filtrar mais um nome, caso haja necessidade. Essa opção é particularmente útil em blogs com mais de um autor ou onde o nome do autor tenha sido alterado;
Quantidade de comentaristas: Com o Widget Compulsivo Top Comentaristas, você pode definir a quantidade de links exibidos na lista sem necessidade de alterar códigos.

Diferença do Widget Modificado

Lista em menu suspenso: ao invés de utilizar a lista normal, a lista é contida em um espaço muito menor em um menu suspenso. Assim, mesmo ocupando um lugar de destaque em seu template, não preencherá muito espaço do seu blog.

Veja aqui as duas imagens do widget em meu blog:

Lista no modo anterior Lista em menu suspenso

Como faço para instalar este widget?

Muito fácil! Para instalar o widget original, clique aqui, e para instalar o widget customizado, clique aqui!

É só preencher os campos no gerador e clicar, que o widget será instalado automaticamente em seu blog. Bom proveito!
Aviso: Não remova os créditos, agora acrescidos dos meus. ;)

Abrir links externos em nova janela

2008-12-14T12:55:00.002-02:00

Durante estes últimos dias, achei no site Dynamic Drive um script muito interessante, que muitos gostariam de ter em seus blogs. Em geral, quando queremos que links em nosso blog abram em uma nova janela, adicionamos o atributo target="_blank" no código do link. Porém, para não ter que fazer isto em todos os links, e deixar o leitor escolher se quer sair da página ou não, existe este belo script. Uma das coisas mais chatas para por num blog é fazer com que os links do próprio blog abram em outras janelas. E o script inclui esta opção... O script aparece assim:

Podem vê-lo na minha barra lateral. Se a caixa for marcada, com está na imagem acima, todos os links para outros blogs e sites abrirão em uma nova janela, ou aba, porém os links do Mestre Blogger continuarão na mesma janela. Tirando a marca da caixa, links externos também abrirão em nova janela. O melhor de tudo é que este excelente script é facílimo de instalar em seu blog, leva poucas modificações, e não sobrecarrega a página. Para instalá-lo em seu blog...:

1. Vá para o painel de seu blog. Entre na página Layout -- Elementos de página.

2. Clique em Adicionar um Gadget. Escolha a opção HTML/Javascript na janela pop-up que aparecerá.

3. Neste gadget, cole o seguinte script:

4. Modifique o trecho em vermelho do script para o endereço de seu blog. Lembre-se: o endereço não deve levar os atributos http:// ou www.

5. Salve o gadget e visualize o blog. Está feito!

Importante - Os créditos ao site http://www.dynamicdrive.com/ devem permanecer intactos para uso legal. Não os remova sob hipótese alguma. Fora isto, use o script à vontade que nada irá incomodá-lo.

Prêmio Dardos - Indicação

2008-12-13T15:17:00.005-02:00

Ao passar hoje pelo blog Ferramentas Blog, do Marcos Lemos, tive uma certa surpresa ao ver que fôra recomendado em primeiro lugar num "meme" lançado aí: o Prêmio Dardos. Bem, em geral eu não gosto de memes, mesmo porque eles 'obrigam' os recomendados a retribuirem. No entanto, este veio à calhar, pois eu estive pensando em fazer uma lista com os meus blogs favoritos e os melhores blogs para os meus leitores. Então, vamos lá!

Primeiro, faço aqui uma lista dos blogs que serão mais úteis para meus leitores, blogs de dicas e ajuda a blogueiros.

Dicas Blogger - Este blog, creio, é o meu favorito de toda blogosfera. Visito-o mais de 10 vezes ao dia, e sou fã dele. ;) Tem ótimas dicas para blogueiros iniciantes. Altamente recomendado!
HTMHelen - Achei este blog recentemente, e logo foi para minha lista de visitação diária. Também nos traz dicas, muitas inéditas, e já me ajudou muitas vezes em questões de códigos HTML.
Dicas para Blogs - Este blog foi o primeiro blog de dicas que visitei, quando eu ainda era um tanto 'verde' na blogosfera. Estou sempre a conferir para ver se há uma nova postagem. ;)
Ferramentas Blog - Também este blog conheci bem recentemente, e de outro modo não poderia ser, pois o blog mesmo é recente. No entanto, com pouco tempo de vida já conseguiu uma visitação muito boa com suas dicas para iniciantes na blogosfera.

Agora, ponho na recomendação os principais blogs de meus Seguidores. (em ordem alfabética) Valem o clique!

Abrazar la Vida - do Marcelo
Bubuzando na Net! - da Elisabeth
Cafusão sem Confusão - do Rafael
Filmes Dublados - do Deyvid
Helen Fernanda - da Helen Fernanda
In-Antenado - do Gustavo Bellentani
Livre Afluência - do Marcelo A.S.
Marcos Lemos [idéias] - do Marcos Lemos
O Mundo Mágico de - do Anderson Ricardo
Shine Factory - do Márcio Richarde
Te Ensino - do Phoenix
Winnetou und Old Shatterhand

Meus agradecimentos aos que acompanham o blog e ao Marcos Lemos, por sua indicação e parabéns aos aqui indicados.

Backup de modelo - postagem referencial

2008-12-12T21:01:00.001-02:00

Antes de fazer qualquer modificação no HTML de seu template, é altamente recomendável que você baixe uma cópia do modelo atual. Isto é muito importante caso você desfaça algo no template e queira refazer tudo. Neste caso, é só buscar a cópia gravada e clicar no Fazer upload. Se você mexe com muita freqüência em seu modelo, será interessante criar uma pasta em seu computador apenas para os modelos gravados. Os modelos, no computador, são muito 'leves', quase não ocupando espaço. Então, antes de mexer no template sempre grave o seu modelo atual:

Código para adicionar aos favoritos

2008-12-12T13:25:00.003-02:00

Depois de interessar os leitores em seu blog, é muito importante mantê-los visitando seu blog. Para isso, em primeiro lugar você deve ser regular nas postagens, postar o mais freqüentemente possível. Depois, fazê-los lembrar-se do endereço do blog, saber de onde acessar, é o que interessa. O gadget lançado pelo Blogger Seguidores facilitou muito isto, pois quem estiver interessado no blog não o perderá mais de vista podendo acompanhá-lo. Outra coisa interessante a fazer é colocar o botão Adicione aos Favoritos em seu blog. Assim você facilita para que o visitante adicione sua página em sua lista de favoritos, e assim volte com mais facilidade. A seguir passo o melhor código, em minha opinião, para este efeito. Ele funciona seguramente nos navegadores Internet Explorer, Firefox e Opera.

Aqui está o código:

Agora o script já estará funcionando, e seus visitantes poderão usá-lo à vontade!

Atualização -

Para colocar em vez de uma frase uma imagem que, clicada, adicionará seu blog aos Favoritos do leitor, use este código:

<script language="JavaScript" type="text/JavaScript">

function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Mestre Blogger","http://mestreblogger.blogspot.com",""); }
else { window.external.AddFavorite("http://mestreblogger.blogspot.com","Mestre Blogger"); } }
</script>
<a href="javascript:void(favoritos());"><img src="http://urldasuaimagem.png" border="0"/></a>

Substitua os trechos em verde como mostrado antes, e o trecho em vermelho modifique para a URL (endereço) da imagem que você usará e salve o gadtet.

E aqui está um exemplo de como fica este script depois de publicado:
Adicione o Mestre Blogger à sua lista de Favoritos!

Removendo a contagem de seguidores

2008-12-11T19:36:00.001-02:00

Depois que eu instalei o gadget Seguidores em meu blog, tive um pequeno problema com isto. É que após ter criado o gadget e dado um nome, foi adicionada a contagem automática de quantos estão me acompanhando, logo no título. Veja como:

Aqui eu pus o nome Seguidores, como exemplo.

Aqui, no tíulo do gadget, aparece a contagem. No entanto, eu não queria a contagem no título, pois esta já está colocada no próprio gadget. Então, quem também quiser tirar a contagem, faça como eu fiz:

1. Vá na página Layout -- Editar HTML.

2. Aqui, marque Expandir modelos de widgets.

3. Busque o seguinte código: (<data:totalFollowerCount/>) .

4. Após achado, remova-o inteiramente. É isto. Salve as alterações no template e visualize o blog.

5. Caso você deseje inserir novamente o código, faça os passos 1 e 2. A seguir, encontre este código:

<b:if cond='data:totalFollowerCount != ""'>

Cole entre <data:title/> e </h2> o trecho que tinha sido removido. Salve e pronto.

Outros interessantes

Para colocar o nome do gadget em outra disposição com a contagem, você pode fazer de algum modo como abaixo. Antes de ver as dicas, vá para Layout -- Editar HTML e marque a caixa Expandir modelos de widgets. Ache o seguinte código: <data:title/> (<data:totalFollowerCount/>)

Tenho 10 seguidores - Este formato deixa a contagem no meio. Para consegui-lo, substitua todo o trecho <data:title/> (<data:totalFollowerCount/>) por Tenho <data:totalFollowerCount/> seguidores

10 acompanhando este blog - Este formato deixa a contagem antes. Primeiro deve-se mudar o nome do gadget para acompanhando este blog. Depois, troque o trecho <data:title/> (<data:totalFollowerCount/>) por <data:totalFollowerCount/> <data:title/>. Você também pode por outros nomes no gadget como seguidores para que apareça 10 seguidores. Modifique as coisas como quiser! Lembre-se que:

<data:title/> - É o título que você escreveu no próprio gadget.
<data:totalFollowerCount/> - É a contagem de seguidores.

Agora utilize a sua criatividade e ponha o título como quiser ;)

Gadget Seguidores

2008-12-11T13:01:00.001-02:00

Hoje algumas palavras sobre o mais recente gadget personalizado do Blogger. O Seguidores. Palavras do Blogger:

O que é Acompanhar?

Você tem um blog favorito e quer que o autor e os leitores saibam que você é um fã? Agora você pode fazer isso e muito mais com o recurso Acompanhamento do Blogger. Você pode até mesmo controlar os blogs que acompanha usando a sua Lista de leitura no painel do Blogger.

Como faço para ser seguidor de um blog?

Existem várias maneiras de se tornar seguidor de um blog. Uma das maneiras mais fáceis é visitar um blog que tenha adicionado o gadget Acompanhamento e clicar no link Acompanhar esse blog . Veja a figura abaixo:

Agora você verá uma janela pop-up com as opções de acompanhar o blog publicamente ou anonimamente.

Selecione como você gostaria de acompanhar e clique em Acompanhar (ou Follow). Pronto! Você já é um seguidor do blog. Se você escolheu acompanhar o blog publicamente, a foto do seu perfil será exibida no blog, com um link para o perfil do seu Blogger. No seu perfil do Blogger o blog será adicionado na lista Blogs que eu acompanho. No painel do Blogger você pode verificar as atualizações dos blogs que você acompanha. Veja a imagem:

Como faço para acompanhar um blog se ele não tiver o gadget Seguidores adicionado?

Se o blog que você quer seguir não tiver o gadget Seguidores adicionado, você pode adicioná-lo em sua Lista de Leitura indo pelo Painel do Blogger. Faça assim:

1. Entre no painel do Blogger.
2. Desça até o fim da página.
3. Embaixo da Lista de Leitura você verá um botão ADICIONAR. Clique nele. Uma janelinha como esta da imagem aparecerá.

4. Digite o URL (endereço) do blog que você quer acompanhar e clique em Próxima.

5. Na próxima página que abrirá, clique em Acompanhar e pronto!

Como faço para adicionar este gadget em meu blog?
Muito simples! Faça assim:

1. Vá em Layout -- Elementos de página.
2. Clique no link Adicionar um Gadget.
3. Na janela pop-up que aparecerá escolha a opção Seguidores (novo!):

4. Escolha um nome para o gadget e clique em Salvar. Está feito!

Agora, cada vez que você acessar o seu painel do Blogger você poderá ver quantos seguidores seu blog tem.
E que tal acompanhar o Mestre Blogger? Como você vê, é muito fácil... ;)

Imagem na barra lateral

2008-12-10T20:01:00.002-02:00

Aqui uma dica para os que ainda estão começando a blogar, e ainda não conhecem as principais funcionalidades e gadgets do Blogger. Quando eu ainda estava aprendendo a blogar, queria a qualquer custo colocar uma imagem na barra lateral, e como não entendia HTML só consegui fazer isto quando descobri este gadget. Então aqui está a dica para os que não conhecem.

Para adicionar uma imagem na barra lateral de seu blog, há dois modos. Um é usando HTML básico, a outra é a que mostraremos aqui. Então, faça o seguinte.

1. Vamos para a página Layout, à partir de seu painel no Blogger.
2. Clique em Adicionar um Gadget.
3. Escolha a opção Imagem, que é como a figura acima mostra.
4. Aí, carregue a imagem que quiser, ponha um link para a imagem no campo Link; ponha uma legenda, se quiser, e um título para o gadget. Clique em Salvar.

Pare para um descanso...

5. Ainda na página Layout, vamos para Editar HTML.
6. Clique em Expandir modelos de widgets.
7. Aí, busque o título do gadget da imagem. Digamos que eu criei um gadget onde carreguei a imagem, coloquei um link na imagem e salvei. O título deste gadget pode ser Imagem. Após achar o nome, veja o código, que será como o abaixo:

<b:widget id='Image1' locked='false' title='Imagem' type='Image'>

<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

O trecho do código acima, logo no começo, que marquei com vermelho, é o título do gadget, que você terá achado na tag.
8. Logo abaixo do título, ache o trecho <a expr:href='data:link'> que acima eu marquei em verde, e substitua-o por <a expr:href='data:link' target='_blank'>. A seguir salve as alterações no template, e confira se está funcionando.

Gadget Postagens Recentes

2008-12-10T18:57:00.001-02:00

Eu achava que esta ferramenta do Blogger era muito conhecida de todos. No entanto, como recentemente vi que há muitos que não a utilizam simplesmente porque não a conhecem ou não sabem como montar, estou deixando a dica aqui. Não há nada mais fácil do que adicionar este gadget que mostra as últimas postagens publicadas em seu blog. Então, para os que não sabem como fazer, vamos lá.

1. Vamos na página Layout -- Elementos de página de seu blog, à partir do painel do Blogger.
2. Clique em Adicionar um gadget.
3. Na janela pop-up que aparecerá, selecione a opção Feed, que aparece como na imagem abaixo.

4. Após ter clicado em Feed, uma janela como a mostrada na figura abaixo aparecerá. No campo em branco URL do Feed, cole o seguinte endereço: http://mestreblogger.blogspot.com/feeds/posts/default . Substitua o mestreblogger.blogspot.com pelo endereço de seu blog. Por exemplo: meublog.blogspot.com . Então, clique em Continuar.

5. Você será redirecionado para uma janela como a da figura abaixo. Escolha o nome do gadget, quantas postagens deverão aparecer na lista, e clique em Salvar.

Agora está pronto! Você já terá o gadget instalado e funcionando corretamente.

Como criar uma área de texto expandível

2008-12-10T13:56:00.003-02:00

Nesta postagem veremos como criar uma área de texto expandível, que é um trecho de texto oculto na postagem, que é mostrado ao ser clicado um link. Veja aqui um exemplo:

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare (ler mais)

at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.

Este efeito de texto é extremamente útil em postagens longas, com bastante texto, pois evita a sobrecarregação do visual em seu blog e permite que você ponha quanto texto quiser sem encher demais a página. Também é muito fácil de ser adicionado o efeito; basta prestar atenção às instruções dadas abaixo. Então, vamos por passos, para facilitar...

1. Como sempre, acesse o seu painel do Blogger. Vá para a página de edição Layout e a seguir para a sub-página Editar HTML.

2. Clique em Baixar Modelo Completo. Agora, busque nesta página (usando as teclas CTRL + F) o código </head> .

3. Depois de achado o </head>, cole exatamente em cima dele, o seguinte código:

<style>

.texto_oculto {
display:none;
}
.texto_mostrado
{display:inline;
}
</style>

<script type='text/Javascript'>
function expandir_texto (linkid) {var texto_expandivel = document.getElementById(linkid);if (texto_expandivel.className=='texto_mostrado') { texto_expandivel.className='texto_oculto';} else { texto_expandivel.className='texto_mostrado'; }}
</script>

4. Salve as alterações no template.

5. Agora, vá para a postagem onde você deseja aplicar o efeito e clique em Editar HTML que fica junto à Escrever. Cole na postagem o código a seguir:

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare <a href="javascript:expandir_texto('NOME_AQUI')">(ler mais)</a><div class="texto_oculto" id="NOME_AQUI">at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.</div>

E agora, preste bastante atenção, pois se você fizer algo errado aqui o código não irá funcionar.

Substitua o primeiro trecho do código que está mostrado em verde pelo texto normal, sem o efeito aplicado.

Substitua o segundo trecho em verde, (ler mais), pelo texto do link. Será este trecho que ativará a área expandível.

E agora troque o terceiro trecho mostrado em verde para todo o texto que ficará oculto, só sendo mostrado quando clicarem em (ler mais).

Finalmente, modifique o trecho em vermelho, NOME_AQUI, para o nome do elemento. Os dois trechos em vermelho devem ser iguais, e em maíusculas. Não dê espaço entre as palavras do nome, e sim utilize a underline. Agora você pode publicar a postagem e ver o efeito.

Nota - Não tente ver se o efeito está funcionando clicando em Visualizar, pois ele não funciona na visualização.

Contador de visitas Feed Jit

2008-12-09T16:43:00.000-02:00

Segundo o informador de visitantes e visitas, o Google Analytics, uma boa parte dos visitantes que encontram o Mestre Blogger à partir da busca do Google estavam procurando por "Contador de visitas". Como até agora só fizemos uma postagem à respeito, e nada que mereça tanta atenção, estamos dando aqui as instruções para como instalar o Feed Jit, um contador bem útil e fácil de adicionar em seu blog, além de ser totalmente confiável. Ele contém as seguintes opções:

Mapa que mostra de onde estão visitando o seu blog. O mapa funciona com o Maps Google.
Mostra quais as páginas mais populares no blog, e quantas visitas recebem.
Mostra quais os links mais clicados em seu blog.

Há quatro versões que podem ser instaladas.

Live Traffic Feed - Mostra em quais páginas e de onde estão chegando.
Live Traffic Map - Mostra de onde estão visitando o blog.
Recommend Reading - Recomenda outras páginas dizendo "Visitantes que viram esta página também gostaram de..."
Page Popularity - Popularidade da página.

Aqui vamos mostrar como instalar o Mapa, que é o principal modelo.

Primeiro, entre em www.feedjit.com/joinjs/
Agora vamos para a segunda opção (da esquerda para a direita).
Se quiser modificar a aparência do mapa, clique em First Customize it! como está mostrado na imagem no fim desta postagem. Então você pode escolher uma das opções que eles dão ou fazer como você mesmo quiser.
Após ter decidido como ficará o seu modelo de Feed Jit, copie o código dado na área de texto logo acima da demonstração de como ficará o seu modelo.
Vá para o seu painel do Blogger. Entre em Layout -- Elementos de página.
Clique em Adicionar um Gadget .
Selecione a opção de gadgets HTML/Javascritpt, na janela que abrirá.
Cole neste gadget o código obtido lá no Feed Jit e salve.
Visualize o blog e veja lá o seu modelo. Logo você verá os visitantes, assinalados por pontinhos vermelhos no mapa...

Imagem: modificando as opções do mapa Feed Jit.

Edição de texto por HTML

2008-12-07T17:04:00.003-02:00

Vamos ver agora como editar o formato do texto nas postagens por HTML. Bem, para utilizar as dicas a seguir, não basta que você vá digitando tudo na postagem.

Primeiro marque a opção Editar HTML na sua postagem, como mostrado na imagem aí, e lá vamos fazer os testes. Agora, só para entendermos: vou por o nome do efeito conseguido e o código referente ao efeito logo à frente. O código será azul com fundo cinza. O trecho em verde deve ser substituído pelo texto a que você deseja dar o efeito. Certo?

Negrito: <b>TEXTO AQUI</b>

Itálico: <i>TEXTO AQUI</i>

Sublinhado: <u>TEXTO AQUI</u>

~~Riscado~~: <s>TEXTO AQUI</s>

_Sub: <sub>TEXTO AQUI</sub>

^Superior: <sup>TEXTO AQUI</sup>

Pequeno: <small>TEXTO AQUI</small>

Grande: <big>TEXTO AQUI</big>

Isto tudo é o mais básico. Em uma outra postagem veremos alguns mais.

Como acabar com os spammers

2008-12-06T12:37:00.002-02:00

VEJA AQUI como se ver livre dos irritantes e-mails de spammers.

Você quer postar seu e-mail em seu blog, e não obstante teme que os programas de spammers o detectem? Então aqui está a solução de seu problema! Vamos ver como passar a perna nos programas dos spammers para detectarem endereços de e-mail.

- Como funcionam os programas de busca?
- Muito simplesmente. Eles buscam no código fonte HTML pela internet o trecho mailto:xxxx@xxx.xxx que é o código usado para links de e-mail. O "xxxx" mostrado apenas é um 'alguma coisa' que eles buscam junto com os elementos que formam um endereço de e-mail. Por exemplo, veja este link que criamos: Clique aqui para me enviar um e-mail . O código HTML usado para este simples link será o detectado por programas de spammers. O código ficaria assim: <a href="mailto:meuemail@provedor.com">Clique aqui para me enviar um e-mail</a> . Reparou? O Trecho mostrado em verde seria o encontrado, por causa dos símbolos "@ (arroba)" ". (ponto)" e "mailto:". Então, como criar um link de e-mail sem que os robots (programas) o achem? Muitas pessoas deixam de um jeito deselegante, porém eficaz. Escrevem assim: "meuemail[arroba]meuprovedor.com". No entanto isto não pode levar um link, do contrário seria o código do link o detectado. Então, vamos ver este método que mesmo com olink evita os spammers. Vamos lá?

- Como faço para dissimular o código HTML do link de e-mail?
- É o que vamos ver. Então, siga este passos.

1. Acesse o seu painel no Blogger. Vá para a página Layout -- Elementos de página.

2. Clique em Adicionar um gadget . Na janela pop-up que aparecerá encontre a opção HTML/Javascript e clique nela.

3. Nesta janela, cole este código e salve o gadget.

Código:
<script>

var maildivider="[arroba]"
for (i=0; i<=(document.links.length-1); i++){
if (document.links[i].href.indexOf(maildivider)!=-1)
document.links[i].href=document.links[i].href.split(maildivider)[0]+"@"+document.links[i].href.split(maildivider)[1]
}
</script>

4. Agora, modifique ou insira o código de seus links de e-mail da seguinte forma: Assim, tudo que você tem a fazer é modificar no HTML do link @ por [arroba] . Agora os programas de busca estão incapazes de achar você, pois o seu HTML de link é diferente do buscado. Se você quiser modifique no script dado antes o trecho mostrado em verde para o substituto de arroba. Você pode escolher email, ou qualquer outra coisa. Neste caso, o código HTML terá [email] no lugar de [arroba]. O código de seu link ficará assim após o sistema de segurança ser aplicado: <a href="mailto:beckerqueiroz[arroba]gmail.com">Clique aqui para me enviar um e-mail</a> . Não se esqueça, é claro, de modificar o trecho mostrado em verde para o seu próprio endereço de e-mail, substituindo @ por [arroba] . O trecho "Clique aqui para me enviar um e-mail" é o link que acessará seu e-mail. Modifique-o para a frase que quiser.

Com este método você pode bater a porta na cara dos spammers muito facilmente.

Formulário de e-mail básico

2008-12-01T14:44:00.001-02:00

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?

Quanto tempo falta para o Natal

2008-11-29T10:24:00.005-02:00

Um dia destes, achei no site Dynamic Drive o script que dou a seguir, que faz uma contagem regressiva até uma data programada (no caso, o Natal). "Faltam tantos dias, horas, minutos, segundos para o Natal! Após algumas modificações e melhorações no script, resolvi compartilhá-lo aqui no blog. Vejam na barra lateral como ele pode ficar.

Mestre Blogger

Este gadget pode ser adicionado no seu blog sem problema nenhum. Há duas opções. Clique o botão da opção 1 para instalar o gadget automaticamente em seu blog ou copie o código da segunda opção e cole-o em um novo elemento de página em seu blog (HTML/Javascript).

1. Instalar automaticamente:

2. Instalar manualmente:

<table border="1" bordercolor="#ffffff" cellpadding="20">

<tr>
<p></p>
<td bgcolor="#efeefe">
<p></p>
<script src="http://upwpqw.blu.livefilestore.com/y1p9an6lvEK0hzJ0-cQnBLLxeFYcta-aFlf2nHWhNGf_bk3CKWdbO2mQoCKGSfVs7b2tVV5UzINwbc/natal.js?download" language="JavaScript1.2"></script>
<p></p>
<noscript><span onclick="window.open(http://mestreblogger.blogspot.com)">Você deve habilitar javascript em seu computador para ler a mensagem.</span></noscript>
<a href="http://mestreblogger.blogspot.com/" target="_blank">Mestre Blogger</a>
<p></p>
</td>
</tr>
</table>

O script também contém uma opção que avisa o visitante caso ele esteja com o bloqueador de javascript ativado para que ele o desative e possa ver a mensagem. Os trechos mostrados em verde no código acima podem ser modificados de acordo com sua preferência.

Não remova os créditos.

Gerador de icones para email

2008-11-28T12:37:00.003-02:00

Achei esta dica no Dicas Blogger e agora vou mostrar aqui como conseguir este ícone. Aqui algumas amostras do ícone:

Um ícone destes pode ser conseguido com a maior facilidade. Acesse http://services.nexodyne.com/email/index.php

Digite a o nome de seu e-mail no campo requerido, selecione o provedor (gmail, terra, hotmail, uol...) e clique Generate. Veja esta imagem:

Logo abaixo será dada a imagem com o seu respectivo endereço. Copie o endereço, como mostrado na imagem acima, e cole-o no lugar de url_da_imagem no código abaixo. Modifique também o endereço seuemail@gmail.com para o seu endereço de e-mail. Então, copie o código todo e cole-o aonde você quiser. A imagem aparecerá já com o link de seu e-mail.

Código:

Fácil, não?

Modificando o link enviar postagem

2008-11-27T13:52:00.004-02:00

Hoje você verá como modificar o ícone do rodapé das postagens chamado Enviar postagem que serve para enviar a postagem à alguém, por e-mail. O ícone fornecido pelo Blogger não atrai atenção, e para blogueiros iniciantes não significa nada e por isso mesmo muitas vezes deixam de usá-lo. Por isso, vejamos como modificá-lo para outra imagem, ou para uma frase qualquer.

1. Primeiro, caso você ainda não tenha a opção de mostrar o ícone ativada, vamos para Layout -- Elementos de página .

2. Na seção Postagens no blog clique em Editar.

3. Na janela que aparecerá marque a opção Mostrar links Enviar esta Postagem e salve as alterações.

4. Agora, vamos na para Layout -- Editar HTML. Marque a caixa Expandir modelos de widgets.

5. Busque o seguinte código:

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>

6. Modifique o trecho
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

por

<img alt='Enviar postagem' class='icon-action' src='http://url_de_sua_imagem'/> .

Substitua http://url_de_sua_imagem pelo endereço da imagem que substituirá a antiga. (Para achar ícones grátis sugiro o site http://www.iconfinder.net/ ).

7. Se você preferir substituir o ícone por uma frase como "Envie esta postagem à um amigo" ou "Recomende", substitua o trecho

<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

por

<p style='font-size:100%'>Envie esta postagem à um amigo</p>.

e modifique o texto mostrado em verde pela frase convidando à enviar a postagem.

8. Finalmente, se você quiser mostrar uma imagem juntamente com a frase, cole primeiro o código da imagem e depois o texto como mostrados nos passos 6 e 7.

Salve as alterações e visualize o seu blog. Está pronto!

Como montar uma janela pop-up

2008-11-25T16:33:00.005-02:00

Bem, anteriormente já havíamos postado algumas dicas sobre as janelas pop-ups em blogs, mas agora tudo vai junto com algumas dicas novas e está mais fácil de acompanhar.

Os pop-ups são estas janelinhas que aparecem automaticamente quando você entra em algum site (se você estiver com o bloqueador de pop-ups desativado) e também ao ser clicados alguns tipos de link. Aqui vamos mostrar os três tipos de pop-up principais.

n° 1 - Modo automático simples

Descrição: Este é o modo simples de pop-up que aparece tão logo carrega o blog em que ele está instalado (automaticamente). Se você tiver o bloqueador de pop-ups ativado eles não funcionarão em seu computador.

Código:

<script language="javascript">window.open('http://url_da_página_pop-up','Info','width=200,height=250,scrollbars=no,resizable=no,status=no,left=100,top=47');
</script>

Modificações no código:

Todos os trechos mostrados em verde no código podem ser modificados de acordo com a sua vontade. Modifique http://url_da_página_pop-up pelo endereço completo da página que deverá abrir como pop-up. Modifique 200 de width=200 pelo tamanho da largura da página e 250 de height=250 pela altura. resizable=no define se a janela será redimensionável. Caso deseje permitir isto, modifique no por yes. Modifique o no de scrollbars=no para yes caso você queira que a janela tenha barras de navegação.

Como adicionar:

Após acessar o painel de sua conta no blogger, vá para a página Layout -- Elementos de página. Selecione Adicionar um gadget e na janela com as opções de gadgets que aparecerá escolha HTML/Javascript. A seguir, cole o código do pop-up no gadget e, após modificar os campos desejados, salve o gadget e visualize o blog. Este código também pode ser adicionado em uma postagem qualquer.

n° 2 - Modo automático avançado

Descrição: Praticamente o mesmo pop-up anterior, porém desta vez o código contém um sistema de cookies que impede que o pop-up abra mais de uma vez na mesma janela. Após ter aparecido uma vez você poderá atualizar a página quantas vezes quiser que o pop-up não será ativado novamente.

Código:

<script>

function openpopup(){
var popurl="http://url_da_página_pop-up"
winpops=window.open(popurl,"","width=200,height=250,")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
onset = document.cookie.indexOf(search)
if (onset != -1) {
onset += search.length
end = document.cookie.indexOn(";", onset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(onset, end))
}
}
return returnvalue;
}
function loadornot(){
if (get_cookie('poppedup')==''){
openpopup()
document.cookie="poppedup=yes"
}
}
loadornot()
</script>

Modificações no código:

Modifique http://url_da_página_pop-up pelo endereço da página que abrirá em pop-up. Modifique o 200 de width=200 para o tamanho da largura da janela e 250 de height=250 para a altura.

Como adicionar: Siga os mesmos passos do modo anterior.

n° 3 - Modo OnClick
Descrição: A janela a ser aberta é exatamente como a do n° 1, porém ativa-se ao ser clicado um link. Alguns bloqueadores de pop-ups não funcionam com janelas clicadas.

Código:

<a onclick="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>

Modificações no código: As modificações no código também são como as do exemplo n° 1, exceto pelo trecho Texto do link, que você modificará para o texto do link que abrirá a janela. javascript:void(0) é o que aparecerá na barra de status. Não haverá diferença prática modificando-se este último trecho.
Como adicionar: Esta forma de pop-up pode ser adicionada na barra lateral (seguindo-se os passos do exemplo n° 1) ou numa postagem qualquer.

n° 4 Modo OnMouseOver

Descrição: Este modo é quase exatamente igual ao n° 3, sendo que a única diferença é que ele é ativado ao passar-se o mouse sobre o link (onMouseOver), e não ao ser clicado, como no exemplo anterior.

Código:

<a onmouseover="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>

Modificações no código: Modifique tudo como no exemplo n° 3.

Como adicionar: Também este código pode ser adicionado como no n° 3

E aí você tem os principais modos de pop-up. No entanto, quanto ao pop-up automático, lembre-se de não exagerar com isso porque se usado demasiadamente pode incomodar seus visitantes e fazê-los fechar o blog o quanto antes. Também o modo onMouseOver pode ser muito irritante, por isso tome cuidado na sua utilização.

Como criar um menu suspenso

2008-11-24T13:40:00.003-02:00

O menu suspenso pode ser uma ferramenta muito útil para os blogs de diversas maneiras. Pode-se ter uma lista de links ou de parcerias no menu suspenso, de modo a economizar espaço e não preencher tanto o seu layout. Em alguns casos ele é usado como menu de navegação no blog.
Veja aqui um exemplo de menu suspenso:

Nesse exemplo a página selecionada é acessada automaticamente. Para conseguir um botão Acessar que ative o link marque a opção Usar um botão no gerador. Também é possível ter uma imagem em vez de um botão simples, neste caso marque a opção Usar imagem como botão.

Veja este menu:

Para conseguir um menu como este acima, com mais de uma célula, faça o seguinte:

1. Após clicar no botão Gerar você verá que as primeiras linhas do código dadas serão estas:

<form name="jump">
<select size="1" name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

2. Modifique o número (marcado em verde no trecho acima) para o número de células que deverão aparecer.

Agora, veja o gerador abaixo e experimente fazer o seu menu suspenso.

Se preferir, acesse aqui o gerador numa nova janela.

Se preferir, acesse aqui o gerador numa nova janela.

Notas para utilizar o gerador -

1. Preencha os campos em branco à esquerda com o nome da célula e o campo respectivo à direita com o endereço do link correspondente.
2. Selecione ao alto as opções de como será o menu.
3. Clique em Gerar copie o código, cole-o em seu blog e bom proveito!

Como programar uma postagem

2008-11-24T12:17:00.000-02:00

A postagem de hoje será sobre como programar uma postagem. É uma dica curta, para manter o ritmo, pois estou preparando um post maior para esta noite. Esta opção do Blogger é muito útil para os blogueiros que tentam manter um ritmo de postagens diárias. Por exemplo, se eu fosse para a praia agora (O, quem dera!) e não quisesse perder o ritmo, eu poderia fazer várias postagens e deixar programadas para os próximos dias.

Para programar uma postagem, logo antes de publicá-la clique em Opções de postagem e nas opções que aparecerão embaixo busque a Data e hora da postagem e marque alguma data futura quando a postagem deverá ser publicada. (Veja imagem acima). A seguir clique Publicar postagem e está feito! O post só irá ao ar no dia programado.

Se você quiser ver todas as postagens programadas, vá para a página Editar postagens e nas opções dadas antes da lista de postagens clique em Programado.

Link "Faça deste blog sua página principal"

2008-11-23T13:49:00.001-02:00

Você pode já ter visto em alguns sites como o Yahoo um link convidando o leitor a fazer do site em questão sua página inicial ou seja, a página que carregará automaticamente quando você abrir a janela de seu navegador. Este código é especialmente útil para blogs com novas postagens diárias, pois assim o leitor, ao abrir uma janela do IE pode ver a nova postagem diretamente.

Aqui está uma demonstração deste link: Clique aqui para fazer deste blog a sua página inicial

Para conseguir este tipo de link você tem apenas que copiar o código dado abaixo e modificar as partes mostradas em verde - a primeira para o endereço de seu blog e a segunda para o texto do link. Se você quiser que em vez de texto apareça uma imagem no com o convite, substitua o texto Clique aqui para fazer deste blog a sua página inicial pelo código da imagem assim: <img src"endereço_da_imagem"/> substituindo o url da imagem este código onde você quiser em seu blog. Bom trabalho!

Código a seguir:

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://mestreblogger.blogspot.com');">Clique aqui para fazer deste blog a sua página inicial</a>

Nota - Lembre-se de que este código funciona apenas no Explorer 5.0 ou mais recente. Em outros navegadores o código não terá efeito algum.

Como centralizar o cabeçalho

2008-11-22T19:24:00.001-02:00

A postagem de hoje será bem curtinha. Vou mostrar como centralizar o texto do cabeçalho de acordo com o pedido de um leitor. Para fazer isto há um jeito muito simples que se consegue editando o HMTL do template. Então, faça o seguinte:

1. Após entrar em sua conta no Blogger entre na página Layout -- Editar HTML.
2. Busque este trecho de código: #header h1 { . (Use a busca de página com as teclas CTRL + F)
3. Logo abaixo deste código cole isto: text-align: center; .
4. O resultado ficará assim:
#header h1 {
text-align: center;
5. Salve as alterações e visualize o blog a seguir. Você verá o título de seu blog centralizado no cabeçalho, direitinho.

Abraços e bom final de semana! ;)

Caixa de pesquisa de seu blog

2008-11-20T18:50:00.005-02:00

O formulário de busca sobre o qual falaremos aqui é o mesmo que aparece na barra do Blogger no topo do blog. No entanto você pode querer ocultar a barra do Blogger ou simplesmente deixar esta busca mais visível adicionando-a num novo elemento de página na barra lateral. O procedimento para isto é bem simples.

1. Entre no painel de sua conta do blogger em http://www.blogger.com/ ou http://www.draft.blogger.com/ .

2. Entre na página de edição de seu blog Layout.

3. Agora, clique Adicionar um Gadget.

4. Nas opções de gadgets para instalar, escolha HTML/Javascript.

5. Então cole neste elemento de página o seguinte código:

<input value="partner-pub-8388769928851076:mvc0johxlvb" name="cx" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input name="q" size="28"/>
<input value="Pesquisar" name="sa" type="submit"/>
</form>

Este é o modo mais simples. O campo de busca aparecerá assim:

Agora vamos adicionar o grande efeito que é muito interessante e pouquíssimos blogs tem. Isto será um texto que aponta o lugar onde o visitante deve digitar a busca. Quando clicado em cima, o texto de amostra desaparece. Explicado em palavras é meio difícil de entender. Veja o exemplo abaixo.

Para conseguir o efeito, utilize este código:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input name="sa" type="submit" value="Pesquisar" /></form>

O trecho que foi adicionado para conseguir o efeito está marcado com fundo cinza. O trecho que você deve modificar está escrito em verde. Agora modifique todos os trechos Digite sua busca aqui pelo texto que aparecerá na caixa. Por ex.: Sua busca aqui... ou Pesquisar blog. Deixe como quiser. Lembre-se de deixar o mesmo texto nos três lugares, como demonstrado acima.

Agora, uma opção adicional. Caso você queira, você pode modificar o botão Pesquisar por uma imagem qualquer. Sim, é isso mesmo! E é bem simples também. Veja no código abaixo:

O trecho acima marcado define o botão de enter. Substitua todo o trecho marcado pelo seguinte:

<input type="image" src="http://ra606a.blu.livefilestore.com/y1puZOyb7_6YKWR3s7ODnkSP0k0H8-vfexl0-9rHkE-5CVvWFDMpIVhHYfdLA4zjVYh2ZQNZR-nmrI/bot_9.gif" />

Modifique todo o trecho em verde para o endereço da imagem que servirá de botão. O código deverá, então, aparecer assim:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input type="image" src="http://ra606a.blu.livefilestore.com/y1puZOyb7_6YKWR3s7ODnkSP0k0H8-vfexl0-9rHkE-5CVvWFDMpIVhHYfdLA4zjVYh2ZQNZR-nmrI/bot_9.gif" /></form>

E a visualização, será esta:

E aí você tem uma bela caixa de pesquisa. Aproveite! :)

Política de parcerias

2008-11-19T13:34:00.004-02:00

Para ajudar os blogueiros que querem fazer parceria com o Mestre Blogger criamos este formulário de parceria, onde você tem os campos próprios para inscrever seu blog em nossa lista. Para fazer parceria com nosso blog:

Antes de mais nada, adicione nosso banner ou link em seu blog e então nos envie um e-mail avisando ou deixe um comentário nesta postagem com seu pedido. Os três blogs que enviarem mais visitas por mês irão para a lista em destaque Top Parceiros que será atualizada a cada mês.

Nosso banner aparecerá como esta imagem em seu blog. Para adicioná-lo, copie o código abaixo e cole-o em seu blog.

Seja nosso parceiro agora - clique aqui.

Alerta popup com mensagem

2008-11-18T08:20:00.002-02:00

Algumas semanas atrás um leitor me perguntou como se faz para inserir alertas pop-up no blog com opções diferentes: OK (continua no blog) ou CANCELAR (é redirecionado para outra página). Veja a figura acima que ilustra como se apresenta o alerta. Agora finalmente estou publicando as instruções para instar o alerta.

1. Acesse o painel do Blogger ou Blogger Draft.

2. Entre na página Layout -- Clique Adicionar um Gadget -- Selecione o gadget HTML/Javascript.

3. Cole dentro do gadget o script a seguir.

Counter Strike Template

2008-11-17T18:31:00.002-02:00

Olá, amigos! Finalmente, publicamos o nosso primeiro template: o Counter Strike. O template é um modelo simples de três colunas, com cores escuras e bastante sóbrio. Após ser instalado pode ser customizado à vontade. Ele será aperfeiçoado aos poucos, mas você pode começar agora!

Demonstração .:. Download .:. Termos de Uso

ATENÇÃO: Os créditos devem permanecer intactos para ser possível o uso legal do template.

COMO INSTALAR O MENU SONORO

Após haver instalado o template, você verá que existe um elemento de página HTML/Javascript adicionado na barra lateral da esquerda. Aí é que irá o menu vertical. Para adicioná-lo, abra este gadget vazio e cole nele o seguinte código:

<div id="coolmenu" onmouseover="bindsound('A', soundfile, this)">

<div id="navmenu">
<ul>
<li class="list_first"><a href="url1">Home</a></li>
<li class="list_first"><a href="url2">Contato</a></li>
<li class="list_first"><a href="url3">Deixar Comentário</a></li>
<li class="list_first"><a href="url4">Parceiros</a></li>
<li class="list_first"><a href="url5">Fazer Parceria</a></li>
<li class="list_first"><a href="url6">Scripts</a></li>
<li class="list_first"><a href="url7">Assinar Postagens</a></li>
</ul></div></div>

Modifique os trechos em verde pelo endereço da página à frente em laranja. Modifique também os nomes da página conforme quiser.

Para adicionar mais uma página do menu insira o trecho
<li class="list_first"><a href="url7">Assinar Postagens</a></li> dentro das tags <ul> </ul> .

Para remover um elemento, remova-o junto com toda seção <li> </li> em volta dele.

Para remover o efeito de som no menu remova o trecho
<div id="coolmenu" onmouseover="bindsound('A', soundfile, this)"> e também a última tag </div>

Alguma dúvida? Fale conosco, não hesite em nos enviar um e-mail ou deixar um comentário nesta postagem.

NOTA - Tome nota, todo usuário que instalar nosso template em seu blog ganha um link automaticamente no Mestre Blogger, sem precisar linkar de volta!.Avise-nos se instalar o template com um comentário. Obrigado!

Faça os links abrirem em uma nova aba

2008-11-16T13:51:00.010-02:00

Na postagem Editando Links mostramos como montar um link em texto básico e também como fazer os links abrirem em uma nova janela. Ora, na lista de links da barra lateral não é possível fazer os links abrirem em uma nova janela, ao contrário da lista de Blogs (ou BlogRoll) onde isso acontece automaticamente. Anteontem, porém, achei no blog http://htmhelen.helenfernanda.com/ a dica de como fazer isso mexendo no HTML do blog. Vamos lá? É muito fácil!

1. Vá em Layout -- Editar HTML.

2. Clique em Baixar modelo completo. Assim, caso você faça algo errado no modelo de seu blog não há perigo de perder a forma anterior.

3.Marque Expandir modelos de widgets. Qual é o nome da sua lista de links? Meus links, Blogroll, Recomendo… não importa. A lista de links que estou usando como exemplo se chama Favoritos. Procure pelo nome (use as teclas CTRL + F) da sua lista de links no código do seu blog expandido:

<b:widget id='LinkList1' locked='false' title='Favoritos' type='LinkList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <a expr:href='data:link.target'><data:link.name/></a></li>

3. Identifique a tag <a>, como destacado acima e acrescente target='_blank'.

4. Antes da modificação:
<a expr:href='data:link.target'><data:link.name/></a>

5. Depois da modificação: <a expr:href='data:link.target' target='_blank'><data:link.name/></a>

6. Salve as alterações do modelo e acesse o seu blog. Pronto, está feito! Diga se não foi fácil, hein?

Baseado na postagem original Faça os Links Abrirem em Uma Nova Aba por Helen Fernanda.

Teste de digitação

2008-11-05T14:21:00.008-02:00

Na internet e especialmente na blogosfera algo que pode ser muito útil para todos efeitos é saber digitar com certa rapidez e, claro, sem cometer muitos erros. Com isso, ganha-se presteza ao fazer comentários, escrever e-mails, etc., e assim mais pode ser feito em seus blogs. Aqui está um teste de digitação que encontrei por acaso outro dia. O teste dá uma frase que você deve copiar sem erros e o mais rápido possível e depois clicar em OK. Depois de o deixar em português estou disponibilizando este teste aqui para que vocês testem sua rapidez no teclado. Faça o teste e diga: qual foi a sua velocidade? A minha rapidez foi de aproximadamente 56 palavras por minuto...

Lembre-se de que, ao acabar de digitar, você NÃO deve apertar a tecla ENTER para dar OK, e sim fazê-lo com o mouse. Também marque antes qual categoria você quer fazer, antes de clicar no botão COMEÇAR.

Qual é a sua velocidade?

Comentários em seu blog

2008-11-04T14:37:00.001-02:00

Nesta postagem você verá algumas dicas sobre opções fornecidas pelo Blogger e sem mexer em HTML para modificar seus comentários. Provavelmente você já conhece estas opções, mas caso não conheça, aí estão elas...

Primeiro, acesse a página de CONFIGURAÇÕES do Blogger. Depois vá para a sub-página COMENTÁRIOS. Veja a imagem abaixo.

Nesta imagem você vê algumas das opções possíveis. Para mostar os comentários existem três meios: janela do blogger, pop-up e comentário incorporado abaixo da postagem, que é mais recente.

Veja as opções principais nas imagens abaixo.

Nesta opção você pode escrever um texto que aparecerá para seus leitores quando forem comentar. Veja os principais códigos HTML que você poderá usar aqui.

Para revisar os comentários antes deles serem publicados, marque esta opção. Você saberá sempre que houver um comentário para moderar cada vez que acessar seu painel do blogger. Você também pode escrever seu endereço de e-mail no campo fornecido e moderar os comentários por e-mail (acima).

No campo mostrado nesta imagem você pode adicionar até dez endereços de e-mail diferentes para receberem um aviso cada vez que um novo comentário for publicado. Utilize esta opção caso você não tenha ativado a moderação de comentários. Assim você poderá controlar mais facilmente seus comentários.

Para eliminar um comentário indesejável, siga as instruções nas imagens e legendas abaixo.

Acesse a página EDITAR POSTAGENS nas opções de edição do blog.

Vá até a postagem da qual você quer eliminar o comentário e clique nos comentários.

Clique no ícone de eliminar comentário (uma cesta de lixo) embaixo do comentário que você quer excluir.

Marque a opção REMOVER DEFINITIVAMENTE e clique EXCLUIR COMENTÁRIO. Está feito! O comentário foi excluído sem deixar rastros.

E é isso aí... logo teremos mais umas dicas de comentários publicadas.

Diferenças entre o Draft Blogger e o Blogger

2008-11-04T12:53:00.002-02:00

Não muito tempo atrás o google lançou o Draft Blogger (Blogger em Rascunho), uma versão do Blogger só que com diversas opções novas para o blogspot. Abaixo você pode ver algumas destas diferenças.

Compare esta imagem com a de baixo e veja as diferenças da janela CRIAR POSTAGEM nos dois programas.

Também as duas barras de ferramentas para postagem apresentam diferenças. A do Draft Blogger não tem aquela opção para carregar vídeos na postagem, porém tem outras a mais. Veja abaixo a comparação.

Barra de ferramentas do Draft Blogger

Barra de ferramentas do Blogger

Ainda existem outras diferenças. Por exemplo, nas OPÇÕES DE POSTAGEM ou na VISUALIZAÇÃO da postagem, que aparece exatamente como o resultado depois de publicada a postagem, o que não acontece na visualização do Blogger. O Draft Blogger também disponibiliza um gadget que o Blogger ainda não tem: a caixa de busca do Google. Veja como adicioná-la nas figuras abaixo.

Vá na página LAYOUT do Draft Blogger e clique ADICIONAR GADGET nos elementos de página. Selecione a opção CAIXA DE PESQUISA. Depois escolha os detalhes que você quiser e salve as alterações (ver imagens abaixo).

Clique no gadget CAIXA DE PESQUISA

Determine as opções que a caixa deverá ter

Para ter o Draft Blogger como padrão, faça o seguinte:

Acesse http://www.draft.blogger.com/. Caso você não esteja logado, entre com sua conta do blogger (gmail). Marque a opção TORNAR O BLOGGER EM RASCUNHO MEU PAINEL PADRÃO (v. imagem abaixo), e pronto! Agora, quando você entrar no Blogger você será redirecionado para o Draft Blogger. Caso prefira voltar a postar com o modelo antigo desmarque a opção e o padrão voltará a ser o velho Blogger...

Faça do Blogger em Rascunho seu painel padrão!

Como ocultar os ícones de edição do blog

2008-11-03T12:20:00.006-02:00

Recentemente vi numa postagem em um blog de dicas o comentário do autor de que ele não consegue visualizar seu blog como os visitantes normais, estando conectado como administrador do blog, porque os ícones de edição atrapalham o visual do blog, ocupando um espaço maior. (Veja abaixo a visualização diferente)

Ás vezes este probleminha chega a atrapalhar seriamente a visualização de seu blog, e por isso você pode querer removê-lo. Possivelmente você já sabe como fazer isso, mas caso não saiba aí está a dica.

Acesse a página de edição de seu blog LAYOUT. Agora você está na sup-página ELEMENTOS DE PÁGINA. Nesta página você verá o elemento chamado POSTAGENS NO BLOG. Aí você deverá clicar em EDITAR (v. imagem abaixo).

Na janelinha de edição que aparecerá, tire a seleção na opção MOSTRAR EDIÇÃO RÁPIDA e salve as alterações (v. imagem abaixo).

Agora, você pode visualizar seu blog conectado como administrador sem problema!

Analytics e outros contadores

2008-10-31T13:25:00.003-02:00

Um fator muito importante para melhorar seu blog é saber quem são os visitantes, de onde vem, quais páginas são mais populares em seu blog, etc. Para conseguir todas estas informações o site atualmente considerado o melhor é o Google Analytics. Este excelente programa mostra tudo que você gostaria de saber referente a seu blog, e ainda um pouco mais.

Algumas de suas vantagens principais:

Fornece todos os dados sobre os acessos que seu blog está recebendo. Mostra quantos visitantes vieram de programas de busca como o google, quais vieram de links para outros sites ou de acesso direto.
Taxa de rejeição.
Quantos visitantes você tem, qual é a média de visitas de cada um, quanto tempo eles costumam ficar online no seu blog, e até um conceito de 'lealdade' do visitante foi criado...
A clássica cobertura do mapa, que mostra de onde estão acessando seu blog.
Quais páginas são as mais populares em seu blog, de onde vem os visitantes que as acessam mais, etc.
Porcentagem de novas visitas por dia.
Permite que você envie por e-mail os dados ou ainda convide outra pessoa a ver suas estatísticas.

E muito mais ainda! Caso você já não tenha uma conta, cadastre-se agora aqui!

E aqui está uma imagem do painel de controle com algumas das opções do analytics.

Tudo isso é bom demais. Deve haver alguma desvantagem! Qual é?

A única desvantagem das programações do analytics, a meu ver, é que não permite adicionar-se o 'ícone contador de visitas' que os programas fornecem, com todos os dados. Para isso você poderá usar algum dos sites abaixo. Na lista abaixo selecionei quatro que considero os melhores já utilizados por mim. E bom proveito!

Quando você for comentar...

2008-10-30T18:15:00.006-02:00

Nesta dica vamos ver como usar alguns efeitos simples de texto nos comentários e quais são permitidos. Em fóruns em geral são dadas algumas opções para a edição de texto, como, por exemplo, deixar o texto em negrito ou itálico, criar um hiperlink, etc. No campo para comentários do .Blogspot, no entanto, nenhuma dessas opções aparece. A maioria dos comentaristas, como venho notando, parece não conhecer a possibilidade de utilizarem-se alguns códigos HTML para os comentários. A seguir veremos quais opções principais a serem usadas.

Link - Para conseguir um link clicável para outro site, use o código de sempre: <a href="http://endereçodepágina.blogspot.com">Texto ou endereço do link</a>
Título - Para conseguir que, ao passar-se o mouse sobre certo trecho de texto apareça um nome determinado, use o seginte código: <a name="Nome ou aviso qualquer">Texto onde o efeito é aplicado</a> .
Para deixar o texto em itálico, coloque o comentário entre as tags <i> e </i> .
Para deixar o texto em negrito, coloque o comentário entre as tags <b> e </b> .
Para destacar o texto, use as tags <em> e </em>.

E creio que isso é tudo. Agora, que tal fazer a experiência dos códigos com um comentário aqui!

Como ocultar um elemento de página

2008-10-30T13:30:00.010-02:00

Do mesmo modo que muitas vezes queremos ocultar a navbar do blogger (ver aqui), as vezes seria conveniente que pudessemos ocultar um simples elemento de página (ou gadget), que não mais queremos, mas que pode vir a ser útil depois. Para isso existe um meio muito fácil utilizando-se de códigos CSS. Vejamos como fazer isso em três passos simples.

Digamos que você quer ocultar o gadget de seu Perfil do blogger, na barra lateral. Proceda assim:

Vá para a página LAYOUT -- EDITAR HTML. Agora, procure pelo nome do gadget que você quer ocultar (no caso, o seu Perfil). Por exemplo, "Quem sou eu". Para procurar utilize as teclas CTRL+F e digite o nome, como mostrado na figura abaixo.
Você encontrará o título nesta linha: <b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>. Então, copie o id do perfil; neste caso, como você vê, o id é Profile1.
Agora busque a tag ]]></b:skin> e cole imediatamente antes dela o código #Profile1 { display:none; }. O resultado ficará algo assim:

Naturalmente, se o gadget a ser oculto for outro você deverá modificar o nome Profile1 para o ID do gadget que você deseja ocultar. Então, salve as alterações e confira o seu blog.

Como inserir música no blog

2008-10-29T13:50:00.013-02:00

Nesta postagem mostrarei o que leitores me perguntaram recentemente: como inserir um tocador de música em blogs. O tocador mais simples e prático é, a meu ver, o de HTML simples. Para consegui-lo você tem que, antes de mais nada, ter a música carregada em alguma página na internet. Para carregar a música de seu computador para a internet, uma vez que o blogger não dá essa opção, recomendo o site www.skydrive.live.com. Aprenda a utilizar este programa com a postagem no Dicas Blogger http://dicasblogger.blogspot.com/4008/09/skydrive-solucao-fim-google-pages.html.

Agora ataquemos o HTML. O código necessário para o tocador é este:

<embed src="endereço_da_sua_música"></embed>

Modifique o trecho do código em vermelho para o endereço da música desejada e o básico de seu tocador estará pronto. Porém, para melhorá-lo, temos outros atributos de reserva.

Para que a música inicie automaticamente (altamente NÃO recomendado por 2 razões principais) insira dentro do código o seguinte: autostart="true". O código inteiro aparecerá então assim: <embed src="endereço_da_sua_música" autostart="true"></embed>. Para desativar esta opção, simplesmente elimine este trecho do código.

Para definir a quantidade de vezes que a música deve tocar repetidamente após iniciada, use o seguinte: loop="2". Modifique o número para a quantidade de vezes que você quer que toque seguidamente. Caso queira que a música siga tocando até que o leitor fuja da página, substitua o número pelo atributo true. (Código: <embed src="endereço_da_sua_música" autostart="true" loop="2"></embed> )

Para definir o tamanho do tocador, insira o código width="300" e height="40". Modifique o número equivalente a width para o tamanho do comprimento do tocador (em píxels) e o equivalente a height para a altura. (Código: <embed src="endereço_da_sua_música" autostart="true" loop="false" width="300" height="40"></embed> )

Para ocultar o tocador de música, insira o atributo hidden="true" (Código: <embed src="endereço_da_sua_música" autostart="true" loop="false" width="300" height="40" hidden="true"></embed> )

Naturalmente existem outras opções para modificar o tocador, mas aqui estão representadas todas as principais e de maior utilização. E agora você pode ver o resultado de seu código com todas as tags acima (opa!, todas não! Senão ficaria tudo escondo graças ao último atributo adicionado):

E agora, os dois motivos para você NÃO por música automática em seu blog.

A música automática pode ser indesejável ao visitante. Neste caso ela será um "espanta visita", especialmente se você tiver feito o favorzinho de esconder o tocador, não lhe dando assim nem a opção de parar com o ~~barulho~~
A música automática vai tornar seu blog ~~ainda~~ mais pesado. Dependendo da capacidade do PC de seu visitante, pode até travar o seu computador, fazendo com que ele marque seu blog como página indesejável.
Outra problema no sentido de afastar os visitantes é que a música funciona como um pop-up incômodo - carrega cada vez que você acessa a determinada página, e logo faz com que o visitante fique incomodado. Como alguém disse "É como um amigo que, cada vez que o encontra, conta a mesma piadinha. Da primeira vez você pode gostar, mas depois vai ficando aborrecido..." Além de tudo isso, a música pode causar problemas ao visitante caso ele esteja no trabalho. Dá para imaginar, não...?

Gostou da música? Clique aqui!

Parcerias com outros blogs

2008-10-25T20:02:00.010-02:00

O Mestre Blogger vem crescendo aos poucos, principalmente por causa dos acessos que recebe de outros sites e blogs. Blogueiros já me enviaram e-mails com pedido de parcerias, e agora vamos por este sistema em prática ativamente.

Para fazer uma parceria com o Mestre Blogger, copie e cole em seu blog o código abaixo, que resultará numa imagem assim:

A seguir, preencha o formulário abaixo com seu nome, e-mail, endereço e nome de seu blog; tão logo recebermos o aviso adicionaremos seu link em nossa lista de blogs e você se tornará mais um parceiro do Mestre Blogger.

Atalhos do teclado

2008-10-21T18:29:00.009-02:00

Deixo-lhes nesta postagem algumas dicas referentes aos comandos do teclado que podem ser úteis nos blogs em geral. A maioria de vocês já conhecerá, provavelmente, os principais. Espero que possa ser útil.

CTRL + B = Deixa o texto previamente selecionado em negrito (bold)
CTRL + D = Grava a postagem como rascunho.
CTRL + C = Copia o texto ou imagem selecionado.
CTRL + F = Abre uma janelinha de pesquisa na página. O texto que você digitar nela aparecerá selecionado na página. Este comando é muito útil na edição de códigos HTML, quando se precisa achar uma tag.
CTRL + H = Nos navegadores do Windows, em geral, abre o histórico das páginas visitadas na internet.
CTRL + I = Deixa o texto selecionado em itálico. Se você usar este comando sem ter selecionado o texto previamente ou clicado na caixa de texto, ele abrirá a opção de organizar os seus Favoritos na internet.
CTRL + L = Insire um recuo no texto selecionado; o efeito é o espaçamento que vem no parágrafo.
CTRL + N = Abre uma nova janela do navegador da internet. No Internet Explorer abre a mesma página; nos outros navegadores abre apenas a sua página inicial.
CTRL + R = Atualiza a página da internet na qual você está.
CTRL + S = Salva a postagem como rascunho sem, no entanto, deixar a página, como ocorre com o comando Ctrl + D.
CTRL + V = Cola texto ou imagem copiados.
CTRL + W = Fecha a página na qual você se encontra. O mesmo efeito pode ser conseguido teclando-se ALT + F4.
CTRL + X = Recorta texto ou imagem selecionados. Use CTRL + V para colar o objeto recortado.
CTRL + Y = É o contrário do comando CTRL + Z: refaz a alteração que havia sido desfeita.
CTRL + Z = Desfaz alguma alteração na sua postagem que você acabou de fazer. Em alguns programas tem maior alcance (desfaz até 10 ou 20 alterações). É meu comando do teclado favorito quando estou editando algo no computador... lol.

E aqui dou por encerrada a lista. O leitor poderá verificar que em alguns programas a maioria destes atalhos tem a mesma serventia e em outros as coisas podem ser diferentes. Por isso mesmo tome cuidado antes de usar um atalho do teclado que você conhece como certa função em outro programa: em qualquer outro programa ele poderá ter um efeito bem diferente, e ,embora quase sempre se possa emendar o erro, nunca é demais checar os comandos num programa ao qual você não está acostumado. "O seguro morreu de velho" e na internet é muito fácil perder-se um arquivo no qual se passou horas trabalhando. Por isso, também, é recomendável que você salve o seu trabalho freqüentemente (no blog não precisa: ele possue um salvamento automático!) para evitar a perda do serviço.

Para remover a barra de navegação do blogger (blogger navbar)

2008-10-07T13:15:00.016-03:00

Opções para a barra de navegação - falta o botão EXCLUIR. Àqueles que não sabem, a Blogger Navbar, ou barra de navegação do Blogger, é aquela barrinha que aparece sobre o cabeçalho dos blogs (veja a figura abaixo), com um campo para pesquisa do blog, um link para o blogger e algumas outras opções.

A principal utilidade desta barra para os visitantes é que fornece o campo para pesquisa no blog; ora, o campo de pesquisa pode ser facilmente adaptado à barra lateral de seu blog e após isso a barra não tem grande utilidade. Na página ELEMENTOS DE PÁGINA da opção LAYOUT da edição de seu blog (ver imagens abaixo) você pode modificar o visual da barra escolhendo entre quatro opções; no entanto, não lhe é dado remover a barra, como nos outros elementos de página. O único modo de remover a barra é, portanto, pela edição de HTML. Para fazer isto, que é bem simples, vá para o painel de sua conta no blogger, entre na página LAYOUT de seu blog, acesse a sub-página EDITAR HMTL e busque a tag ]]></b:skin>⁽¹⁾ . Logo antes desta tag cole o seguinte código: #navbar { display:none; }. Procendendo-se corretamente o resultado será esse:

Imagens:

Barra de navegação na página ELEMENTOS DE PÁGINA.

Como achar uma tag na edição de HTML.

Menu right click

2008-10-05T11:44:00.004-03:00

Aqui segue a dica de como conseguir um elegante menu para seu blog que é ativado quando o visitante clica com o botão direito em qualquer lugar desta página. Para ver como ele funciona clique com o botão direito em qualquer lugar nesta página que ele aparecerá, ao invés das opções dadas nas páginas em geral.¹

Para instalar o script que ativa este menu em seu blog clique no botão abaixo:

ou copie o código da caixa abaixo colando-o em um novo elemento de página (HTML/Javascript) de seu blog.

Editando links

2008-09-23T13:59:00.005-03:00

Observação: Essas dicas podem ser usadas quando você estiver editando diretamente o HTML de uma postagem ou de um modelo. Ele não funcionará com o item Lista de links de Layouts.

Nesta imagem está demonstrado como adicionar um hiperlink numa postagem em seu blog.

O HTML de um link básico tem esta aparência: <a href="http://URL">TEXTO</a>

Com esse código, a pessoa que estiver visitando sua página da Web verá a(s) palavra(s) como o TEXTO. Esse texto ficará destacado, e quando alguém clicar sobre ele, a janela do navegador irá até o endereço especificado pelo URL.

Você também pode criar um link que as pessoas podem utilizar para enviar um e-mail a você. No exemplo acima, substitua apenas http:// por mailto: e use seu endereço de e-mail no lugar do URL. Ficará assim: <a href="mailto:myaddress@example.com">Envie um e-mail para mim!</a>

Às vezes, você quer criar um link para uma outra página da Web, mas quer abri-la em uma nova janela do navegador mantendo também a página original aberta. Para isso, basta adicionar target="_blank" ao link. Isso fará com que o navegador crie uma nova janela em branco para o link. O link terá, então, a seguinte aparência: <a href="http://URL" target="_blank">TEXTO</a>

Retirado da página de ajuda do Blogger (http://help.blogger.com)

Código para copiar texto

2008-09-16T14:06:00.004-03:00

Aqui está um interessante código que eu achei no site Dynamic Drive. O código faz com que, por todo o site, onde o visitante selecionar algum texto com o mouse este será copiado e uma mensagem aparecerá com o texto selecionado. Veja uma demonstração do efeito aqui.

Para conseguir este código vá para a página de edição do blog LAYOUT--EDITAR HTML. Busque a tag </head> e cole ANTES desta o código na caixa abaixo. Salve as alterações e visualize o blog para comprovar.

Apenas lembre-se de que o script funciona apenas no Internet Explorer 5.0 +. Em outros navegadores nada acontecerá quando o visitante selecionar algum texto.

Setas na barra de título

2008-09-14T14:42:00.001-03:00

Com este script você conseguirá um efeito que chama a atenção ao título de seu blog utilizando setas que apontam para ele na barra superior(para uma demonstração veja aqui: http://beckerqueiroz.googlepages.com/setas ). No entanto, uma coisa você deve levar em conta ao colocar este script em seu blog: muitas vezes animação contínua de texto imagem, etc em uma página acaba expulsando os leitores mais sérios e fazendo com que percam a vontade de visitar seu blog. Use com moderação este efeito para que isso não possa acontecer.

Cole o código abaixo em um novo elemento de página ou em outro lugar qualquer de seu blog. Não esqueça de modificar a parte do código em vermelho para o título de seu blog. Também, se você quiser, modifique os números em vermelho para modificar a velocidade do script. Bom proveito!

2008-09-14T10:35:00.002-03:00

Alerta com opções

2008-09-13T13:35:00.005-03:00

Em uma postagem anterior eu mostrei como colocar em seu blog o código para um aviso que aparece cada vez que a página é atualizada. No entanto, aquele script só levava a opção de aceitar entrar no blog. Com este aqui o visitante tem a opção de fechar a página clicando em 'CANCELAR'. Ele aparecerá antes que a página termine de carregar, como no exemplo abaixo (claro que o aviso será outro!).

Clique aqui para ver um exemplo

Para consegui-lo use o código abaixo modificando apenas o aviso.

Bom proveito!

Como conseguir uma imagem de sua tela

2008-09-12T18:52:00.006-03:00

Esta é uma dica bem simples e rápida: mostra como conseguir uma 'tela' do seu computador, ou seja, uma imagem da tela sem usar câmara fotográfica... lol. Para conseguir a imagem da tela como ela está no momento pressione o botão de seu teclado PRINT SCREEN SYS RQ que fica junto às teclas F12 e SCROLL LOCK em alguns teclados (veja a imagem acima). A seguir, abra qualquer programa de edição de imagens, crie um novo documento e pressione as teclas CTRL + C. Salve o documento. Bom proveito!

Informador do número de visitas

2008-09-11T18:46:00.005-03:00

Os caros visitantes devem ter reparado que na minha barra lateral do blog há um aviso indicando o número de vezes que eles atualizam a página. Ao contrário dos scripts que contam o número de atualizações em geral, este código mostra a cada visitante as visitas que apenas ele fez. Se o visitante remover os cookies do computador a contagem recomeçará. Para instalar este script em seu blog, vá para a página LAYOUT das opções de edição de seu blog. Escolha ADICIONAR GADGET e na janela com as opções selecione HTML/JAVASCRIPT. Neste elemento de página cole o código abaixo e salve o elemento de página. Visualize o blog. A contagem já terá começado com VOCÊ!

Este é o código:

Modelo de links "arco-íris"

2008-09-07T18:04:00.004-03:00

Nesta postagem mostrarei como adicionar um efeito interessante aos links de seu blog - o efeito "arco-íris". Para ver do que consiste este efeito clique aqui. Para conseguir o efeito em seu blog, faça o seguinte. 1. Baixe este arquivo para seu computador e a seguir faça up-load dele para a sua conta no Google Pages ou outro programa qualquer. (http://beckerqueiroz.googlepages.com/arco-ris.js). A seguir vá para a página LAYOUT da edição de seu blog-->Clique ADICIONAR GADGET-->Selecione a opção HTML/JAVASCRIPT-->Cole neste elemento de página este código: <script src="http://beckerqueiroz.googlepages.com/arco-ris.js"></script> . Substitua o link http://beckerqueiroz.googlepages.com/arco-ris.js pelo link do seu arquivo e salve o elemento de página. Verifique seu blog. Agora todos os links terão o EFEITO ARCO-ÍRIS!

Link "Voltar para o topo da página"

2008-09-03T19:12:00.007-03:00

Para blogs com muitas postagens na mesma página este pode ser um interessante efeito para colocar. Há duas opções que você pode escolher: a primeira deixa um link ou uma imagem no fundo da página que, ao ser clicada, leva o visitante para o topo da página sem carrega-la novamente. O outro consiste de um link que flutua no canto de baixo a direita da tela, e que desce conforme o visitante vai descendo na página. Seguem as dicas para ambos efeitos.

1. Para conseguir o primeiro efeito (link no fundo da pág.), faça o seguinte. Acesse www.blogger.com e após o login vá para a página LAYOUT. Desça até o fundo e selecione a opção ADICIONAR GADGET do fundo da página; escolha HTML/JAVASCRIPT nas opções que aparecerão e cole aí este código. <a href="http:URLDOBLOG.blogspot.com#topo">Voltar para o topo da página</a>. Modifique o texto VOLTAR PARA O TOPO DA PÁGINA pelo que você quiser que apareça como link. Salve as alterações e vá para a sub-página de LAYOUT EDITAR HTML. Aí, procure pela tag <body> e logo após esta tag cole o código <a name"topo"></a>. Salve as alterações. Está feito!

2. Para conseguir o efeito do link flutuante, faça isto: Vá para a página LAYOUT--Vá para a sub-página EDITAR HTML-->Procure pela tag </body> e APÓS esta tag cole o código <script src="http://beckerqueiroz.googlepages.com/jumptop.js"> </script>. Salve as alterações e visualize o blog. Uma nota importante - O último código dado acima pega o efeito da minha página do google http://beckerqueiroz.googlepages.com/jumptop.js. Caso você prefira baixe aqui este arquivo e faça upload dele em qualquer lugar (por ex., crie uma conta no Google Pages e faça upload aí, uma vez que não é possível fazer no Blogger). A seguir troque o endereço dado no código pelo endereço do seu arquivo.

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem. Você será respondido o mais breve possível.

Terremoto!

2008-09-03T14:26:00.009-03:00

Este código ativa um "screen shaker", um efeito que sacode a janela aberta (no caso, um blog) um número determinado de vezes a cada atualização de página. Veja um exemplo aqui. Para consegui-lo em seu blog, acesse www.blogger.com-->Vá para a página LAYOUT-->Clique ADICONAR GADGET-->Escolha a opção HTML/JAVASCRIPT e cole nela o código dado abaixo. Salve as alterações e visualize o blog.

Nota - Na última linha do código modifique o número 3 de shake="3" pelo número de vezes que você quiser que a tela sacuda. Para parar de sacudir basta clicar em qualquer lugar que o 'terremoto' para.

Script para desabilitar o botão direito do mouse

2008-09-02T18:43:00.010-03:00

Esta dica mostra um código simples para evitar que o botão direito do mouse possa ser utilizado em seu blog. Esta função geralmente é utilizada na tentativa vã de impedir visitantes de gravarem as imagens do site. Porém, não se engane: não é nada fácil impedir que gravem as imagens. Aliás, parece não existir uma forma perfeita de faze-lo. Sempre haverá outras possibilidades, como utilizar a tecla Print Screen ou gravar a página.

Acesse www.blogger.com e faça o login (cadastre-se). A seguir, vá para a página LAYOUT das opções de edição de seu blog.
Clique em ADICONAR GADGET. Aparecerá então uma janela pop-up com uma lista de opções. Selecione HTML/JAVASCRIPT (veja fig. abaixo).
Na janela que aparecerá, cole o código abaixo e a seguir clique SALVAR. Visualize o blog e experimente!

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem. Você será respondido o mais breve possível.

Efeitos HTML em Texto

2008-08-29T12:37:00.001-03:00

CÓDIGOS HTML PARA EFEITOS EM TEXTO

Quando você está criando uma postagem você tem algumas opções para texto disponíveis na barra acima da postagem. No entanto, às vezes você quer outras opções que não são dadas. O remédio para isto é edição de HTML. Seguem as dicas para alguns efeitos.

sublinhado

negrito

~~riscado~~

enfatizado

itálico

_subscrito

^superscrito

pequeno

grande

Para modificar a fonte use o código <font face="NOME">TEXTO</font>. Onde está escrito NOME deixe Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS ou Verdana. Lembre-se de que outras fontes podem não ficar disponíveis para alguns leitores, se eles não as tiverem em seus computadores.

Para modificar o tamanho da fonte use o código <font size="NÚMERO">TEXTO</font&gy;. Substitua NÚMERO por um número de 1 a 7 (se puser um número maior deixe o sinal "%" no meio, assim: 130%).

cor de fundo

cor

Para texto pré-formatado (por exemplo, poesia) use <PRE>POESIA</PRE> substituindo POESIA pelo texto ou poesia. Isto é para não perder a formatação - por exemplo: quando você copia um texto do Word e o cola numa postagem do blog, ele perde toda a formatação (quebras de linha, etc). Porém, se você o colar dentro do <PRE>

AQUI

Para conseguir um espaço antes do texto em cada parágrafo, coloque o texto de cada parágrafo entre <p style="text-indent: 20px;">TEXTOPARÁGRAFO</p> (substitua TEXTOPARÁGRAFO pelo texto de cada parágrafo. Também modifique 20px pelo tamanho em píxels do avanço de parágrafo).

E por enquanto é isto. Mais para a frente poremos outros efeitos de texto interessantes.

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem. Você será respondido o mais breve possível.

Código para Link "Adicionar aos Favoritos"

2008-08-26T12:18:00.001-03:00

Em uma postagem anterior eu deixei uma dica de como instalar um botão que adiciona aos favoritos o seu blog, se você clica nele. Porém, verifiquei depois que ele não funciona no Firefox, ao contrário do que eu disse na postagem anterior. Por isso, deixo aqui a dica de um código que funciona perfeitamente em ambos navegadores (parece funcionar em alguns outros também, porém não estou certo).

Modifique as partes do código em vermelho para o nome de exibição na lista de favoritos e o endereço que o nome deverá acessar (endereço do seu blog). A seguir modifique o código em azul para o link em que deverão clicar para adicionar sua página aos favoritos. Caso você queira uma imagem em vez de um link, cole o código da imagem no lugar ou junto ao link.

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem. Você será respondido o mais breve possível.

Deixando o Link dos Comentários Mais Atrativo

2008-08-11T19:18:00.015-03:00

Nesta postagem explicarei como modificar o link dos comentários abaixo das postagens. Muitos visitantes que não conhecem direito os blogs do google não entendem o que significa a mensagem abaixo de cada postagem "0 comentários", e apenas por isso não deixam o seu comentário. Para modificar o escrito no link, eis o que se deve fazer:

1. Acesse www.blogger.com-->faça login-->vá para a página LAYOUT-->vá para a sub-página EDITAR HTML.

2. Antes de começar a editar o HTML, tome uma precaução: baixe o modelo completo. Caso algo errado aconteça no modelo de seu blog tudo que você tem a fazer para recuperá-lo é baixar o modelo gravado (veja imagem abaixo).

3. Clique em REVERTER MODELOS DE WIDGET PARA O PADRÃO no fundo da janela (veja imagem abaixo).

4. Uma mensagem como a da figura abaixo aparecerá. Selecione OK.

5. Agora volte para o alto da janela. Acima da área onde ficam os códigos, você verá a opção EXPANDIR MODELOS DE WIDGETS. Selecione esta opção e aguarde alguns segundos (ver figura abaixo).

6. Busque o seguinte código no HTML de seu blog (para buscar o código, pressione as teclas Ctrl + F e digite na janela que aparecerá alguns caracteres do código):

7. Modifique o código acima pelo mostrado abaixo: <span class='post-comment-link'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> <p style='font-size:100%'>Seja o primeiro a comentar!</p> <b:else/> <b:if cond='data:post.numComments== 1'><p style='font-size:100%'>1 visitante comentou nesta postagem. Deixe seu comentário.</p><b:else/><p style='font-size:100%'><data:post.numComments/> visitantes comentaram nesta postagem. Deixe seu comentário..</p></b:if></b:if></a></b:if> </span><b:if cond='data:blog.url ==data:blog.homepageUrl'></b:if>

Modifique as partes do código mostradas em azul para as mensagens que você quiser que apareça. A primeira mensagem é para 0 comentários, a segunda para 1 comentário e a terceira para 'n' comentários, sendo 'n' um número maior que 1. Modifique os números mostrados em amarelo para o tamanho em que o link deve aparecer.

8. Caso você deseje que uma imagem apareça no lugar do link, ou mesmo junto a ele, adicione o código da imagem junto a parte mostrada em azul.

Bom proveito!

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem. Você será respondido o mais breve possível.

Como modificar o URL de seu Blog e adicionar código de transposição ao URL antigo

2008-08-11T19:18:00.014-03:00

Às vezes, por um motivo ou outro, você quer mudar o URL (endereço) de seu blog para outro do qual você gostou mais ou que só agora ficou disponível. Para isso faça o seguinte:

Acesse www.blogger.com e faça o login. Nas opções de edição de seu blog vá para CONFIGURAÇÕES-->PUBLICAÇÃO. Nesta página você verá o endereço de seu blog, com uma opção para modificá-lo. Digite o novo endereço e clique em SALVAR CONFIGURAÇÕES.

Agora que seu blog tem outro endereço não vá deixar seus leitores na mão, sem saberem para onde foi seu blog! Faça o seguinte:

Volte para o painel (www.blogger.com)
Clique em CRIAR BLOG
No novo blog que você estará criando, deixe o endereço antigo de seu outro blog. Selecione um modelo qualquer para o blog no próximo passo e finalmente clique em CONCLUIR
Clique COMEÇAR A USAR O BLOG
Vá para a página LAYOUT-->EDITAR HTML-->Busque a parte do código
</head>
Logo antes dela cole este código:
<meta http-equiv="refresh"content="10;URL=http://endereço.do.blog"></meta>
Modifique endereço.do.blog para o novo endereço de seu outro blog. (não esqueça do http://). Salve o modelo.
Crie uma postagem no novo blog. Escreva na postagem algo mais ou menos assim:
"http://endereçoantigodoblog.blogspot.com moveu-se para http://novoendereçodoblog.blogspot.com. Caso você não seja redirecionado em 10 segundos para o novo blog, clique aqui."
Modifique http://endereçoantigodoblog.blogspot.com pelo endereço antigo do primeiro blog e http://novoendereço.blogspot.com pelo endereço para o qual ele se mudou. Deixe um link em clique aqui para o novo endereço do blog e modifique o resto do texto como quiser. Publique a postagem e visualize o blog.

Teve alguma dificuldade ao seguir a dica acima? Deixe um comentário nesta postagem! Você será respondido o mais breve possível.

Alguns botões para seu Blog

2008-08-11T19:18:00.013-03:00

Nesta postagem vão duas dicas para adicionar diferentes botões a seu blog.

1. Botão "Adicionar página a favoritos" =

CÓDIGO UTILIZADO

<button style="WIDTH: 180px; HEIGHT: 32px" onclick="javascript:window.external.AddFavorite('http://dicas-para-bloggers.blogspot.com','Dicas para Bloggers')" width="10" font="arial" height="10"><span >Adicionar aos Favoritos</span></button>

No código acima, se você quiser o botão como ele está, tudo que você tem a fazer é mudar a parte do código em vermelho para o endereço de seu blog e a parte azul para o nome que você quer que apareça. Em "WIDTH: 180px; HEIGHT: 32px" você define o tamanho do botão. Nas partes do código width="10" font="arial" height="10" você definine o tamanho do texto que vai no botão e a fonte dele (no caso está arial).

2. Botões "Voltar" e "Avançar" =

CÓDIGO UTILIZADO

Modifique o tamanho dos botões por píxels em "WIDTH:72px; HEIGHT:32px". Para modificar o escrito nos botões apenas mude "VOLTAR" e "AVANÇAR" pelo que quiser. Para modificar a quantidade de páginas a voltar com um clique substitua "(1)" por outro número.

Os dois códigos acima foram testados por mim apenas nos navegadores Explorer e Firefox funcionando em ambos. Não tenho certeza se funcionam em outros navegadores.

Como montar um botão de pesquisa do Blogger em seu Blog

2008-08-11T19:18:00.012-03:00

Este botão é o mesmo que aparece na barra do Blogger no topo do blog. No entanto você pode querer ocultar a barra do Blogger ou simplesmente deixar esta busca mais visível adicionando-a num novo elemento de página na barra lateral. O procedimento para isto é simples.

Faça login em http://www.blogger.com/ .
Acesse a página LAYOUT de seu blog (ver figura abaixo).
Na página LAYOUT clique em ADICIONAR GADGET (abaixo).
Nas opções que lhe serão apresentadas selecione HTML/Javascript (abaixo).
Na nova janela que aparecerá cole este código:

<form action="/search" name="f"><table cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td width="25%"></td>
<td align="middle"><input onfocus="if(this.value=='Digite sua busca aqui')this.value='';" maxlength="2048" title="Pesquisa Google" value="Digite sua busca aqui" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" style="WIDTH: 131px; HEIGHT: 19px" size="19" name="q"/></td>
<td width="25%"><span style="font-size:0;"></span></td></tr>
<tr>
<td colspan="3" align="middle"><span style="font-size:0;"><span style="TEXT-ALIGN: left"><label for="lgr"><input value="Pesquisar Blog" name="btnG" type="submit"/>
</label><label for="cty">
</label></span></span></td></tr></tbody></table></form>

Salve o elemento de página e visualize seu blog.
Caso você queira mudar o que aparece escrito no botão PESQUISAR BLOG modifique o texto que acima está em vermelho para o que quiser. Caso também deseje modificar o texto que aparece no campo onde você digita a busca modifique as duas partes do código em azul (as duas partes do código devem ter o mesmo texto).

Editando o Cabeçalho - Algumas dicas

2008-08-11T19:18:00.010-03:00

Dicas para modificar ou editar o cabeçalho de seu blog.

Para ocultar o Cabeçalho -

1. Após o login em www.blogger.com vá para a página LAYOUT-->EDITAR HTML. Antes de tudo, baixe o modelo de seu blog utilizando o link apresentado na janela EDITAR HTML. Assim, caso algo errado aconteça na edição de HTML, tudo que você tem a fazer é baixar o modelo antigo para as coisas ficarem como estavam. 2. Busque a tag

]]></b:skin>

3. Logo antes desta tag, cole o código a seguir

#Header1 { display:none; } #header-wrapper { display:none; }

4. Salve as alterações e visualize o blog.

Para remover definitivamente o Cabeçalho -

Você pode já ter tentado remover o cabeçalho de seu blog do mesmo modo como você remove os elementos de página, isto é, clicando para editar e depois no botão EXCLUIR. No entanto, se você já tentou remover, você com certeza percebeu que o botão não está presente na edição do cabeçalho. Para modificar isto, faça o seguinte:

1. Vá para a página LAYOUT-->EDITAR HTML. Baixe o modelo do blog. 2. Busque a tag

<body>

3. Logo após esta tag, você verá o seguinte código (no lugar onde está o escrito Título do Blog estará o título de seu blog):

4. Modifique o código locked='false' para locked='true' e salve as alterações. 5. Vá para LAYOUT-->ELEMENTOS DE PÁGINA. Clique EDITAR o cabeçalho - você verá que agora o botão EXCLUIR não está mais oculto.

Para centralizar o título de seu blog no Cabeçalho -

1. Após o login em www.blogger.com vá para LAYOUT-->EDITAR HTML e busque este código

2. Logo antes de id='header-wrapper' cole align='center'. Salve as alterações e visualize o blog.

Janela de Alerta ao Entrar-se em Seu Blog

2008-08-11T19:18:00.008-03:00

Esta postagem mostrará dois tipos de janela popup - uma com uma alerta para seu blog e a outra com uma mensagem pedindo o nome do visitante.

Mensagem popup de alerta

Faça login em www.blogger.com. Vá para a página de seu blog LAYOUT-->Crie um novo elemento de página e selecione HTML/JAVASCRIPT. Copie neste elemento de página o seguinte código:

Modifique a parte do código em vermelho para a mensagem que você deseja que apareça. Modifique a parte em verde para a mensagem que aparecerá caso o visitante mantenha ativado o bloqueador de popups e javascript. Salve o novo elemento de página e visualize seu blog.

Mensagem popup de indentificação do visitante

Esta janela mostra uma mensagem como a da figura abaixo cada vez que um visitante entra em seu blog. O problema dela é que pode tornar-se um pouco cansativa se o visitante visitar sua página com freqüencia.

Para conseguir esta janela, faça login em www.blogger.com-->Vá para a página LAYOUT-->Crie um novo elemento de página (HTML/JAVASCRIPT). No novo elemento de página, cole o seguinte código:

Modifique o primeiro código em vermelho pela pergunta e VISITANTE pela opção que aparecerá no campo onde o visitante digitará seu nome. Modifique a mensagem de boas-vindas em verde para o que você quiser que apareça.

Bom proveito!

Como fazer uma lista de links em um Menu Suspenso

2008-08-09T18:56:00.001-03:00

Às vezes você quer deixar uma lista de seus sites favoritos em seu blog, porém falta espaço e você não quer chamar muita atenção com a lista. Neste caso o melhor que você tem a fazer é um menu suspenso de links. O procedimento é bem simples. Antes de tudo acesse http://www.blogger.com/ e faça o login. Depois vá para a página Layout-->Elementos de página-->Adicionar um novo elemento de página-->HTML/Javascript. A seguir copie o seguinte código: >TR>

<select style="WIDTH: 169px" name="dd1" size="1"><option ; value=""/>Meus sites favoritos<option value="http://buho21.com"/>Buho21 - Ajedrez online<option value="http://vivi8.free.fr"/>Zorro - The Characters<option value="http://johnwayne.com"/>John Wayne - Official site<option value="http://webdeveloper.earthweb.com"/>Free Java Scripts<option value="http://avpxadrez.com"/>Xadrez Valeparaibano<option value="http://chess-poster.com"/>Chess Poster</select>

</form>

e cole-o ao novo elemento de página que você criou. Nas partes do código em vermelho irão os URLs (endereços) dos sites/blogs para os quais você vai endereçar. Nas partes em verde escreva o nome que você deseja que apareça para cada site. Por fim na parte em laranja digite o nome da lista e na parte cinza o nome do botão para acessar os links - por exemplo: "Acessar", "Ir", etc. Então clique SALVAR e visualize o blog a seguir. O menu suspenso ficará como este:

Outros Pop-ups

2008-08-09T14:56:00.002-03:00

No Blogger o único modo de conseguir um pop-up é pela edição de HTML. Seguem as dicas para conseguir alguns outros tipos de pop-ups. 1 - Para conseguir este efeito (passe o mouse), eis o código que utilizei:

<A onmouseover="window.open('http://beckerqueiroz.googlepages.com/janelapopup','Info','status=yes,scrollbars=no,resizable=no,width=350,height=407,left=100,top=47');" href="javascript:void(0)">este efeito</A>

Na parte do código acima indicada em vermelho cole o endereço da janela que você deseja abrir.

2 - Para conseguir uma janela que abra ao clicar-se nela, porém sem o campo para o endereço e com tamanho pré definido, use o seguinte código:

<A onclick="window.open('http://beckerqueiroz.googlepages.com/janelapopup','Info','status=yes,scrollbars=yes,resizable=yes,width=620,height=450,left=100,top=47');" href="javascript:void(0)">Clique para ver o pop-up!</A>

Após o campo para digitar o endereço da janela que você deseja abrir como pop-up você vê as diversas opções de como será a janela. status=yes permitirá que na janela sejam mostradas as opções de internet (histórico, atualizar, etc); scrollbars=yes deixará que apareçam as barras laterais para navegar pela janela; resizable=yes definirá se a janela será redimensionável; width=620 definie que o comprimento da página será em 620 píxels e height=450 deixa a altura em 450. Há muitos outros tipos de pop-up - aqui eu apresentei apenas os modelos mais usados -porém estes modelos sempre funcionam no Blogger, enquanto outros que estão bem para sites não funcionam em blogs. Também é bom recordar, no caso do pop-up que aparece quando a página carrega, que além de muitas pessoas deixarem ativado em seus computadores o bloqueador de pop-ups, para muitas pessoas os pop-ups dão a impressão de um site de propagandas comerciais. Mesmo que o visitante não se incomode com o pop-up, após duas ou três visitas o pop-up fará com que ele perca a vontade de acessar seu blog, pois estas coisas sempre cansam. Enfim, com bom uso pop-ups podem se tornar extremamente úteis, e isso é que importa. Bom proveito da dica acima!

Como conseguir um Pop-Up para o seu blog

2008-08-08T19:02:00.002-03:00

Apesar dos muitos sites na internet que ensinam como criar uma janela pop-up para sua web, nenhum deles ensina como fazer um pop-up para seu blog. Pode-se tentar empregar as dicas feitas para sites para um blog, porém elas quase nunca vão funcionar. Pesquisando sobre o assunto consegui o código que segue, retirado de um site cheio de pop-ups, e ligeiramente modificado. O interessante deste código é que contem uma função de cookies que apenas abre o pop-up da primeira vez que você entra no blog. Depois, enquanto você mantiver esta janela aberta, você poderá atualizar a página quantas vezes quiser que o pop-up não aparecerá. Segue o código:

function openpopup(){

var popurl="Ponha o endereço de seu site aqui"

winpops=window.open(popurl,"","width=600,height=600,")

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

onset = document.cookie.indexOf(search)

if (onset != -1) { // if cookie exists

onset += search.length

// set index of beginning of value

end = document.cookie.indexOn(";", onset);

// set index of end of cookie value

if (end == -1)

end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(onset, end))

}

return returnvalue;

}

function loadornot(){

if (get_cookie('poppedup')==''){

openpopup()

document.cookie="poppedup=yes"

}

loadornot()

</script>

Cole o código dado acima em um novo elemento de página na sub-página de Layout. Para fazer isso:

Acesse www.blogger.com
Clique em Layout.
Vá para a sub-página Elementos de página.
Clique Adicionar um elemento de página.
Na janela que aparecerá escolha a opção HTML/Javascript.
Cole neste elemento de página o código do pop-up e clique em SALVAR.

IMPORTANTE - Ao modificar a parte do código em vermelho tome cuidado para não deixar nenhum espaço no URL (endereço) da janela que você deseja abrir. A parte azul do código pode ser modificada para definir o tamanho da janela pop-up. Bom proveito!

Como remover a barra de navegação do Blogger

2008-08-08T14:56:00.003-03:00

Para remover a barra de navegação do Blogger (veja figura abaixo)

em seu blog, siga os seguintes passos:

Acesse www.blogger.com
Após o entrar com sua conta do blogger clique em Layout ---> Editar HTML.
Na parte de CSS do HTML de seu blog busque este código: ]]></b:skin>
(Para achar esta tag na "confusão" de códigos do seu blog pressione as teclas Ctrl+F e na janela que aparecerá digite a tag que você está buscando).
Imediatamente antes da ]]></b:skin> , cole o seguinte código: #navbar-iframe {height:0px; visibility:hidden; display:none}
Se você proceder corretamente o resultado será este: #navbar-iframe {height:0px; visibility:hidden; display:none} ]]></b:skin>
Salve o seu template e visualize o blog

Bom proveito!

Contato

2007-08-11T19:18:00.011-03:00

Parcerias com outros blogs

2006-08-11T19:18:00.043-03:00

Quer fazer parceria com nosso blog? Adicione nosso link/banner e a seguir preencha o formulário de parceria aqui. Após enviados os dados para parceria logo seu link/banner será adicionado em nossa lista.
----MEUS LINKS----

Compartilhando Soluções Salles Vale Tudo Ferramentas Blog Fegatello

Comentário

2004-09-17T14:51:00.003-03:00

Tem algo a dizer? Deixe um comentário nesta postagem clicando aqui! Agradecemos pela participação neste blog.


	Formulário

	* Seu nome:

	* URL (endereço) de seu blog:

	* Nome de seu blog:

	* Seu endereço de e-mail:

Seu nome:
Seu E-mail:
Assunto:
Mensagem :
Imagem (digite as letras que você vê; o sistema diferencia entre maíusculas e minúsculas):