Mostrando postagens com marcador Imagem No Título Da Postagem. Mostrar todas as postagens
Mostrando postagens com marcador Imagem No Título Da Postagem. Mostrar todas as postagens
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:
Postagens