Oiie Meninas!! Hoje eu vou ensinar a vcs como personalizar o titulo do post. Fica muito fofo e acho que, dependendo do blog o titulo combina muito. Abaixo eu irei mostrar só um exemplo, mas se eu encontrar novos modelos eu atualizo este post ou crio outro.
Vamos lá??
TITULO COM IMAGEM:
1- Vá em modelo, editar html, clique em CTRL+F e procure por:
/* Posts
2- Abaixo do código procurado, terá vários outros códigos. Apague-os e cole este:
h3.post-title {
background: url("http://i.imgur.com/JnRmihp.png") center repeat; /* URL da imagem do plano de fundo do titulo*/
text-align: center; margin-right: -5px; margin-left: -5px;margin-top:-20px;-webkit-border-top-left-radius: 10px; padding: 5px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;box-shadow: inset 0 0 15px #839dcf; /* Cor da sombra ao redor da postagem*/
-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;font: normal normal 25px Lobster;color: #fff; -webkit-transition-duration: .50s;}h3.post-title a {font: normal normal 25px Lobster;color: #fff; -webkit-transition-duration: .50s; /* Cor do titulo*/}h3.post-title a:hover {text-shadow: 0 0 15px #476aaa; -webkit-transition-duration: .50s; /* Cor da sombra do titulo ao passar o mouse*/
}
h3 { color: #6b97e0; font: normal normal 25px Lobster;
}.post-outer {margin: -10px -10px 30px;background:#fff; /* Cor do fundo da postagem*/
padding: 5px 5px;box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;padding: 5px;border-bottom:5px #b1c1df solid;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}.post-body {line-height: 1.4;position: relative;}.post-header {margin: 0 0 1em;line-height: 1.6;}.post-footer-line-1{border-bottom: 1px dotted #b1c1df;font-size:12px;}.post-footer-line-2{border-bottom: 1px dotted #b1c1df;font-size:12px;}#blog-pager {font-size: 140%;}#comments {background: #cccccc none repeat scroll top center;padding: 15px;}#comments .comment-author {padding-top: 1.5em;}#comments h4,#comments .comment-author a,#comments .comment-timestamp a {color: #000000;}#comments .comment-author:first-child {padding-top: 0;border-top: none;}
.avatar-image-container {
margin: .2em 0 0;
}
3- Você pode modificar algumas coisas que não quiser, eu anotei quais são alguns. Mas, eu não anotei todos então caso queira mudar algo na qual eu não anotei, terá de procurar. Pois eu não consigo procurar tudo e anotar tudo neste grande código.
LEGAL NÉ?? BEIJOS
Nenhum comentário:
Postar um comentário