.

25 agosto 2013

Voltando + Tutorial: Bordas coloridas na sidebar e área de postagem + Pedido? + 150!!


Tirei do tumblr, quem tiver feito me avise que eu credito o3o

Yooo!
Gente, tirei um tempinho do meu dia pra vir aqui ver vocês! *-*
Eu to percebendo que o blog tá meio abandonado, e isso é a ultima coisa que eu quero...
Bem pessoas, eu estou tentando voltar a ativa, mas não sei quando vou voltar definitivamente. Bem, quando eu voltar eu prometo vir com novidades.

Sim, tem mais uma coisa que quero conversar com vocês: Vocês querem algo em particular no blog? Algo que vocês gostem e achem que eu deva trazer pra cá? Bem, estou esperando resposta (prevejo vácuo).

Também quero agradecer a todos os 150 seguidores do blog *-*
Nunca pensei que fosse chegar nisso, hontoni arigatou ><

Agora vamos ao tutorial (que eu já cansei de fazer posts de desculpas).

Let's go!

Vou ensinar a deixar a área dos posts e da sidebar com uma bordinha encima e embaixo. Bem, vou dar créditos ao blog Cherry Bubble, foi lá que aprendi.


Primeiro, você vai entrar na área do HTML do seu blog, apertar Ctrn + F e procurar pelo código: ]]></b:skin>

Logo acima desse trecho você cola o seguinte código:

.sidebar .widget {
background:#fff; /*--------Cor do fundo------*/
border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/
padding: 5px; /*------------Espaço interno------*/
margin-left: -13px; /*------------Espaço externo da esquerda------*/
margin-top: 0px; /*------------Espaço externo de cima------*/
margin-bottom:25px; /*------------Espaço externo de baixo------*/
border-radius:2px; /*-------------Arredondamento do gadget--------*/
border-bottom: 5px solid #b1d4b3;
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}

Edite a parte em negrito.

Agora procure a tag:
.sidebar .widget:last-child {

Vai aparecer mais ou menos assim:
.sidebar .widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;

Agora cole o código abaixo embaixo de padding-bottom: 0.

background:#fff; /*--------Cor do fundo------*/
border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/
padding: 5px; /*------------Espaço interno------*/
margin-left: -13px; /*------------Espaço externo da esquerda------*/
margin-top: 0px; /*------------Espaço externo de cima------*/
margin-bottom:25px; /*------------Espaço externo de baixo------*/
border-radius:2px; /*-------------Arredondamento do gadget--------*/
border-bottom: 5px solid #b1d4b3;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}

 Novamente, edite a parte em negrito.

Editando a área de postagem

Você vai procurar por .main-inner .column-center-outer {

Logo depois de achar esse código você coloca o cogido abaixo acima dele:

.post-outer {margin: 4px 2px 30px;padding: 10px 10px;background:#ffffff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;er-top: 5px solid #b1d4b3; /*------------Cor da barra de baixo------*/border-radius:2px; /*-------------Arredondamento da área--------*/border-bottom: 5px solid #b1d4b3;border-top: 5px solid #d4bfb1;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;}

Edite a parte em negrito, visualize e pronto!

Qualquer duvida me perguntem. Estou aqui para responder. >.<

Bem, vou indo por enquanto.
Sayo~

Nenhum comentário:

Postar um comentário