Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

22/08/2011

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,
9 Comentários
Comentários

9 comentários:

  1. Flor, uma ótima semana pra vc!!! Um lindo dia, que Deus te proteja sempre, bjusss

    http://angelmartinss.blogspot.com/

    ResponderExcluir
  2. Ahhhhhhh... quanta coisa... me confundi toda... mais era isso que queria aprender e li e reli e nada... não entendi nada... kkkkkkkk... vou respirar, tomar folego e voltar aqui quando estiver sozinha em casa!! Ahhh... uma dica boa e vc dizer que seria bom as pessoas fazerem um Blog de teste, assim antes de fazer algo faz no Blog de teste e se tudo der certo vc aplica no seu Blog!! EU AMEI... AMEI MESMO O TUTORIAL!! se eu fizer e der certo, com certeza coloco os creditos para seu Blog!! rsrsrsrs... Bjs e bom inicio de semana!!

    ResponderExcluir
  3. oii, muito lindo o post adorei!!
    Adorei seu selinho viu...obrigada
    bjss *-*
    http://territoriodascompradorasdelivro.blogspot.com/

    ResponderExcluir
  4. OIE AMEIIII O SEU BLOG ! TÁ MUITO FOFO !

    VISITA LÁ O MEU http://mnteen.blogspot.com/

    ResponderExcluir
  5. Ehhhhhhhhhh... consegui no meu Bog de teste, li com calma e prestei bem atenção, o que tava pegando pra mim e que eu não sabia a largura do meu layout, mais daí eu lembrei que no ajuste da largura tem o numero exato, essa tbm é uma boa dica!! Bjs e amei, assim que sobrar um tempinho vou fazer no meu BLOG!! Bjks

    ResponderExcluir
  6. oie flor... sou louca pra aprender mas nao consigo.. ja li um montao de coisa e nada... queria deixar meu blog assim bem gracinha... mas nao consigo :/

    de qualquer forma... passei pra deixar um abraço
    http://quemerouboudemim.blogspot.com/

    ResponderExcluir
  7. oiii..so queria uma ajudinha, como vc fez o menu lateral? estou apanhando mto pra saber, todo organizadinho...obgada...

    ResponderExcluir
  8. olá garota, ameii o blog e já usei algumas dicas no meu mais recente blos
    Bjussss
    e querendo me visitar e ver o resultado acesse:
    http://falandoemesmaltes.blogspot.com.br/

    ResponderExcluir
  9. amei as dicas, e já estou seguindo este blog, se quiser conferir o resultado das tuas dicas no mu mais recente blog é só acessar:
    http://falandoemesmaltes.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados