14/05/2012

tutorial personalizar o titulo dos posts

achei um tutorial incrivel no cherry bomb  por isso os créditos  vão a ele espero que todos  gostem!!

T
em vezes que bate aquela falta falta de criatividade na hora personalizar a sidebar não é? O post de hoje vai ajudar um pouco nessas horas. Trouxe alguns estilos prontos para os títulos dos gadgets. Para usá-los é só copiar o código que gostar mais, e colar em um gadget de HTML/Javascript em seu blog. Bem fácil não é? Confira abaixo os estilos, espero que gostem!

ESTILO 1
<style>
/*Inicio título dos gadgets*/
.sidebar h2 {
  font-family: Verdana;
font-size: 14px;
text-transform: uppercase;
font-weight: normal;
text-align: right;
  color: #A71BDE; /*Cor da fonte*/
background: #EAE4ED; /*Cor do fundo*/
padding-right: 5px;
border-radius: 15px;
border-top: 3px solid #D1CBD4; /*Cor da borda de cima*/
border-right: 2px solid #D1CBD4; /*Cor da borda da direita*/
margin-bottom: 5px;
/* Estilos para titulo dos gadgets por www.bombadecereja.tk  Não retire os créditos */ }
</style>

Estilo 2
<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Georgia;
font-style: italic;
font-size: 14px;
font-weight: bold;
text-align: left;
color: #BAE0E8; /*Cor da fonte*/
border-left: 10px solid #FF78D6; /*Cor da barrinha lateral*/
padding-left: 5px;
margin-bottom: 5px;
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Estilo 3
<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Verdana;
font-size: 14px;
text-align: left;
color: #40250A; /*Cor da fonte*/
font-weight: normal;
background: #FFCCDF url('http://img194.imageshack.us/img194/4015/miniheart.png') no-repeat left top; /*Cor de fundo e imagem do topo*/
padding-left: 12px;
margin-bottom: 5px;
border-top: 3px solid #FA3497; /*Borda do topo*/
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Estilo 4
<style>
/*Inicio Titulo dos gadgets*/
.sidebar h2 {
font-family: Georgia;
font-style: italic;
font-size: 14px;
font-weight: bold;
text-align: left;
color: #40250A; /*Cor da fonte*/
background: url('http://img194.imageshack.us/img194/4015/miniheart.png') no-repeat left top; /*imagem do topo*/
padding-left: 12px;
margin-bottom: 5px;
/*Estilo para titulo dos gadgets por www.bombadecereja.tk Não retire os créditos*/}
</style>

Eles são bem simples, mas achei que ficaram bonitinhos =3 E vocês gostaram? ^^

4 comentários: