Criando um lay estilo o meu #02



30 de maio de 2013



Oieeeeeeee gente ~~animada hoje~~ sentiram minha falta? (cala a boca Gleicy) estão bem? espero que sim *-* Bom os prêmios do sorteio estão quase todos prontos \o/ segunda eu entrego somente os goodies que vão se postados pouco a pouco, mas um dos lays eu já terminei e estou acabando o outro!
 Então hoje eu trouxe a segunda parte de como fazer um layout (ah jura?) quem não lembra do primeiro post vá aqui e relembre haha' 

vamos começar? Continue lendo
Então como já editamos o travel e colocamos um bg, vamos aos detalhes, vamos personalizar a sidebar!

Que tal essas bordinhas como eu uso nos posts e na sidebar? vou ensinar

Primeiro você vai ter que separar os gadgets da sidebar se não vai ficar estranho hahahaha'

Siga esse tuto aqui 

Separou direitinho? vamos colocar as bordas.

Na sidebar

Vá no seu HTML >> clique em alguma parte dele>> e tecle ctrl + f vai aparecer uma caixinha de pesquisa dentro do código assim 


Procure por ]]></b:skin> e 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;
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}


Edite apenas onde se pede! ou seja as cores
Veja que o ultimo gadget fica sem a barrinha de baixo e.e vamos por a barrinha dele

procure por .sidebar .widget:last-child {

Aparecerá algo 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 as cores e salve! pronto você tem uma sidebar cute! para personalizar o titulo dos gadgets como os meus use esse tuto. Para fazer uma gadget "Welcome" legal siga essas dicas.

Vamos colocar a barrinha nos posts também???

No HTML procure por .main-inner .column-center-outer {

Depois que achar o código apague ele até o fechamento da chave

e cole esse no lugar

.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 onde se pede! 

Pronto você tem bordinha na sidebar e na área dos posts.

Créditos: CB e Prince Teen

Terão mais duas partes de como personalizar o layout! aguardem.

14 comentários:

  1. Que bacana mal posso esperar para poder ver o resto ^^

    ResponderExcluir
  2. Oie gleicyy como vc sabe que eu AMO o TF >.< , eu te indiquei pra um selinho ^^ é só ir la no e conferir ^^ Muito bacana esse tuto que vc colocou um lay igual o seu , mas o seu é único e perfeito !! Bjus
    SKW

    ResponderExcluir
    Respostas
    1. Já respondi a tag flor >< Que nada flor, é fácil fácil de fazer ><

      Excluir
  3. Muito bom, tem selinho pra você no meu blog!
    Passa lá, caandyspace.blogspot.com.br
    beijos! :)

    ResponderExcluir
    Respostas
    1. Obrigada querida! já repassei o selinho!

      Excluir
  4. Muito bom o post, ajuda bastante :3
    Tem selinho pra você lá no blog, beijo.
    (http://chovendo-glitter-em-londres.blogspot.com.br/2013/05/heey-selinho.html)

    ResponderExcluir
    Respostas
    1. É uma ótima ajuda mesmo! Obrigada flor

      Excluir
  5. Gostei do tutorial,
    e preciso mudar o lay do meu blog, mais isso é mais pra frente,então eu vou aprender umas coisinhas por aqui .

    http://soubibliofila.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou do tuto querida ;3 é sempre bom mudar o lay de vez em quando haha'

      Excluir
  6. Muito bom o post, eu amo o layout do seu blog, tem mais partes? Estou louca pelo resto.

    therepublicafeminina.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou do post! vai ter mas duas partes querida!

      Excluir
  7. Anônimo22:42

    Ficou bem legal o post, bem explicado* bjss
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou do post querida! obrigada!

      Excluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo