13 de nov. de 2013

Modelos para título da sidebar

Olá pessoal, trago para vocês alguns modelos fofos para colocar nos títulos da sidebar.

 Para os modelos vá no html de seu blog, aperte as teclas Ctrl f ou f3 e procure por ]]></b:skin> e acima
adicione os códigos, ou procure por h2 ou .sidebar.widget  h2 { modificando o que se pede.

Modelo I

.sidebar.widget  h2 {

margin-top: 15px;
margin-bottom: 5px;
font-family: Tahoma;
text-transform: uppercase;

letter-spacing: 3px;
color: #ccac90;
border-bottom: 1px dotted #c8bcb2;
font-size: 11px;
text-align: center;
word-spacing:.4em;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
letter-spacing: 6px;
color: #b39478;
-webkit-transition-duration: .50s;
}

Modelo II

.sidebar.widget  h2{
background: #cor_do_fundo_normal;
color: #cor_da_letra_normal;
height: 15px;
padding: 3px;
width: largura_do_títulopx;
font-size: 8px;
text-align: right;
border-right: 5px solid #cor_da_borda_normal;
font-family: "Tipo da letra";
-webkit-transition-duration: .80s;
}
.sidebar h2:hover{
background: #cor_do_fundo_hover;
border-right: 5px solid #cor_da_borda_hover;
-webkit-transition-duration: .80s;
}

Modelo III

  .sidebar.widget  h2 {
text-align: center;
background-color: #FFC0CB;
width: 230px;
height: 15px;
font-size:13px;
text-shadow:0 1px 1px #ffffff;
border-bottom: 1px dotted #EE1289;
}

Modelo IV
.sidebar.widget  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;

Modelo V
.sidebar.widget  h2 {
font-family:Arial;
color: #CCDDC7;
border-left: 5px solid #D9FCCE;
border-right:5px solid #DBC6F7;
text-shadow: 1px 1px 1px #F6FDF3;
background:#FBF9FD;
text-align: center;
font-size: 15px;
}

Modelo VI
.sidebar.widget  h2 {

font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 26px; /*Tamanho da fonte*/
color: #FFAEB9; /*Cor da fonte*/
background: url(http://i.imgur.com/Rjdny.png) no-repeat center;
height: 36px;/*Altura da imagem*/
width: 287px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
}

Para instalar a font coloque o código abaixo logo acima da tag </head>

<link href='http://fonts.googleapis.com/css?family=Sofia' rel='stylesheet' type='text/css'/>

- No trecho: http://i.imgur.com/Rjdny.png vocês podem trocar por uma imagem personalizada. Não esquecendo de ajustar as medidas da sua imagem.

Modelo VII
 .sidebar .widget h2 {
 background: # ; /*Cor do fundo do título*/
 width: 150px; /*Largura do fundo, aumente se precisar*/
 font-family: ; /*Fonte do titulo*/
 font-color:# ;
 text-shadow: 0px 1px 1px # ;
 font-size:  px; /*Tamanho da fonte*/
 font-weight: normal;
 line-height:  px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/
 margin-top: -30px; /*Quantos pixels o título "sobe"*/
 margin-left: -10px;
 padding-left:5px;
 -webkit-transition-duration: .40s;
}
.sidebar h2:hover {
letter-spacing: 3px;
-webkit-transition-duration: .40s;

- Este modelo eu uso aqui no blog.

Modelo VIII
@font-face { font-family: "rabbit"; src: url('http://static.tumblr.com/dlelfro/FcTmnnzis/cheeky_rabbit.ttf');}
.sidebar.widget  h2 {
font-family: rabbit;
color: #fff;
text-align: center;
background: url(http://i.imgur.com/iSOtYFt.png) no-repeat left;
background-color: #d2b9c3;
padding: 10px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}

Modelo VI
.sidebar.widget  h2 {
text-align:center;
background-color: #XXXXXX; cor de fundo
padding:1px;
border: 1px solid transparent;
-webkit-transition:0.4s;
display:inline;
float:right; pode mudar para left
margin-top:-15px;
text-shadow: 0px 1px 1px transparent;
height: 14px;
padding-left: 5px;
padding-right: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

12 comentários :

  1. amei todos e vou usar no meu próximo lay :)

    seguindo sdv? chocoonut.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Hannah, fico feliz que tenha gostado.
      Claro que vou te seguir.

      Excluir
  2. Respostas
    1. Bia, vou ensinar de outro jeito.
      Procure por:
      .sidebar h2 {
      apague todo o código até }
      coloque o modelo para título da sidebar desejado.

      Excluir
  3. Peguei uns ♥ tds são lindos!
    Beijos ♥
    Garota Lezada

    ResponderExcluir
  4. Vou usar! Ai, são lindos ♥

    ResponderExcluir
  5. Respostas
    1. Mary, no html de seu blog procure pela parte onde modifica o titulo da sidebar,
      apague o que esta lá e coloque o modelo desejado.
      .sidebar h2 ou .sidebar widget h2

      Excluir
    2. Ah, consegui fazer no meu blog de testes, vou usar no próximo layout! bjs

      Excluir
    3. Mary, fico feliz que tenha gostado.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo