Como deixar seu blog mais bonito?

Não sei se vocês notaram, mas dei uma modificada no visual do blog.
Pois é, não sou web designer e não entendo muito de códigos e afins, por isso dei uma pesquisada  legal em muitos sites para lograr êxito nas minhas tentativas de decorar esse blog que, é minha casinha virtual e já que é assim tenho que cuidar bem dela para que os visitantes entrem, gostem e voltem novamente a me visitar né?

Reuni nesse post algumas diquinhas resumo das várias pesquisas e de conteúdos dos blogs que no final darei os devidos créditos ok?

Vamos aos códigos básicos, códigos em HTML que fazem parte do quase total conteúdo estético do meu blog.

Código  para colocar imagem:

<img src="url da imagem" width="250"height="60"/>

Onde, width é a largura e height, a altura.
Os valores são o tamanho da imagem 250x60.

URL da imagem - você pode hospedar sua imagem num site externo gratuito (picasa,4shared, dentre outros) ou pode fazer aqui no blog mesmo, COMO?

É só simular uma postagem normal ( NOVA POSTAGEM - inserir a imagem desejada e apertar na aba Editar HTML.

Assim, você vai procurar dentro do código que vai aparecer, uma URL entre aspas ("http:// ......jpg") , pronto é só copiar e colar dentro do código acima.
IMPORTANTE: não retire as aspas dos códigos, essa alteração implica em erro.



Imagem com link/banners:

<a href = "url"><img src="url da imagem" width="250"height="203"/> </a>

Aqui dois códigos em um só!
Primeiro você coloca a url - http://www.desejosdeconsumowish.blogspot.com
Depois a url da imagem e pronto! Ao clicar na imagem você é direcionado ao link que deseja.
Esse código foi o mais usado por mim aqui no blog!


Posicionando as Imagens:


Se você quer que a imagem fique à esquerda de um texto:

 <img align="left" src="http://www... imagem.gif">

Para que fique à direita:

<img align="right" src="http://www...imagem.gif">

Para que fique no centro:

<img align=''center'' src="http://www...imagem.gif">



Texto alinhado ao topo da imagem:

 <img align="top" src="http://www... imagem.gif">

Texto alinhado ao rodapé da imagem :

 <img align="bottom" src="http://www... imagem.gif">

Texto alinhado ao centro da imagem : 

 <img align="middle" src="http://www... imagem.gif">

Molduras em imagens:

Use <img src="imagem.gif" vspace="30" para espaço vertical entre o texto e a imagem.

Use <img src="imagem.gif" hspace="30" para espaço horizontal entre o texto e a imagem.

Dica: Use <img src="imagem" Alt="descrição"> para uma descrição alternativa da imagem. 
Para usar uma imagem como link, sem borda, use < img src="imagem" border="0">

Imagens ou textos lado a lado: 

3 colunas: (CLIQUE AQUI E VEJA O EXEMPLO)

<center><a href="link"><img src="endereço da imagem" border="0" /></a><div style="float:left; width:33%">conteudo aqui ( TEXTO/LINK OU IMAGEM)</div>
<div style="float:left; width:33%">conteudo aqui</div>
<div style="float:left; width:33%">conteudo aqui</div>
</center> <div style="float:left; width:33%">conteudo aqui</div> <div style="float:left; width:33%">conteudo aqui</div> </center>

O valor 33 é utilizado porque são 3 colunas se usar outra quantidade altere esse valor para que a soma seja algo próximo de 100 mas sem ultrapassar, por exemplo para duas colunas poderiamos usar 49 em cada uma delas.


3 colunas +1 no fim:

<center><div style="float:left; width:33%">conteudo aqui</div><div style="float:left; width:33%">conteudo aqui</div><div style="float:left; width:33%">conteudo aqui</div><div style="clear:both">conteudo aqui</div></center>

Link:

<a href="url">
 http://www.desejosdeconsumowish.blogspot.com

Link em texto:

<a href="url"> texto</a>
Desejos de Consumo

Links em nuvens: (nuvens de tags)

<a href="url"> texto</a> <a href="url"> texto</a> <a href="url"> texto</a>

Links em listas:

<a href="url"> texto</a> <br>
<a href="url"> texto</a> <br>

Onde <br> = quebra de linha/fim da linha

Tags:

<p> = espaço

<hr> = linha/separador/borda

Ufa!

Bem gente, é isso que sei...Outras coisas vou fazendo na hora e, como não sou da área, não sei reproduzir depois. Mas, como disse no começo desse post, darei os devidos créditos aos blogs que me ajudaram na construção do meu.

Para editar minhas fotos eu uso os programas: Paint e por indicação da Simone do Unhas de Bispo baixei o Photoscape, que é simplesmente maravilhoso e facinho de usar. Porém, logo quando baixei não sabia como usar muito bem e nas minhas buscas virtuais encontrei um blog-presente que tem tudo o que você tem que saber sobre o Photoscape. Se quer fotos legais, efeitos maneiros, gifs, banners e tudo mais, visite o PhotoScape Edições! Lá tem tudo bem explicadinho e você ainda encontra vários pacotes de fontes, brushes, papers...Adoro!

Também indico dois sites que são fofuras demais gente! Ótimos para deixar seu site mais completo e com cara de menina ryca! O da Evelyn que eu acho que todo mundo já conhece, é bem popular. Tem coisinhas legais pra colocar no blog e além disso ela disponibiliza templates lindos gratuitamente.
Hoje fui direcionada ao site da Liah e simplesmente amei! Foi lá que aprendi a tirar o fundo sombreado das fotos do blog e a melhorar os comentários pelo Disqus.


Agora, quando o assunto é HTML puro, recorri ao Dicas para Blogs e arrasei colocando as bandeirinhas de tradução, LinkWithin, enfim...A maioria do que sei é por conta desse blog!
Os blogs  Bloggersfera e Templates e Acessórios também me ajudaram bastante.

Enfim gente, é isso. Espero ter ajudado vocês de alguma maneira.
O assunto não é meu ponto forte, nem o foco daqui do blog, mas como blogueira devo levar informação a quem precisa e, se no momento alguém precisa, que bom que ajudei viu?

Tutoriais bacanas:

Como fazer um banner? E como fazer a caixinha Link-me? ou desse jeito.
Como colocar assinatura no rodapé?
Como usar imagens no menu do blog? (fazer páginas) + Como mapear imagens?
Como colocar a caixa 'Encontre-nos no Facebook' ou caixa de seguidores do Twitter? + Como colocar timeline do Twitter?
Como colocar slide das postagens recentes?



Xêru