segunda-feira, 27 de fevereiro de 2012

Personalize os títulos do gadget (sidebar)

cooooooooool


Olá pessoas, como estão? 

O tutorial que trago hoje foi a pedido da leitora Thayná (minha xara q-q) do blog The perfect girls. É sobre os títulos do gadget da sidebar. Ah! Quero agradecer a Débora Morais pelo código.

Modelo - editar html - Ctrl+F ou F3 e procure por:  
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
vai aparecer destacado e de laranja ou amarelo abaixo dele coloque o código:

.sidebar h2 {
text-align:center;
background-color: #EEB4B4;
padding:2px;
border: 1px solid #8B6969;
-webkit-transition:0.4s;
display:inline;
float:right;
margin-top:-21px;
text-shadow: 0px 1px 1px transparent;
}

ou procure por:

}]]></b:skin> 

vai aparecer destacado e de laranja ou amarelo e acima dele coloque o código:

.sidebar h2 {
text-align:center;
background-color: #EEB4B4;
padding:2px;
border: 1px solid #8B6969;
-webkit-transition:0.4s;
display:inline;
float:right;
margin-top:-21px;
text-shadow: 0px 1px 1px transparent;
}


Ps:.  como usamos bastante código em cima da tag }]]></b:skin> recomendo que você use em cima de todos os códigos, caso ao contrário poderá haver erro.  Portanto escolha a primeira opção. Procure pelo código: 
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {

Mude apenas o que marquei de verde e vermelho. Se bem que, se você entender melhor de Html, edite por sua conta. Mas... Você que não, mude apenas o que eu disse, ok? A fonte e a cor fica determinado por você nas próprias configurações do blog.

Tabelas de cores disponibilizadas aqui no blog ou neste site e para as bordas

border: 2px dotted #000000

border: 2px dashed #000000

border: 1px solid #0000FF

border: 4px double #FF0000

border: 3px groove #6666FF

border: 4px ridge #FFFFCC

border: 3px inset #FFFF99

border: 2px outset #6699FF

Beijos :*



4 comentários:

  1. Uauuuuuuu, adorei o tutorial, eu queria mesmo esse efeito!! :), vou aplicar no próximo layout do AP!!!

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  2. Oi adorei o post, muito bom o tutorial, voce explicou bem!


    http://novidadesdatekinha.blogspot.com

    ResponderExcluir
  3. depois de um século,eu comento o post que eu amei,testei ele em um blog teste,é super fácil *-*

    beijos

    theperfect-girls.blogspot.com

    ResponderExcluir
  4. Adorei o tutorial, vou tentar fazer isso no próximo layout do meu blog, os gadgets irão ficar lindos.
    http://i-teenbr.net.tc

    ResponderExcluir

Hey!
Fique a vontade ao comentar! Sem xingamentos por favor!

Muito obrigada!♥