Como criar uma caixa link-me para divulgar o banner do seu blog

 

Caixa link-me para divulgar o seu blog

Uma coisa bem simples, porém bastante importante é a caixinha link-me, nome dado ao widget para solicitar aos seus leitores que divulguem o banner do seu blog.

Veja abaixo a caixinha que uso no Visual Dicas:

<a href="http://visualdicas.blogspot.com" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png" border="0" alt="Visual Dicas - A sua fonte de informação!" /></a>

 

Publicando o banner na web

1) Crie um banner bem legal, utilizando as dimensões padrão de 120 X 60 (pixels) – Utilize programas como Photoshop, Corel Draw ou Fireworks. Se quiser uma mãozinha, assista as vídeo-aulas do Dicas Blogger: Criando um banner animado e Criando um banner estático

2) Publique o seu banner na web utilizando um site especializado para isto. Sugiro utilizar o ImageShack

Clique no botão <Browse>, encontre o arquivo do seu banner e faça o upload clicando em <Carregar agora>

Copie o link descrito em <Link direto>. Abaixo segue o exemplo do link do arquivo do meu banner:

 http://img339.imageshack.us/img339/6207/visualdicassuperlogo2.png

Criando a caixa Link-me

 

Acesse o site: Mais Blog

 

 

Agora preencha os campos, Endereço da Imagem (utilize o link direto que você copiou do ImageShack), Texto Alternativo (use um texto para divulgação, que vai aparecer quando se passa o mouse sobre o banner) e o Endereço do Link (use o endereço do SEU BLOG).

Clique no botão <Testar> para visualizar a sua caixa link-me. Se tudo certo, clique em <Gerar> para que gere o código fonte que você utilizará no seu blog.

Copie o código, em <Selecionar e Copiar> e cole no gadget Blogger HTML/Javascript do seu blog. (veja: Como instalar um widget no seu blogger).

Dica importante: Alguns navegadores utilizam versões HTML que não reconhecem o comando alt= (comando para o texto alternativo). Para resolver isto em todos os navegadores, acrescente o comando title= "Texto Alternativo" no código gerado, veja o exemplo abaixo:

<!-- Inicio do button link-me - gerado by maisblog.com -->

<div align="center">

<a href="http://visualdicas.blogspot.com" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png" border="0"alt="Visual Dicas - A sua fonte de informação!" title="Visual Dicas – A sua fonte de informação!"></a><br><br>

<textarea name="cxlinkme" rows="2" cols="8" onclick="this.focus()" onfocus="this.select()">

<a href="http://visualdicas.blogspot.com" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png" border="0"alt="Visual Dicas - A sua fonte de informação!" title="Visual Dicas – A sua fonte de informação!"></a></textarea>

</div>

<!-- Fim do button -->

Para alterar o tamanho da caixa do link, altere os valores da comando [rows] e [cols].

Pronto, agora o leitor (parceiro) pdoerá copiar o código que fica na caixinha abaixo do seu banner, e colar no blog dele, divulgando o seu trabalho…

<a href="http://visualdicas.blogspot.com" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png" border="0" alt="Visual Dicas - A sua fonte de informação!" title="Visual Dicas – A sua fonte de informação!"></a>

Veja como ficou o nosso banner! Que tal aproveitar e fazer uma divulgação do Visual Dicas no seu blog também?

 Veja: Colocando gifs animados, imagens e banners no blog

até mais… [ byALF ]