• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

22 de junho de 2015

[Pedido] Modelos de sidebar + Postagens #Exclusivo

(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' 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 // www
"Você pode postar modelos diferentes e fofinhos para sidebar e área de post que combinem? É super difícil de achar :/" - 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' 
 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: <head>
e acima dele cole a fonte que iremos utilizar: 

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

Agora procure por: ]]></b:skin>
e acime dele cole:

/*---- Início do modelo Adolescente Nerd // Não retire os créditos ----*/
.sidebar .widget {  /*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
border: inset;/*---- estilo da borda ----*/
border-color: #e4cfd9 ;/*---- cor da borda ----*/
 padding-bottom: 10px;
  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 ----*/
  padding-left: 20px; /*---- espaço à esquerda ----*/
  padding-bottom: 20px;  /*--- espaço de baixo ---*/
  padding-right: 20px; /*--- espaço à direita ---*/
  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 ----*/
 padding-bottom: 10px;
  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 ----*/
  padding-left: 20px; /*---- espaço à esquerda ----*/
  padding-bottom: 20px;  /*--- espaço de baixo ---*/
  padding-right: 20px; /*--- espaço à direita ---*/
  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: ]]></b:skin>
e acime dele cole:

/*---- Início do modelo Adolescente Nerd // Não retire os créditos ----*/
.sidebar .widget {  /*---- Modelo Adolescente Nerd // Não retire os créditos ----*/
 padding-bottom: 10px;
  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 ----*/
  padding-left: 20px; /*---- espaço à esquerda ----*/
  padding-bottom: 20px;  /*--- espaço de baixo ---*/
  padding-right: 20px; /*--- espaço à direita ---*/
  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;  /*---- 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 ----*/
 padding-bottom: 10px;
  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 ----*/
  padding-left: 20px; /*---- espaço à esquerda ----*/
  padding-bottom: 20px;  /*--- espaço de baixo ---*/
  padding-right: 20px; /*--- espaço à direita ---*/
  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. 

14 comentários:

  1. Amei o post! Uma coisa que sempre me complica ao fazer layouts, é a sidebar, que nunca consigo achar um modelo diferente e bonito. Muito útil o tutorial! Vou usar o primeiro em algum layout meu :)

    ~September Rains

    ResponderExcluir
    Respostas
    1. Haha' fico grata. após fazer o layout me passa o link? Quero ver :3

      Excluir
  2. Parabéns hannah ^^
    Super útil esse tutorial,eu já estou usando em um layout.
    Beijos >3<

    ResponderExcluir
  3. Comprou um guarda-roupa?Nossa!Fico feliz por você *-*
    Eu crio os meus modelos de post e de sidebar (gosto que os dois combinem)!
    Mas para quem não o faz, este tutorial é ótimo!
    Adorei o primeiro modelo!
    beijos*-*
    bwblackwords.blogspot.com

    ResponderExcluir
  4. awn que bom q vc ta feliz amore <3 é sempre bom ver a recompensa do nosso trabalho né? <3 e ainda mais o seu, que te rendeu um espelhão u.u
    amei o primeiro modelo <3 vou usá-lo *-*
    obrigado <3
    beijos

    http://umagarotanadaencantada.blogspot.com.br/

    ResponderExcluir
  5. Esse blog esta cada dia mais perfeito <3
    Os modelos ficaram tão lindas q salvei elas pro proximo lay do blog...
    xoxo more

    http://its-sucker.blogspot.com.br/

    ResponderExcluir