Como criar seu banner personalizado?

Olá Amigos e leitores do Arruma Blog, o post de como fazer templates/Layouts foi atualizado e esperamos que possa ajudar ainda mais.

Hoje falarei sobre criação de banner para blogs. Sim os selos para seu blog.







Antes de qualquer coisa, os banners não são selos, mas algumas pessoas insistem em falar a palavra para ambos. O que ainda confunde alguns é que a finalidade dada a um banner é muito mais do que divulgar, é dar uma importância maior como a de fazer propaganda direta ou indireta, e a de um selo não.

• Entenda a diferença entre Selo e Banner

Pelos novos padrões de banners da internet e de acorco com o site Abraweb as medidas de banners em pixels são:

120 x 600 (arranha-céu)
160 x 600 (arranha-céu largo)
180 x 150 (retângulo)
300 x 250 (retângulo médio)
336 x 280 (retângulo grande)
240 x 400 (retângulo vertical)
250 x 250 (janela pop-up quadrada)

Atualmente o tamanho conciderado padrão para os selos é 120x60, mas nada impede você de criar seu próprio tamanhao padrão em seu site, não ache que isto será usado em outros sites e não tente forçar seus parceiros e amigos a usarem também.
Na página do site Amigos do Rafa por exemplo há alguns tamanhos padrões de banners e alguns fora do comum.

Se você não quiser ou souber fazer um selo 100% original, há sites que podem ajudar como:
Como criar um banner | Crie seu banner on-line | Criando um banner no ImageReady | Banner animado * Sites externos com possíveis ajudas / Tutoriais

Então quais os procedimentos a serem feitos?

Em algum programa de editor de imagem (até mesmo o Paint da Microsoft) crie uma imagem relacionada com seu blog, com ou sem plano de fundo e o mesmo nome. Se você souber utilizar algum programa de edição de Gifs o seu selo sairá mais bonito e mais chamativo. Eu aconcelho o uso da ferramenta Fireworks atualmente da Adobe pois possibilita a criação de gif animado com fácil manuzeio, Photoshop ou até Corel Drawl. Não vá fazer um pisca-pisca nem algo de má qualidade e lembre-se que o tamanho padrão é 120x60 px.

Depois de tê-lo criado, salve ou exporte dependendo da ferramente e hospede-o na internet. Nesta parte você deve tomar alguns cuidados (isso vale para todas as imagens que você for usar em seu blog), como hospedar a imagem em um site bom e de confiança, aquele que você julga (e outros usuários também) bom e estável, pois ele carregará sua marca na blogosfera e se caso ele ficar fora do ar o seu blog será mal visto. Eu aconcelho serviços com cadastros como o Flickr.

Com o seu selo já hospedado e com o código da imagem anotado, chegou a hora de colocá-la em seu blog. Se você usa os serviços Google será necessário um Gatget de HTML/Javascript e se você usa o Blog Uol tenha muita atenção e é bom saber HTML. Em ambos aconcelho sempre fazer um backup do modelo atual, no Google indo em Layout > Editor HTML > Salvar modelo completo, na UOL indo em Configurações > Modelos de Blogs > Editor HTML *no fim da pág e na próxima página copiar as informações em bloco de notas.

Em qualquer que for o blog, seguindo os padrões de normalidade citado acima, o código para a inserção do seu selo e da caixinha link-me é o mesmo:

<center><img border="0" alt="Arruma Blog" src="http://uuuiiii.zip.net/ArrumaBlog.gif" title="Arruma Blog" /><br /> <br /> <br /> <label><textarea rows="3" cols="15" onfocus="this.select()" onmouseover="this.focus()" name="textarea"><a href="http://www.arrumablog.com/" target="_Blank" title="Arruma Blog"><img border="0" alt="Arruma Blog" src="http://uuuiiii.zip.net/ArrumaBlog.gif" title="Arruma Blog" /></a>
</center>

<br /> <center><img border="0" alt="Arruma Blog" src="http://uuuiiii.zip.net/ArrumaBlog.gif" title="Arruma Blog" /><br /> <br /> <br /> <label><textarea rows="3" cols="15" onfocus="this.select()" onmouseover="this.focus()" name="textarea"><a href="http://arrumablog.blogspot.com/" target="_Blank" title="Arruma Blog"><img border="0" alt="Arruma Blog" src="http://uuuiiii.zip.net/ArrumaBlog.gif" title="Arruma Blog" /></a>

Os dois são os mesmos códigos. Copie e edite apenas um.

Entendo o código

A 1ª linha é para chamar só o seu selo, como uma prévia para o leitor;
A 2º linha com a tag textarea é a caixa auto-selecionável com o código do seu selo;
A tag center é opcional e ser ve para centralizar o selo e a caixa;
a tag Alt é o nome que irá aparecer ao passar o mouse por cima tanto da imagem de ixibição do seu selo como no outro blog (que pegará o selo);
A tag href escrito endereço da imagem é o endereço da sua imagem ja na internet, aquele link que foi gerado no momento que você inviou o selo para o site. É o mais importante das etapas;
A tag target=_blalk serve simplesmente para que o seu blog não seja aberto na mesma página que a do seu grande amigo que te linkou, ele abrirá em outra janela, concidero muito importante;
Rows e Cols são linhas e colunas, algo como tamnho horizontal e tamanho vertical, um lugar onde você pode mudar o tamanho que ela aparece na tela do seu blog modificando os números na frente depois do sinal de '=';

Então é isso. Depois de ter colocado o código e seguido todos os passos acima, você terá configurado o seu banner e ele estará prontinho para ser usado, tal como o do Arruma Blog no topo do blog.

Para ajudar mais:
- Como colocar banners de outros blogs no meu?
- Como inserir informaçõe na coluna lateral do blog UOL?

Plagiar é crime. Dê os créditos :)