Imagem No T�tulo Da Postagem
titulo das postagens, isso serve para deixar bem localizado o inicio de cada um dos textos afinal tem alguns modelos de template que as coisas ficam juntas demais, portanto seria bom ter algo que destacasse o inicio de cada um dos posts do blog.
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, em nosso blog � 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(http://img195.imageshack.us/img195/668/iconebig.jpg);
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.
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, em nosso blog � 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(http://img195.imageshack.us/img195/668/iconebig.jpg);
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.
Nenhum comentário:
Postar um comentário