☁ This Not Yet: FAZENDO SEU TEMPLATE: PARTE II

Hey chicletinhos ;3

Como vão? Não postei nos últimos dias porque estava com gripe ~~e também com um pouco de preguiça~~, mas já estou melhor o/ Tive a brilhante ideia de ir para paria. Detalhe - estava ventando e nublado. Resultado - peguei chuva e fiquei 2 dias de cama. Nada mal, não? Mudando de assunto, mês que vem é minha formatura (fundamental II), nem preciso dizer que estou super ansiosa *-* Mas confesso que estou com muito medo do ensino médio/curso técnico :s

Hoje vamos continuar com o tutorial de como fazer seu template, layout, whatever. Vamos começar a adicionar os detalhes principais, que são: personalizar as postagens e a sidebar. Eles vão deixar o visual do blog mais limpo e organizado. O tutorial de hoje está cheio de códigos, então você vai ter que ter atenção redobrada. Go!

Agora vamos colocar toda a cor do blog. Escolhi verde e rosa. Se você quiser, coloque outras cores, mas escolha uma paleta. Como eu sempre falo, nada de restart. Primeiramente, vá em modelo > personalizar > avançado > plano de fundo da barra lateral e selecione a cor transparente, como na imagem abaixo. Você vai perceber que o fundo da sidebar vai sumir.

Agora vamos colocar o ribbon, que é aquela faixinha bonitinha no título da sidebar. Vá em modelo > editar html e pesquise por .sidebar .widget { e apague tudo entre esse código e a }, e entre os dois cole o seguinte código:

width:100% !important;

background:#fff;

border-bottom:5px #ffc0cb solid;

margin:15px 0 !important;

border-radius:0 0 0 0;

padding:10px;

box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;

overflow:visible;

Depois que colar, vai ficar assim:

.sidebar .widget {
width:100% !important;
background:#fff;
border-bottom:5px #ffc0cb solid;
margin:15px 0 !important;
border-radius:0 0 0 0;
padding:10px;
box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
overflow:visible;
}

Agora pesquise por .sidebar .widget h2 {, apague tudo entre o código e a }, e entre eles cole:

font-family: Verdana;
font-size: 14px;
color: #fff;
background: url(http://i1293.photobucket.com/albums/b593/Raphaellah_Stardoll/sidebar_zps4874ca01.png) no-repeat center;
height: 31px;
width: 300px;
text-align: center;
text-shadow: 1px 2px 3px #dd8b99;
margin-top:-12px ;
margin-left: 6px ;
margin-bottom:9px;
padding:6px;
width:115%;

Depois que colar vai ficar assim:

.sidebar .widget h2 {
font-family: Verdana;
font-size: 14px;
color: #fff;
background: url(http://i1293.photobucket.com/albums/b593/Raphaellah_Stardoll/sidebar_zps4874ca01.png) no-repeat center;
height: 31px;
width: 300px;
text-align: center;
text-shadow: 1px 2px 3px #dd8b99;
margin-top:-12px ;
margin-left: 6px ;
margin-bottom:9px;
padding:6px;
width:115%;
}

Visualize, veja se está tudo ok e salve. O blog deve ficar assim:

Agora vamos personalizar as postagens. Primeiramente, vamos adicionar uma nova fonte. Pesquise por <head> e abaixo disso cole:

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

Depois, pesquise por /* Posts. Abaixo dele, vai ter algo parecido com isso:

h3.post-title {
margin-top: 20px;
}
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
h3.post-title a:hover {
text-decoration: underline;
}

apague e cole no lugar:

h3.post-title {
text-align: center
}
h3.post-title a {
font-family: Andika;
color: #51bfb4;
font-size: 17px;
text-shadow: 0px 1px 1px #ffc0cb;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}
h3.post-title a:hover {
font-family: Andika;
color: #ffc0cb;
font-size: 19px;
}

Visualize e salve. Agora vamos colocar sombra e mais alguns detalhes nos posts. pesquise por .main-inner .column-center-inner { Abaixo disso vai ter:

.main-inner .column-center-inner {
padding: $(content.posts.padding) 0;
}

apague e cole no lugar:

..main-inner .column-center-inner {
box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
border-left:5px #ffc0cb solid;
padding: $(content.posts.padding) 0;
}

Para finalizar, iremos remover a data. Vá em Layout > Postagens do Blog > Editar e desmarque a opção data, como na imagem abaixo: