Imagem No Título Da Postagem
Olá galera, aqui é o Felipe do ''Portal Viciados Net'' e hoje vim ensinar a vocês como colocar imagens no titulo das postagens, que serve para deixar bem localizado o início de cada um dos textos, afinal, tem alguns modelos de template que as postagens ficam juntas demais, então seria bom ter algo que destacasse o inicio de cada post, vamos lá.
Fazer isso é uma atividade muito simples, entre na pagina HTML do seu blog, aperte ''crtl+f'' irá aparecer uma barra, digite ''H3'' se não der tente ''h2'' que pode ser também em alguns casos, no nosso blog é assim:
post h3 a, .post h3 a:visited, .post h3 strong{….}
Para ter certeza que está fazendo 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 é certo no seu modelo, isso faz aparecer uma borda preta em volta do estilo, então clique para visualizar o blog se aparecer a borda no título da postagem é sinal de que você está fazendo a coisa certa. Caso o fundo do seu blog seja de outra cor escura, faça o teste usando ffffff em vez de 000000, que é a borda branca.
Para colocar uma imagem ao lado do título da postagem insira o seguinte código:
background-image: url(Endereço da sua imagem);
background-repeat: no-repeat;text-indent: 30px;
background-position: left top;
Você só precisa hospedar uma imagem e trocar pelo o ''Endereço da sua imagem'' 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. Um 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 clique em ''visualizar'' e veja se ficou da maneira que você queria.
Obrigado!!
Equipe ''Viciados Net''
Créditos: Felipe Ghizini
Assinar:
Postar comentários
0 comentários:
Postar um comentário