Olá galerinha,esse é meu primeiro post como colaboradora por um dia e espero
que gostem. Já reparou quantas vezes entrou em um blog e eles tinham uma caixinha como essa
abaixo?
E você ficou doido de vontade de ter uma e não sabia nem por onde
começar,então,eu vou mostrar um jeito super fácil e prático de fazer sua
própria caixinha de banner com imagem personalizada e tudo :)Vem conferir :D
Primeiro de tudo,você precisa ter a imagem do seu banner,para fazê-la você
pode usar o Photoshop,Photoscape...Mas eu prefiro usar um editor online,e creio
que também vai ser mais fácil para vocês,vá em www.pixlr.com/editor e coloque em Create
a New Image
Não existe um padrão definido de tamanho a ser usado,isso depende do tamanho
da sua sidebar(que fica na lateral do blog,com as descrições de autor,as
categorias do blog...) mas eu recomendo fazer igual eu deixei na imagem
abaixo,a parte Transparent eu recomendo deixar porque aí sua imagem ficará boa
em qualquer fundo.
Agora,basta você escolher uma imagem de enfeite,escrever o nome do seu blog
e está pronto. Depois de salvar,precisamos hospedar a imagem,porque ela vai ganhar um link
que será usado no banner,eu recomendo usar o www.imgur.com/
é só colocar em Upload Images e selecionar a imagem que deseja.
Vá em Layout>Adicionar Gadget>HTML/Java Script< Cole o código abaixo:
<div align="center">
<img alt="NOME DE SEU BLOG"
title="NOME DE SEU BLOG"
src="ENDEREÇO DE SUA IMAGEM"
border="0" width="LARGURA DE SUA IMAGEM"
height="ALTURA DE SUA IMAGEM"/><textarea rows="3" cols="17"
onfocus="this.select()" onmouseover="this.focus()"
name="textarea"><center><a href="ENDEREÇO DE SEU BLOG"
target="_blank"><img alt="NOME DE SEU BLOG" title="NOME DE SEU BLOG" src="ENDEREÇO DE SUA IMAGEM"
border="0" width="LARGURA DE
SUA IMAGEM" height="ALTURA
DE SUA IMAGEM"/></a></center>
</textarea></div>
Substitua todas as partes coloridas adequadamente e salve o gadget
posicionando-o onde achar melhor. No meu exemplo,vai ficar assim :)
<div
align="center"><img alt="Blogs Up" title="Blogs Up" src="http://i.imgur.com/xflj3Wa.png" border="0" width="250" height="250"/>
<textarea rows="3" cols="17" onfocus="this.select()" onmouseover="this.focus()" name="textarea">
<center><a href="http://www.blogsup.com.br/" target="_blank"><img alt="Blogs Up" title="Blogs Up" src="http://i.imgur.com/xflj3Wa.png" border="0" width="250" height="250"/></a></center>
</textarea></div>
Prontinho,viram como é fácil?Agora não tem desculpa para não fazer o seu :) Qualquer dúvida é só me procurar viu :)
Beijos ^.^
