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 > Editar HTML > Prosseguir) . Você pode apertar CTRL+F para buscar.
Escolha o seu estilo abaixo:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQAWxNR36D9swn5ND0MqkOBS3UOUB8tKzJwV-HztgGtmz_MJjbu_47xTj2QY6-UXBY636ncMVAUeqfeSLzMWiVyVDTj1BGMHh-0sK3T_1yutPPTLk_S5JiECq0Y1TcEpNKSbgQYqlo4FOG/s1600/titulos3.png)
.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;}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi38IkWN96STplyyGyWfMW0sMEJ5K5-LJJWWtB8aun2uiad5PeZk6t47wXCSgwQvnRVqpAsTG0FRAAKenlVybQ8x8LGkMt4omoJ4TJvaAoVM13VT9zZlAQKJlXMIdGkZJkVLWQC76QoNb15/s1600/titulo2.png)
.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;}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUBMsppH6OfVV7m8uXdWp1gOn0WGHCcRlFUqfIfJELdRF9C4MVkHcosrQPgzkhtdP4Ho2Go6un0X_UQPFq9FRh9dyUPeQWpjX8viK5lYJXDYzR6zRVsed3dFAGNGeRF102GU1TZGolQLXR/s1600/titulos1.png)
.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;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1uh-wVTVADPYMawOpJuFRsfR1ViySrFNPQQ8an31DFBv8nqVHY_xNwXLCaGxsaJvgikFWQ4ONfmAMm_0085X4r9O0m1tRtALSxVJFIEUIagrrEYmbKgDSrJNq_Gk_xaLBeUl3AUCEOs6/s1600/001.png)
.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;}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17FYJm6oA53AxQ3Fb6TmJpHdjMi25fgQEwFFS8ro9hPlzHr3K3Ks8_G_av5EBm4XFOne7M7NjfDHdefS-nBbHZOnS4V96oPI52hw1a6EW0yqOQLJfq6nONcfK09OnXLntyxLzNNbfBmjy/s1600/002.png)
.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;}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVTOMLDkQmqIlpBHM-8v7gzpxFbqOHP0ham-VOHLciH76l8ul0s7Of5_kwv3yKQRSjTfRX_Jo-dpB19FjCRuM0kvObSdO7HNYjMHNC1c-JD11EgxCMcVaQd5dnNxswSSmI8wZ-O8f24HI3/s1600/003.png)
.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;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFzEz4v-L9y-ORxzrnhzAjXAp0MsLJ1ZI6OQ4T1IX4CTHrH8T7eZ1rEyHI6BJBn1jzTh95GdG3cvyM1AvXUOES7PBe9k_8xSLUW_NnTdchiyYrZ-IUWyCwFMltbqEpQw2scOiFR4JYtjSu/s1600/005.png)
Créditos ao Cherry Bomb (desculpe aí pelo meu erro querida)
.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;
}
Amei :) Vou usar um desses ^^
ResponderExcluirBlog lindo flor *_*
bjos, ladybugs.tk
ôowww, que bom lindona!! Usa sim, te garanto que vai ficar lindoo!! Beijinhos amr!!
ResponderExcluirNão sei por me ajuda florzinha ?
ResponderExcluirQuual é sua duvida?
Excluiramor eu usei ta?! *---------* são perfeitos, parabéns (: http://partofmeluan.blogspot.com.br/
ResponderExcluirAmei o tutorial com certeza vou usar,ah seu blog é lindo viu.
ResponderExcluirbrilho-chic.blogspot.com.br
Olá!Se você tive mais algum desse tipo posta pf!Faço designs e uso sempre!
ResponderExcluirCada um mais lindo do que o outro, mas, eu tentei colocar um e não foi
ResponderExcluir