[Pedido] Modelos de sidebar + Postagens #Exclusivo
Autor: @hannah_g3 (Dona do A.N) | Publicado: 2015-06-22T11:13:00-03:00




(só eu quem acho o twenty one pilots uma banda perfeita?)

Hooý meus amores, tudo bem com vocês? Estou morrendo de saudades de todos, como vai a vida de todos? Esses dias comprei um guarda-roupa novo, branco com um espelho enorme com meu próprio salário ~rebola~ esse é aquele momento em que você vê seus trabalho valer a pena haha'&nbsp;e vocês, alguma novidade? Por mais simples que seja, quero saber, deixem nos comentário. Agora, tratando-se do assunto de hoje, deixei essa postagem quase pronta e estou terminando aqui no trabalho para conseguir postar à vocês. Eu havia recebido o pedido para que viesse fazê-la a algum tempo, queria pedir desculpas pela demora na execução. Os pedidos foram:



Blogs dela: www&nbsp;// www

"Você pode postar modelos diferentes e fofinhos para sidebar e área de post que combinem? É super difícil de achar :/" -&nbsp;Nathalia

Blog dela: www


Vale a pena o clique. Agora, antes de ir a postagem, mais alguém além de mim digitou: "www.blogger.com.br" e se deparou com uma mensagem de que o blogger seria excluído? Levei um susto daqueles, porém é o blogger do globo.com que será excluído. Ufa'&nbsp;
&nbsp;Quero saber também como anda por aqui, muito agitado ou mais ou menos? Estou com grandes saudades e procurarei visitar seus blogs já que faz um tempo que não o faço. Espero que gostem da postagem.

Agora vamos lá?!


Modelo 1 | Preview



Primeiro procure por:&nbsp;&lt;head&gt;

e acima dele cole a fonte que iremos utilizar:&nbsp;




&lt;link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'/&gt;




Agora procure por:&nbsp;]]&gt;&lt;/b:skin&gt;

e acime dele cole:




/*---- Início do modelo Adolescente Nerd // Não retire os créditos ----*/
.sidebar .widget { &nbsp;/*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
border: inset;/*---- estilo da borda ----*/
border-color: #e4cfd9 ;/*---- cor da borda ----*/
&nbsp;padding-bottom: 10px;
&nbsp; margin: 10px 0;
padding: 10px;
font-family: verdana; /*Nome da fonte*/
color: #aea2ab;/*---- cor da letra do gadget ----*/
text-shadow: 2px 2px #fff;/*---- sombra da letra ----*/
text-transform: normal; /*---- deixa em maiúsculo a letra ----*/
font-size: 11px; /*Tamanho da fonte*/
background: #ece9e9; /*---- cor do fundo da caixa ----*/
&nbsp; padding-left: 20px; /*---- espaço à esquerda ----*/
&nbsp; padding-bottom: 20px; &nbsp;/*--- espaço de baixo ---*/
&nbsp; padding-right: 20px; /*--- espaço à direita ---*/
&nbsp; padding-top: 5px; /*---- espaço de cima ----*/
-webkit-border-radius: 40px 90px 30px 50px; /*---- arredondamento ----*/
border-radius: 2px 80px 30px 40px; /*---- arredondamento ----*/
}
.sidebar h2 { /*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
font-family: 'Josefin Sans', sans-serif; /*----título da postagem----*/
color:#D3A7C5; /*---- cor do título ----*/
transition: all 0.5s ease;/*---- não retire isso ----*/
font-size:16px;/*---- tamanho da sua letra ----*/
text-transform: uppercase; /*---- deixa em maiúsculo a letra ----*/
}
.sidebar h2:hover { /*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
color:#AE8FB8;/*---- cor do título, muda ao passar o mouse ----*/
transition: all 0.5s ease;/*---- não retire isso ----*/
}
.post-outer {/*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
border: inset;/*---- estilo da borda ----*/
border-color: #e4cfd9 ;/*---- cor da borda ----*/
&nbsp;padding-bottom: 10px;
&nbsp; margin: 10px 0;
padding: 10px;
font-family: verdana; /*Nome da fonte*/
color: #aea2ab;/*---- cor da letra do gadget ----*/
text-shadow: 2px 2px #fff;/*---- sombra da letra ----*/
text-transform: normal; /*---- deixa em maiúsculo a letra ----*/
font-size: 11px; /*Tamanho da fonte*/
background: #ece9e9; /*---- cor do fundo da caixa ----*/
&nbsp; padding-left: 20px; /*---- espaço à esquerda ----*/
&nbsp; padding-bottom: 20px; &nbsp;/*--- espaço de baixo ---*/
&nbsp; padding-right: 20px; /*--- espaço à direita ---*/
&nbsp; padding-top: 5px; /*---- espaço de cima ----*/
-webkit-border-radius: 40px 90px 30px 50px; /*---- arredondamento ----*/
border-radius: 40px 2px 10px 10px; /*---- arredondamento ----*/
}
h3.post-title a, h3.post-title{/*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
text-align: center;
font-family: 'Josefin Sans', sans-serif; /*----título da postagem----*/
color:#D3A7C5; /*---- cor do título ----*/
transition: all 0.5s ease;/*---- não retire isso ----*/
font-size:20px;/*---- tamanho da sua letra ----*/
text-transform: uppercase; /*---- deixa em maiúsculo a letra ----*/
}
h3.post-title a, h3.post-title a {
text-align: center;
color:#70696F;/*---- cor do título ----*/
transition: all 0.5s ease;/*---- não retire isso ----*/
}
/*---- Fim do modelo Adolescente Nerd // Não retire os créditos ----*/




