28/01/2018

Modelos de título para sidebar [002]


Yo queridos bunnie's! Hoje venho trazer uma reblogagem. Recolhi alguns modelos de título para sidebar. Sabemos que nesse enorme mundo de blogs e sites, muitos tutoriais legais se perdem com o tempo, e por isso achei legal juntar em uma postagens modelos de de títulos mais usados ou que já foram muito usados em blogs, quais alguns nem existem mais. Porém creditei ainda assim, está no rodapé da postagem. Caso esteja faltando algum me avisem para colocar ok? Agora apresento os modelos que escolhi.

Se não sabe como adicionar um modelo de sidebar, siga esse tutorial "Encontrando o título da sidebar no HTML" seguindo esse mesmo tutorial de modelos para sidebar. 

Modelo 1

/* Titulo dos widgets
----------------------------------------------- */
.sidebar .widget h2 {
width:103%; /* largura da linha */
line-height: 13px; /* altura da linha */
padding:6px; /* margem interna da linha */
background:#916e7e; /* cor de fundo */
font-weight: normal;  /* tipo de fonte */
font-family: 'Sofia', cursive;  /*nome da fonte */
font-size: 16px;   /*tamanho da fonte */
color: #d6e7da;   /*cor de fonte */
text-align: right; /*lado da fonte */
border: 1px solid #6f5460;  /*borda */
margin-top:-6px;  /*não mexa */
margin-left:-10px; /*não mexa */
margin-bottom:10px ; /*não mexa */
box-shadow: inset 0px 0px 8px #917280;
}

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


Modelo 2

/* Titulo dos widgets
----------------------------------------------- */
.sidebar h2{
margin-bottom: 6px;
background: #997992;
color: #674760;
height: 17px;
padding: 3px;
width: 200px;
font-size: 12px;
text-align: right;
border-right: 5px solid #b7a0b2;
font-family: 'Muli', cursive;  /*nome da fonte */
-webkit-transition-duration: .80s;
}
.sidebar h2:hover{
color: #b7a0b2;
background: #674760;
border-right: 5px solid #997992;
-webkit-transition-duration: .80s;
}

Fonte Utilizada: <link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet'/>


Modelo 3

/* Titulo dos widgets
----------------------------------------------- */
.sidebar 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 4

/* Titulo dos widgets
----------------------------------------------- */
.sidebar h2 {
margin-top: -2px;
margin-bottom: 7px;
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 5


/* Titulo dos widgets
----------------------------------------------- */
.sidebar h2 {
width:108%; /* Ajuste a largura para o tamanho de sua sidebar*/
margin-bottom: 7px;
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 6

/* Titulo dos widgets
----------------------------------------------- */
.sidebar h2 {
width:105%;  /* Ajuste a largura para o tamanho de sua sidebar*/
margin-bottom: 8px;
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 7

/* Titulo dos widgets
----------------------------------------------- */
.sidebar h2 {
margin-bottom: 7px;
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*/
}



Modelo 8

/* Titulo dos widgets
----------------------------------------------- */
.sidebar h2 {
background: #EE6A50 ; /*Cor do fundo do título*/
width: 150px; /*Largura do fundo, aumente se precisar*/
font-family: Montserrat; /*Fonte do titulo*/
color:#f7f7f7;
text-shadow: 0px 1px 1px #ccc;
font-size: 15px; /*Tamanho da fonte*/
font-weight: normal;
line-height: px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/
margin-top: -23px; /*Quantos pixels o título "sobe"*/
margin-left: -10px;
margin-bottom: 7px;
padding-left:5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-transition-duration: .40s;
box-shadow: 1px -1px 2px #9a9a9a;
-webkit-box-shadow: 1px -1px 2px #9a9a9a;
-moz-box-shadow: 1px -1px 2px #9a9a9a;
}
.sidebar h2:hover {
color:#f7f7f7;
background: #CD4F39; /*Cor do fundo do título*/
-webkit-transition-duration: .40s;}

Fonte Utilizada: <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'/>



Modelo 9

.sidebar  h2 {
margin-bottom: 10px;
font-family: 'Dosis', sans-serif;
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;
}

Fonte Utilizada:   <link href='https://fonts.googleapis.com/css?family=Dosis:300' rel='stylesheet'/>

Para estalar as fontes utilizadas nos modelos, vá no HTML é procure por <head>,  e abaixo dele cole o código de fonte, que já coloquei abaixo de seus respectivos modelos.

Os créditos vão para Things HtmlWorld of ThelJackie DreamChá com Anjos

4 comentários:

  1. Oi oi! Como adivinhou que eu estava a fazer um layout novo? shuahsua
    Muito bom, seus posts são sempre úteis demais <3
    Certeza que usarei! Agradeço <3

    Diário de uma Otome

    ResponderExcluir
  2. Olá, moça!! Tudo bom?
    Eu amei esses modelos para sidebar, e também amei o layout do seu blog, é encantador! É difícil encontrar aqui (Pelo menos para mim) alguém que goste da Dua Lipa, mas eu amo as músicas dela e ela ♥
    Eu estou gostando muito de seus tutoriais!!

    Beijos <3

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345