(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:
"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.
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.
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 :)
ResponderExcluir~September Rains
Haha' fico grata. após fazer o layout me passa o link? Quero ver :3
ExcluirParabéns hannah ^^
ResponderExcluirSuper útil esse tutorial,eu já estou usando em um layout.
Beijos >3<
haha obrigada, fico feliz que tenha gostado
ExcluirComprou um guarda-roupa?Nossa!Fico feliz por você *-*
ResponderExcluirEu 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
hahaha é legal mesmo, você acha? Obrigada :)
Excluirawn 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
ResponderExcluiramei o primeiro modelo <3 vou usá-lo *-*
obrigado <3
beijos
http://umagarotanadaencantada.blogspot.com.br/
verdade. kkkkkkkkkkk, ok, se usar me mostra, quero ver :3
ExcluirEsse blog esta cada dia mais perfeito <3
ResponderExcluirOs modelos ficaram tão lindas q salvei elas pro proximo lay do blog...
xoxo more
http://its-sucker.blogspot.com.br/
opa! obrigadaço, fera
Excluirameiiii
ResponderExcluirGostei
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluir