6 de nov de 2012

Tutorial : Colocando bordas coloridinhas na Sidebar e nas Postagens

 




Oláa meus queridos hoje vim trazer um tutorial que achei super fofo e prático
Achei no blog Prince Teen então créditos é muito lindo
Então vamos láaa?

Postagens

Vá no seu HTML e procure por
main-inner column-center-outer {
E depois de ter procurado esse código acima substitua todo ele por

.post-outer {
margin: 4px 2px 30px;
padding: 10px 10px;
background:#ffffff; /*Fundo da postagem*/
-webkit-border-radius: 05px;/*Borda arredondada*/
-moz-border-radius: 05px;/*Borda arredondada*/
border-radius: 05px;/*Borda arredondada*/
er-top: 5px solid #ff1493;
border-radius:2px; /*Borda arredondada da área*/
border-bottom: 5px solid #00ff00; /*Borda de baixo*/
border-top: 5px solid #ff1493;/*Borda de cima*/
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ffb5c5;/*Sombra*/
}
Sidebar
AVISO: Você devera usar o widgets da sidebar separada, se você não usar separados não ficara muito bom. Para quem não usa separada segue esse tutorial e depois você devera continuar com esse tutorial. Separar widgets da sidebar.

Você irá no seu HTML do seu blog e procure por
]]></b:skin>
E logo acima cole
 .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;/*------------Cor da barra de cima------*/
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}
 Depois de editar salve, bom como vocês podem ver depois de salvar o ultimo widgets não fica com a borda de baixo, então quem quiser com a borda de baixo no ultimo widgets você devera procura por
 .sidebar .widget:last-child {
Vai aparecer mais ou menos assim
  .sidebar .widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;

 Logo apos achar, você devera colar esse código  abaixo 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;
}
Edite e pronto está pronto

Beijos e thauuuu da Gaabyh

2 comentários:

  1. Oiii ' Minha linda tem game pra vc participar valendo super premios e divulgação de 2 meses legal né ?
    Beijooos não fique de fora dessa '

    http://rosario-vampire-animes.blogspot.com.br/2012/11/game.html

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...