Criando um banner com código html para parcerias entre blogs

Hoje você irá aprender como criar um banner com código html para fazer parcerias com outros blogs/sites. Bom, a primeira coisa que deve ter é um software de edição, sugiro que use o Adobe Photoshop, porém pode ser qualquer outro, desde que você possa redimensionar o tamanho da imagem como se faz no photoshop.

Os banners de parceria são simples com tamanho de 120x60 pixels e com um código para ser incorporado em outro blog, ou seja, no blog do seu parceiro. As parcerias por meio de banners é um modo de ser divulgado pela internet levando sua marca e também seu

Vou fazer este tutorial usando o Photoshop CS2 versão português.

Abra um novo arquivo (Ctrl+ N) com as dimensões:

120 largura por 60 de altura e resolução 72 conforme a figura abaixo.

Feito isso, você deverá aumentar o tamanho desse arquivo, pois o tamanho de 120x60 pixels é muito pequeno e a qualidade fica ruim. Com o tamanho maior fica melhor para edital. Então vá na aba Imagem ou Image (se for inglês seu programa) e clique em Tamanho da Imagem ou Image Size. Verifique se a opção "Manter Proporções" esteja marcada e aumente o valor de 120 para 600, perceba que o valor da largura aumentará para 300 pixels. Caso não aconteça isso, não tem problema, para manter a proporção digite esses valores mesmo, 600x300 pixels.

Pronto, agora você notou que ficou melhor para editar a imagem. Faça a sua arte, use a criatividade, porém eu sugiro que não seja muito enfeitado, é melhor somente uma ou duas cores no banner, assim como o meu aqui do lado direito, somente a figura do dinheiro e o texto azul.

Terminou a sua arte agora salve-a em formato JPEG (Ctrl + Shift + S) com o nome "banner 600x300". Em seguida já abra esta imagem que salvou e vá novamente em Imagem > Tamanho da Imagem (Image Size), reduza os valores para 120x60 e mantenha a resolução de 72. Após a redução salve novamente em formato JPEG com o nome "banner 120x60".

Agora você reduziu a imagem grande no formato original que será inserido em seu blog, falta apenas hospedá-la e copiar o código de incorporação da imagem. Para isso acesse o www.imageshak.us clique em "Browse" (1), depois selecione a opção "Não Redimensionar" (2) e clique em seguida no botão azul carregar/upload (3).

Feito isso, vão aparecer vários links para essa sua imagem, que são meios de inseri-la em fóruns, blogs, sites, etc. Você deverá ter uma conta no site, pois senão não consegue copiar nenhum link. Faça rapidamente a sua conta na janela que abrirá automaticamente após o carregamento da sua imagem. Em seguida já estará sua foto com vários links, copie o "link direto", abra um bloco de notas e cole ele, vamos usá-lo depois.

Agora vou passar um código pra você inserir e modificá-lo. Primeiramente, insira um gadget HTML/Javascript e deixe aberto. Copie o código abaixo e cole também no bloco de notas junto com o link direto da sua imagem.

<img src="LINK DIRETO IMAGEM" border="0" alt=""/>

<br />(120x60)<br/><textarea cols="20" rows="3" onfocus="this.select()" onmouseover="this.focus()">

&lt;a href="ENDEREÇO SEU BLOG" target="_blank" title="NOME SEU BLOG"&gt;&lt;img src="LINK DIRETO IMAGEM" border="0" alt="NOME SEU BLOG"/&gt;&lt;/a&gt;

</textarea>

Faça as alterações, insira o link direto da imagem que copiou anteriormente e colou no bloco de notas.

Para inserir o link direto da imagem, endereço do seu blog e o nome do seu blog deve inseri-los dentro das respectivas aspas, conforme o link acima onde todos estão entre aspas. Não remova nenhuma, tenha cuidado quando for fazer esse processo, selecione exatamente o texto colorido e faça as alterações.

Agora, copie e cole esse código modificado no gadget de HTML/Javascript e pronto!

Seu código deverá ficar assim:

(120x60)

</div><div><a href="http://www.afilia-web.blogspot.com" target="_blank" title="Afilia Web"><img src="http://img38.imageshack.us/img38/5654/banner120x60px.jpg" border="0" alt="Afilia Web"/></a></div><div>

Gostou desse tutorial?

Curta a página do Afilia Web no Facebook, Clique aqui ou na janela do facebook ao lado!

Comente!