Modelo 2 | Preview



Procure por:&nbsp;]]&gt;&lt;/b:skin&gt;

e acime dele cole:


/*---- Início do modelo Adolescente Nerd // Não retire os créditos ----*/
.sidebar .widget { &nbsp;/*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
&nbsp;padding-bottom: 10px;
&nbsp; margin: 10px 0;
padding: 10px;
font-family: verdana; /*Nome da fonte*/
color: #aea2ab;/*---- cor da letra do gadget ----*/
text-shadow: 1px 1px #322c2c;/*---- sombra da letra ----*/
text-transform: normal; /*---- deixa em maiúsculo a letra ----*/
font-size: 11px; /*Tamanho da fonte*/
background: #444141; /*---- cor do fundo da caixa ----*/
&nbsp; padding-left: 20px; /*---- espaço à esquerda ----*/
&nbsp; padding-bottom: 20px; &nbsp;/*--- espaço de baixo ---*/
&nbsp; padding-right: 20px; /*--- espaço à direita ---*/
&nbsp; padding-top: 5px; /*---- espaço de cima ----*/
-webkit-border-radius: 40px 90px 30px 50px; /*---- arredondamento ----*/
border-radius: 2px 10px 30px 10px; /*---- arredondamento ----*/
}
.sidebar h2 { /*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
font-family: 'Josefin Sans', sans-serif; /*----título da postagem----*/
text-align: center;/*---- alinhamento do título ----*/
border-bottom: solid 1px #322c2c; /*---- borda abaixo do título ----*/
color:#892233; /*---- cor do título ----*/
transition: all 0.9s ease;/*---- não retire isso ----*/
font-size:18px;/*---- tamanho da sua letra ----*/
text-transform: uppercase; /*---- deixa em maiúsculo a letra ----*/
}
.sidebar h2:hover { /*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
color:#691a27;/*---- cor do título, muda ao passar o mouse ----*/
border-bottom: solid 1px #7f2030; &nbsp;/*---- borda abaixo do título ----*/
transition: all 0.9s ease;/*---- não retire isso ----*/
}
.post-outer {/*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
&nbsp;padding-bottom: 10px;
&nbsp; margin: 10px 0;
padding: 10px;
border: solid 2px #322c2c;
font-family: verdana; /*Nome da fonte*/
color: #aea2ab;/*---- cor da letra do gadget ----*/
text-shadow: 1px 1px #322c2c;/*---- sombra da letra ----*/
text-transform: normal; /*---- deixa em maiúsculo a letra ----*/
font-size: 11px; /*Tamanho da fonte*/
background: #3C3535; /*---- cor do fundo da caixa ----*/
&nbsp; padding-left: 20px; /*---- espaço à esquerda ----*/
&nbsp; padding-bottom: 20px; &nbsp;/*--- espaço de baixo ---*/
&nbsp; padding-right: 20px; /*--- espaço à direita ---*/
&nbsp; padding-top: 5px; /*---- espaço de cima ----*/
}
h3.post-title a, h3.post-title{/*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
text-align: center;
font-family: 'Josefin Sans', sans-serif; /*----título da postagem----*/
color:#322c2c; /*---- cor do título ----*/
border-bottom: double 1px #322c2c; /*---- borda abaixo do título ----*/
transition: all 0.9s ease;/*---- não retire isso ----*/
font-size:20px;/*---- tamanho da sua letra ----*/
text-transform: uppercase; /*---- deixa em maiúsculo a letra ----*/
}
h3.post-title a, h3.post-title a{
text-align: center;
color:#70696F;/*---- cor do título ----*/
transition: all 0.9s ease;/*---- não retire isso ----*/
}
h3.post-title a:hover, h3.post-title a:hover{
text-align: center;
color:#651517;/*---- cor do título ----*/
transition: all 0.9s ease;/*---- não retire isso ----*/
}
/*---- Fim do modelo Adolescente Nerd // Não retire os créditos ----*/




Os códigos ficaram um pouco grandes mas...espero que gostem do resultado e que seja de bom proveito à todos, são modelos simples, porém feitos com carinho, espero ser-lhes útil. Caso tenham alguma dúvida, não exitem em perguntar nos comentários. Bjoon e até a próxima postagem. E se você fez o seu pedido, embora demoremos, iremos o atender. Fique tranquilo quanto a isso.&nbsp;