quarta-feira, 4 de abril de 2012

Blogger - Criando seu Banner

Neste artigo, vou mostrar como criar um banner (ou "selo") para seu site, que poderá ser utilizado com mais eficiência nessa modalidade de divulgação.

O banner nada mais é do que uma figura representando seu blog, contendo um link para ele, e que será publicada em outros sites. A principal vantagem de divulgar seu site é através de um banner é que um banner costuma chamar mais atenção do visitante do que um simples link.

Além disso, é uma possibilidade de escapar do "nofollow", mesmo que ele esteja ativo em outro site. Como você já deixará pronto o link para o seu blog, este será um link sem o "nofollow", e seguido pelo Google.

O processo de criação e divulgação do seu banner é bastante simples. Vou dividí-las para facilitar seu trablho.

1 - Crie a figura para utilizar em seu banner


Para criar a figura que representará seu banner, basta utilizar um editor de imagem. Você não precisa ter intimidade com programas complexos: até mesmo o Paint, que já vem instalado com o Windows, pode fazer o trabalho. O importante é seguir as orientações abaixo:
  • O banner do seu site deve seguir sua identidade visual. Assim, busque usar as mesmas cores e fontes do seu site, para que as pessoas possam identificá-lo ao olhar para seu banner.
  • O tamanho mais utilizado para o banner é 120 pixels de largura por 60 pixels de altura. Se você criar uma figura fora dessas dimensões, o outro site pode cortar ou deformar sua figura ao redimensioná-la.
  • Um GIF animado pode chamar mais a atenção do que uma figura estática - desde que seja bem feito. Mas, se decidir fazer um, tome o cuidado para não fazer algo extravagante demais. 
  • Mesmo que você queira fazer uma figura estática, salve-a no formato GIF. Caso você queira futuramente trocá-la por um GIF animado, basta substituir a figura atual onde ela está hospedada, e sua imagem anterior será substituída pela animação nos sites em que ela estiver publicada.

O banner do  Tutors de Tudo (nosso novo parceiro) está abaixo, como exemplo:

2. Hospedando sua figura

Após ter criado sua figura, é necessário hospedá-la em algum local, para que fique disponível para todos os sites que desejem publicá-la. Se você já possui um serviço de hospedagem pago para seu blog, este passo é bem simples: basta fazer upload da imagem para uma pasta conhecida.
Caso você hospede seu blog numa plataforma gratuita, como o Blogger, é necessário hospedá-la em outro site. Até o possível hospedá-la no próprio Blogger, mas o endereço para a figura será extremamente longo e complicado para se divulgado.
Existem diversos serviços gratuitos para hospedagem de imagens na internet, como o ImageShack e o PhotoBucket. No entanto, não gosto desses serviços por um motivo simples: uma vez feito o upload da imagem, não é possível colocar uma nova imagem em seu lugar. Isso significa que, se um dia você quiser trocar a imagem de seu banner, precisará pedir a todos os seus parceiros para que alterem o link para ela.
Entre todos os serviços gratuitos que testei, minha escolha foi o webs. Nele, você pode criar um site e fazer upload das imagens. O ideal é que você o crie com o próprio nome do seu site ou blog original. Para fazer o upload da imagem que você criou, é só entrar na opção “File Manager” e acessar “Single File Uploader”. 
3 - Criando o código para a divulgação do Banner

O próximo passo é criar o código que você colocará em seu blog para divulgação do seu banner. O código irá criar dois elementos: na parte superior será exibido seu banner e na parte inferior uma caixa onde os seus parceiros copiarão o seu código.
Abaixo está o código que usamos no Tutors de Tudo (nosso parceiro), que você pode tomar como base para criar o seu:

<p align="center"> 
<img vspace="2" hspace="2" title="Tutors de Tudo" alt="Tutors de Tudo" src="http://gerenciandoblog.webs.com/Gerenciando.gif"/><br/> 
<textarea onfocus="this.select()" style="margin: 2px; width: 180px; height: 50px" onmouseover="this.focus()" name="textarea"><a href=http://www.tutorsdetudo.blogspot.com target="_blank"> 
<img border="0" title="Gerenciando Blog" alt="Gerenciando Blog
src=http://tutorsdetudo.webs.com/logo.gif /></a></textarea></p>


Os trechos que você precisa alterar estão colorido:
  • http://tutorsdetudo.webs.com/logo.gif – Endereço em que você hospedou sua figura (item 2).
  • http://tutorsdetudo.webs.com/logo.gif – Endereço do seu blog.
  • Tutors de Tudo– Texto alternativo que aparecerá ao colocar o mouse sobre seu banner.
  • 180 x 50 – Tamanho da caixa que será exibida com o código do seu banner.
O resultado ficará similar ao abaixo:


4. Publicando o código de divulgação


Feito isso, o passo mais simples: basta adicionar um gadget de HTML/JavaScript em seu blog, adicionando o código criado no item 3. Quanto maior o destaque que você der ao banner, maior a chance dele ser visto e publicado em outro site.

5 - Criando uma Política de Parcerias


Outra dica que dou – embora não seja obrigatória – é que você crie e divulgue uma Política de Parcerias para seu site ou blog. Por exemplo: qualquer site pode ser seu parceiro ou você evitará conteúdo ilegal? É interessante deixar todos os pontos claros, para evitar parcerias que não sejam interessantes para você.
Como exemplo, leia a Política de parcerias do Tutors de Tudo

Pronto! Se você seguiu os passos, já tem um banner para o seu site. No início, a procura por parcerias pode demorar a aparecer. Com o tempo – e se você tem um site de qualidade – é natural que elas surjam. Outra possibilidade é você propor parcerias a outros blogs. É uma escolha pessoal.
Agora, se você achou este processo complicado, é possível fazer todo esse trabalho automaticamente em um site, embora haja algumas limitações. Para saber como fazer isso, leia o artigo Um banner para seu site de forma fácil.

Créditos: Tutors de Tudo 

Neste artigo, vou mostrar como criar um banner (ou "selo") para seu site, que poderá ser utilizado com mais eficiência nessa modalidade de divulgação.

O banner nada mais é do que uma figura representando seu blog, contendo um link para ele, e que será publicada em outros sites. A principal vantagem de divulgar seu site é através de um banner é que um banner costuma chamar mais atenção do visitante do que um simples link.

Além disso, é uma possibilidade de escapar do "nofollow", mesmo que ele esteja ativo em outro site. Como você já deixará pronto o link para o seu blog, este será um link sem o "nofollow", e seguido pelo Google.

O processo de criação e divulgação do seu banner é bastante simples. Vou dividí-las para facilitar seu trablho.

1 - Crie a figura para utilizar em seu banner


Para criar a figura que representará seu banner, basta utilizar um editor de imagem. Você não precisa ter intimidade com programas complexos: até mesmo o Paint, que já vem instalado com o Windows, pode fazer o trabalho. O importante é seguir as orientações abaixo:
  • O banner do seu site deve seguir sua identidade visual. Assim, busque usar as mesmas cores e fontes do seu site, para que as pessoas possam identificá-lo ao olhar para seu banner.
  • O tamanho mais utilizado para o banner é 120 pixels de largura por 60 pixels de altura. Se você criar uma figura fora dessas dimensões, o outro site pode cortar ou deformar sua figura ao redimensioná-la.
  • Um GIF animado pode chamar mais a atenção do que uma figura estática - desde que seja bem feito. Mas, se decidir fazer um, tome o cuidado para não fazer algo extravagante demais. 
  • Mesmo que você queira fazer uma figura estática, salve-a no formato GIF. Caso você queira futuramente trocá-la por um GIF animado, basta substituir a figura atual onde ela está hospedada, e sua imagem anterior será substituída pela animação nos sites em que ela estiver publicada.

O banner do  Tutors de Tudo (nosso novo parceiro) está abaixo, como exemplo:

2. Hospedando sua figura

Após ter criado sua figura, é necessário hospedá-la em algum local, para que fique disponível para todos os sites que desejem publicá-la. Se você já possui um serviço de hospedagem pago para seu blog, este passo é bem simples: basta fazer upload da imagem para uma pasta conhecida.
Caso você hospede seu blog numa plataforma gratuita, como o Blogger, é necessário hospedá-la em outro site. Até o possível hospedá-la no próprio Blogger, mas o endereço para a figura será extremamente longo e complicado para se divulgado.
Existem diversos serviços gratuitos para hospedagem de imagens na internet, como o ImageShack e o PhotoBucket. No entanto, não gosto desses serviços por um motivo simples: uma vez feito o upload da imagem, não é possível colocar uma nova imagem em seu lugar. Isso significa que, se um dia você quiser trocar a imagem de seu banner, precisará pedir a todos os seus parceiros para que alterem o link para ela.
Entre todos os serviços gratuitos que testei, minha escolha foi o webs. Nele, você pode criar um site e fazer upload das imagens. O ideal é que você o crie com o próprio nome do seu site ou blog original. Para fazer o upload da imagem que você criou, é só entrar na opção “File Manager” e acessar “Single File Uploader”. 
3 - Criando o código para a divulgação do Banner

O próximo passo é criar o código que você colocará em seu blog para divulgação do seu banner. O código irá criar dois elementos: na parte superior será exibido seu banner e na parte inferior uma caixa onde os seus parceiros copiarão o seu código.
Abaixo está o código que usamos no Tutors de Tudo (nosso parceiro), que você pode tomar como base para criar o seu:

<p align="center"> 
<img vspace="2" hspace="2" title="Tutors de Tudo" alt="Tutors de Tudo" src="http://gerenciandoblog.webs.com/Gerenciando.gif"/><br/> 
<textarea onfocus="this.select()" style="margin: 2px; width: 180px; height: 50px" onmouseover="this.focus()" name="textarea"><a href=http://www.tutorsdetudo.blogspot.com target="_blank"> 
<img border="0" title="Gerenciando Blog" alt="Gerenciando Blog
src=http://tutorsdetudo.webs.com/logo.gif /></a></textarea></p>


