Gabriela Leão // OFICIAL: Imagem ao lado do titulo da postagem

30 de mar. de 2011

Imagem ao lado do titulo da postagem

粉红,是我无法忘怀的那抹色彩。 - 人人小站

Vamos aprender?

Fazer isso é bem simples entre na pagina editar HTML e procure por H3{... } ou o estilo que controla o titulo do blog que também pode ser h2 em alguns casos, é assim: 

post h3 a, .post h3 a:visited, .post h3 strong{….}

Para ter certeza que está modificando o estilo certo antes de começar faça um teste, coloque border: 1px solid #000000; dentro das chaves no estilo que você acha que é o certo no seu modelo isso faz aparecer uma borda preta em volta do estilo, então clique para visualizar o blog se apareceu a borda nos títulos da postagem é porque este é o lugar certo. Caso o fundo do seu blog seja preto ou escuro faça o teste usando ffffff em vez de 000000 para a borda ficar branca.

Agora vamos colocar uma imagem ao lado do título da postagem insira o seguinte código:

background-image: url(URL DA IMAGEM AQUI);
background-repeat: no-repeat;text-indent: 30px;
background-position: left top;

Você só precisa hospedar uma imagem e colocar o endereço no lugar desta que está no exemplo, cuidado na hora de fazer a imagem para que ela não seja grande demais senão aparecerá somente uma parte dela. Outro ajuste necessário é o valor 30px no final da segunda linha, isso é um recuo de texto, ou seja, quando maior o numero mais espaço terá o texto da margem esquerda no caso de não usar o texto centralizado, então é só modificar esse numero para que o título não fique sobre a imagem. Agora é só visualizar e se ficou como você queria salvar as alterações no blog.


Espero ter ajudado!

4 comentários:

  1. É sempre bom dar essas dicas, nem todo mundo sabe como pesquisar e aprender a fazer!
    Beijos, Fá.
    www.dospescabeca.blogspot.com

    ResponderExcluir