NOVO: Tutorial 2 - Imagem no "H2"

A semana começa com mais um tutorial, e dessa vez eu escolhi a sugestão da minha amiga Nathy que gostaria de saber como se coloca uma imagem nos títulos dos Gadgets, como essa borboleta que eu pus aqui no DSM.
Escolhi esse tutorial principalmente porque é super-fácil, e deixa o blog com uma "cara" mais atraente... Como eu disse no Tutorial anterior, é sempre bom você ler até o final para saber todas as formas de realizar esse tutorial.

Ah, é bom você ter um blog de testes para testar o tutorial antes de fazer no seu blog. Assim, qualquer dano que você fizer não vai prejudicar seu Template atual.

1º Passo - Escolher a imagem:

A imagem vai à gosto, é claro, mais vale lembrar algumas dicas básicas para você não errar na hora de escolher a imagem.
Escolha sempre imagens pequenas, de no máximo 60px. Eu recomendo uns 46px, por aí. Se a imagem for muito grande, o espaço entre o título e o Gadget ficará muito grande.
Se seu template for branco, pode usar imagens com fundo branco. Se for colorido, prefira imagens com o fundo da mesma cor ou com fundo transparente. O melhor formato para transparência é o ".pgn".
Um bom site para encontrar imagens já prontas é o "Findicons", dê uma passadinha lá!!!

2º Passo - Hospedar a imagem:

Para saber como hospedar uma imagem clique aqui. Caso a imagem já esteja em algum lugar na net, é só você copiar o endereço dela (clique com botão direito, no Firefox, e clique em "Copiar endereço da imagem". No Explorer, se eu não me engano, clique com o botão direito, depois "propriedades" e ache o endereço na tela que abrir (não tenho muita certeza, não uso o IE há muito tempo)).

4ºPasso - Colocar o código:

1ª Forma - Adicionar CSS:

Antes de começar, vou avisando que o código vai mexer também no cabeçalho da data. Daqui a pouco eu explico como fazer para que não fiquem iguais.

Vá no Designer do Modelo, que fica na guia Modelo> Personalizar (o botãozinho laranja abaixo do seu template atual). Ao abrir completamente o Designer do Modelo (tem que aparecer uma visualização do seu template atual abaixo), clique na guia Avançado (última guia)> Adicionar CSS (última opção da lista), vai abrir uma caixa branca onde está escrito em cinza: "Adicionar o CSS aqui para substituir estilos existentes". Aqui nós vamos colar o seguinte código:

h2 {
  width: 140px;
  height:46px;
  padding-left:47px;
  text-align: left;
  line-height: 1.4em;
  padding-top: 10px;
  color: #000000;
  background: url(URL_DA_IMAGEM) no-repeat left center;
}

No lugar de URL_DA_IMAGEM, cole o endereço da sua imagem já hospedada. É importante que seja entre os parênteses e que tenha o http://

Os trechos em vermelho precisam ser adaptados de acordo com seu template. Veja abaixo o que você deve fazer:

widht: largura do h2. Vá aumentando ou diminuindo o número de acordo com a largura da sua coluna;
height: altura do h2. Deve ser a mesma altura da sua imagem;
padding-left: deve ser a mesma largura da sua imagem. Esse número posiciona o texto depois da imagem;
color: cor da letra nesse código, #000000 é a cor preta. Para saber alguns códigos das cores clique aqui.

Como eu disse, esse código vai mudar tanto o H2 quanto o cabeçalho de data. Caso você não queira a data do jeito que ficou, adicione o seguinte código abaixo do primeiro:

h2.date-header {  background: tranparent; text-align: left; width: 400px; margin: 3px;}

Widht é a largura do cabeçalho da data. Diminua ou aumente o número de acordo com o template.

Por último, clique em "Aplicar ao Blog", quando tudo estiver OK.

2ª Forma - Editar HTML:

Primeiro, vá na guia Modelo > HTML. Aparecerá uma grande caixa cheia de códigos. Clique em qualquer lugar do código e aperte Ctrl+F no seu teclado, na caixa que apareceu (Search), cole o seguinte código: ]]></b:skin> e aperte a tecla "Enter".

Esse trecho do template ficará em destaque, antes desse código, cole o mesmo código da forma anterior. Clique em Visualizar para ver se está tudo OK e quando tudo estiver pronto, clique em Salvar Modelo.

Mil Sweetkisses,