16 de mai de 2012

Estilos para títulos dos gadgets


Olá meus anjos, como vão? Hoje vim trazer um tutorial bem legal. Quando a gente faz um blog, podemos escolher o modelo, mais os modelos do blog são muito sem graça, concordam? Então temos que personalizar esse modelo. Hoje eu vim trazer alguns estilos de títulos para gadgets. Pra usá-los é só copiar o código que você mais gostar e fazer um gadget HTML/JavaScript no seu blog. Simples, né? Confira esses:




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>

Esses vocês vão fazer de outra maneira, basta colar o código do estilo que mais lhe agrade, acima da tag: 
]]></b:skin> no seu HTML (Modelo &gt; Editar HTML &gt; Prosseguir) . Você pode apertar CTRL+F para buscar.
Escolha o seu estilo abaixo:


             


.sidebar h2 {
text-align: center;
background:#8DEEEE;
padding: 8px;
font-size: 18px;
color:#528B8B;
border: outset #79CDCD;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 20px; 
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

     



.sidebar h2{
text-align:center;
border-bottom: dashed 1px #ec92c6;
font-size: 18px;
color: #000;
width: 180px; /* Altere de acordo com a largura da sua coluna*/
height: 10px;
text-shadow: 1px 1px 0 #ccc;
}

 
         



.sidebar h2{


text-align:center;


background: #DDA0DD;


padding: 5px;


font-size: 18px;


color: #fff;


width: 180px; /* Altere de acordo com a largura da sua coluna*/


height: 25px;


-webkit-border-radius: 10px;


-moz-border-radius: 10px;


border-radius: 10px;


-webkit-transition: 0.5s;


text-shadow: 1px 1px 0 #ccc;


}


.sidebar h2:hover{


text-align: center;


background: #DA70D6;


padding: 5px;


font-size: 18px;


color: #fff;


width: 180px; /* Altere de acordo com a largura da sua coluna*/


height: 25px;


-webkit-border-radius: 10px;


-moz-border-radius: 10px;


border-radius: 10px;


-webkit-transition: 0.5s;


text-shadow: 1px 1px 0 #ccc;


}

 


 .sidebar h2 {


background: #f5f5f5;


border-bottom: 3px double #40E0D0;


font-family: arial;


font-style: italic;


font-size: 10px;


font-weight: normal;


text-align: right;


text-shadow:#fff 0px 0px 1px;
}

 


 .sidebar h2 {

background: #000;

font-family: arial;

color: #fff;

font-size: 10pt;

font-weight: normal;

text-transform: uppercase;

border-bottom: 1px solid #F0F8FF;

text-align: center;

text-shadow:#fff 0px 0px 1px;

border-radius: 10px;

}



 .sidebar h2 {


background: #7AC5CD;


color: #fff;


font-weight: normal;


text-align: center;


font-family: century gothic;


-webkit-border-bottom-right-radius: 10px;


-webkit-border-bottom-left-radius: 10px;


-moz-border-radius-bottomright: 10px;


-moz-border-radius-bottomleft: 10px;


border-bottom-right-radius: 10px;


border-bottom-left-radius: 10px;


}

 


 .sidebar h2 {


background: #E6E6FA;


color: #9370DB;


border-bottom: 2px solid #9370DB;


font-weight: normal;


text-align: center;


font-family: tahoma;


-webkit-border-radius: 10px;


-webkit-border-bottom-left-radius: 0;


-moz-border-radius: 10px;


-moz-border-radius-bottomleft: 0;


border-radius: 10px;


border-bottom-left-radius: 0;


}

        



.sidebar h2 {


background: #DDF7F7;


border-right: 3px solid #33CCCC;


color: #000;


font-family: tahoma;


font-weight: normal;


font-size: 11px;


text-align: right;


text-transform: lowercase;


padding-right: 2px;


}
Créditos ao Cherry Bomb (desculpe aí pelo meu erro querida)




8 comentários:

  1. Amei :) Vou usar um desses ^^
    Blog lindo flor *_*
    bjos, ladybugs.tk

    ResponderExcluir
  2. ôowww, que bom lindona!! Usa sim, te garanto que vai ficar lindoo!! Beijinhos amr!!

    ResponderExcluir
  3. amor eu usei ta?! *---------* são perfeitos, parabéns (: http://partofmeluan.blogspot.com.br/

    ResponderExcluir
  4. Amei o tutorial com certeza vou usar,ah seu blog é lindo viu.
    brilho-chic.blogspot.com.br

    ResponderExcluir
  5. Olá!Se você tive mais algum desse tipo posta pf!Faço designs e uso sempre!

    ResponderExcluir
  6. Cada um mais lindo do que o outro, mas, eu tentei colocar um e não foi

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.