Sempre gostei de mexer com layouts de blogs, apesar de não ter nenhuma formação ou curso na área. Meu marido é formado em Análise e Desenvolvimento de Sistemas e já tentou me ensinar algumas coisas de linguagem HTML, mas eu não tenho muita paciência (é muita loucura). Eu gosto mais da parte gráfica e tudo o que fiz no blog aprendi com outros blogs em tentativa e erro. 

Esse post é para contar todos os tutoriais que uso usei por aqui e também é uma forma de dar créditos para esses blogs que me ensinaram tanto. Tenho consciência de que já mexi muito no html desse blog e tem coisas que acho que são meio que irreversíveis, pelo menos para que eu consiga arrumar. O blog tem alguns erros e alguns tutorias não funcionam, talvez não por erro do tutorial, mas porque o meu template já foi muito modificado. Isso pode acontecer com você também. Já usei muitos templates prontos e modifiquei, mas como tive muitos problemas, usei a base de um template básico do próprio blogger, só modifiquei.

OBS: As informações abaixo são sobre o template anterior do blog (foto no final da postagem). No template atual não usei praticamente nenhuma dessas ferramentas, pois já veio pronto, do jeito que queria.

Parte gráfica
Uso o programa Inkscape para fazer todos os detalhes de desenhos. O programa é ótimo e gratuito. Demorei para conseguir mexer nele, mas ele tem muitos recursos parecidos com o Corel Draw: desenho, corte, vetor, etc. Há muitos tutorias na internet sobre ele.
Descobrir o código de uma cor
Por indicação de alguém que não lembro, uso há muito tempo o Color Pix para descobrir o código de qualquer cor que esteja na tela, é só colocar o mouse em cima da cor e vai aparecer o código dela.

Widget do tumblr
As imagens que estão abaixo do logo são do meu tumblr e eu usei esse site para criar o widget.

Widget instagram
Para adicionar o instagram eu usei esse site.

Numerar as páginas do blog
Para tirar as frases "Início", "postagem anteriores" e substituir por números nas páginas usei o tutorial da Elaine Gaspareto.

Fontes
Eu tenho várias fontes extras que baixei no Dafont e fica difícil escolher uma fonte com tantas opções. Encontrei o site Wordmark onde você pode escrever o texto que você deseja e ele mostra como ficaria esse texto em todas as fontes que estão instaladas no seu computador.

A fonte do título da postagem é do próprio blogger.
As fontes do logo que criei são: KG One More Night e Courier New.
A fonte da barra lateral é a Glasket.

Baixar icones
O Iconfinder é ótimo e tem opções pagas e gratuitas. 

Lista de e-mails
O MailChimp é bastante conhecido e usado na blogosfera por ser um serviço de qualidade, seguro e que pode ser gratuito até um determinado número de e-mails enviados por mês. Desde blogs até empresas e lojas usam o serviço para enviar e-mails para os que se cadastraram.

Tornar uma imagem clicável 
O Image map é uma gambiarra milagrosa para os que não entendem de html. Não estou usando hoje, mas já usei. Você consegue fazer um "mapa" de links na sua imagem, ou seja, você pode, por exemplo, criar um menu com texto e imagens e adicionar links para cada lugar que você desejar.

Autor, data, categoria e comentários em baixo do título da postagem
Esse tutorial que encontrei é diferente de tudo que já tinha visto, achei bonito, mas modifiquei os ícones.

Categorias e blogs que amo
Isso é um exemplo que daria para ser feito no Image map, mas ficaria mais pesado e poderia dar erro, por serem muitas imagens. Eu criei as imagens já no tamanho que eu gostaria no Inkscape, salvei e adicionei em outro blog de testes que eu tenho. Isso é necessário para pegar o link da imagem nesse blog de teste e colocar dentro do código html. Depois eu criei um widget html e coloquei os códigos de cada imagem, um em baixo do outro, para dar o resultado que vocês estão vendo. Sim, da trabalho. 

O código que uso não sei onde eu vi, alias, acho que até modifiquei com ajuda do meu marido. Uso esse código há muito tempo. É assim:

<center><a href="LINKQUEVAIABRIR" target="_blank"> 
<img src="LINK DA IMAGEM" /> 
</a></center>

Se você não quiser que fique centralizado é só deixar sem o <center>, assim:
<a href="LINKQUEVAIABRIR" target="_blank"> 
<img src="LINK DA IMAGEM" /> 
</a>

Botão voltar ao topo / voltar para cima
Usei esse tutorial e criei o botão no Inkscape.

clique na imagem para abrir maior
É isso! Espero ter ajudado quem precise.
Até a próxima!