Os trechos que você precisa alterar estão colorido:
  • http://tutorsdetudo.webs.com/logo.gif – Endereço em que você hospedou sua figura (item 2).
  • http://tutorsdetudo.webs.com/logo.gif – Endereço do seu blog.
  • Tutors de Tudo– Texto alternativo que aparecerá ao colocar o mouse sobre seu banner.
  • 180 x 50 – Tamanho da caixa que será exibida com o código do seu banner.
O resultado ficará similar ao abaixo:


4. Publicando o código de divulgação


Feito isso, o passo mais simples: basta adicionar um gadget de HTML/JavaScript em seu blog, adicionando o código criado no item 3. Quanto maior o destaque que você der ao banner, maior a chance dele ser visto e publicado em outro site.

5 - Criando uma Política de Parcerias


Outra dica que dou – embora não seja obrigatória – é que você crie e divulgue uma Política de Parcerias para seu site ou blog. Por exemplo: qualquer site pode ser seu parceiro ou você evitará conteúdo ilegal? É interessante deixar todos os pontos claros, para evitar parcerias que não sejam interessantes para você.
Como exemplo, leia a Política de parcerias do Tutors de Tudo

Pronto! Se você seguiu os passos, já tem um banner para o seu site. No início, a procura por parcerias pode demorar a aparecer. Com o tempo – e se você tem um site de qualidade – é natural que elas surjam. Outra possibilidade é você propor parcerias a outros blogs. É uma escolha pessoal.
Agora, se você achou este processo complicado, é possível fazer todo esse trabalho automaticamente em um site, embora haja algumas limitações. Para saber como fazer isso, leia o artigo Um banner para seu site de forma fácil.

Créditos: Tutors de Tudo 

Como colocar Leia mais no blog !

Como colocar Leia mais no blog !
Leia mais , um recurso muito bom e interativo que podemos usar tanto em blogs como em sites . O Leia mais é nada mais nada menos que , uma imagem ou link direcionando para a página de postagem de tal . Muito eficiente porque obriga o leito a navegar pelas páginas do seu blog , e com isso você ganha mais visualizações no seu website/blog . Ele reduz a postagem na página inicial do blog, para que o leitor tenha que clicar no leia mais ou em uma imagem afim de ser redirecionado para página de tal postagem. Enfim , eu acho que você ja entendeu o para e o porquê de usarmos o Leia mais, então vamos aplica-lo .


Primeiramente, Entre na aba Design >>Editar HTML
Já no campo de edição , você pra precionar a tecla CTRL+F e vai procurar
Pela seguinte tag :  </head>
Achando a tag , você vai colar o próximo código acima dela.

<script src='http://capas-coyoteevolution.webs.com/leiamaiscoyote.js' type='text/javascript'/>

Após isso , você vai salvar o modelo, e clicar em  Expandir modelo de widgets, e vai repetir o mesmo procedimento de antes.
Você vai aperta a tecla CRTL+F sendo que dessa vez vai procurar pela tag:
<data:post.body/>

Achando a tag, você ira subtituir pelo seguinte código.

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:center'><a expr:href='data:post.url'><center><img src='https://lh3.googleusercontent.com/-bjV5cIz8tNg/TbRHTVQJf_I/AAAAAAAABhI/dlXYr9_KyU4/s288/Untitled-1.png'/></center></a>
</span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

Após isso, salve o modelo e aproveite o seu novo widget,
Não esqueça de nos contar como foi sua experiência nos cometários abaixo!

Como colocar Leia mais no blog !
Leia mais , um recurso muito bom e interativo que podemos usar tanto em blogs como em sites . O Leia mais é nada mais nada menos que , uma imagem ou link direcionando para a página de postagem de tal . Muito eficiente porque obriga o leito a navegar pelas páginas do seu blog , e com isso você ganha mais visualizações no seu website/blog . Ele reduz a postagem na página inicial do blog, para que o leitor tenha que clicar no leia mais ou em uma imagem afim de ser redirecionado para página de tal postagem. Enfim , eu acho que você ja entendeu o para e o porquê de usarmos o Leia mais, então vamos aplica-lo .


Primeiramente, Entre na aba Design >>Editar HTML
Já no campo de edição , você pra precionar a tecla CTRL+F e vai procurar
Pela seguinte tag :  </head>
Achando a tag , você vai colar o próximo código acima dela.

<script src='http://capas-coyoteevolution.webs.com/leiamaiscoyote.js' type='text/javascript'/>

Após isso , você vai salvar o modelo, e clicar em  Expandir modelo de widgets, e vai repetir o mesmo procedimento de antes.
Você vai aperta a tecla CRTL+F sendo que dessa vez vai procurar pela tag:
<data:post.body/>

Achando a tag, você ira subtituir pelo seguinte código.

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:center'><a expr:href='data:post.url'><center><img src='https://lh3.googleusercontent.com/-bjV5cIz8tNg/TbRHTVQJf_I/AAAAAAAABhI/dlXYr9_KyU4/s288/Untitled-1.png'/></center></a>
</span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

Após isso, salve o modelo e aproveite o seu novo widget,
Não esqueça de nos contar como foi sua experiência nos cometários abaixo!