21 de outubro de 2013

Separar os gadgets em caixas com borda

Olá...
 To sumida novamente. Dessa vez eu só quis descansar um pouco. Tive uma semana livre da escola, oque foi ótimo.  Mas a minha felicidade não vai durar muito tempo, visto que estou na 8ª serie e é o ultimo ano na escola, as decisões sempre é influenciada pela as oitavas. E também tem a formatura, passeios, saídas de estudos, festival de talentos, gincanas, festa de fim de ano além de outras coisinhas que sempre ajudo. Dai já sabem tudo exige muito tempo ainda mais porque tenho outras coisa pra fazer; mas agora que falta apenas um bimestre e já estou passada, estou tentando aproveitar o máximo com minhas amigas, já que ano que vem cada uma vai estudar em escolas diferentes.

Bom, agora chega de falar da minha vida e vamos falar da postagem. Hoje eu trouxe um tutorial que me ajuda pra fazer os meus Layouts ou as tentativas de fazer um . Ele serve pra separar a areá de postagens. E deixa tudo mais organizado.

Já sabem aonde clicar!





----------------------------------------------------------------------------------------------------------------------------------
Então gente, achei esse Tutu do keep calm and eat nutella. Dai fiz umas mudanças, e como já falei aqui tinha dificuldade em modificar os códigos, dai vou explicar direitinho, é melhor pros iniciantes. Vamos começar?!

1º vamos em Design de Modelo > Avançado > Plano de fundo da barra lateral e deixe a barra transparente .

2° Depois vá em Design > Editar HTML >  e procure por : /*Widgets

3ª após achar a Tag cole antes de fechar a a chave ( } ) o código abaixo:


background: #ffffff; /*Edite a cor do fundo da caixa*/
padding-left: 20px; /*Espaço a esquerda*/

padding-bottom: 20px; /*Espaço de baixo*/
padding-right: 20px; /*Espaço a direita*/
padding-top: 5px; /*Espaço de cima*/
border:1px solid #CFCFCF; /*Cor da borda */
Irá ficar assim:



Modificando o código:

Background: é o fundo da caixa como já diz acima, e para mudar a cor pode ser usado essa tabela de cores.
Padding-left: Basta mudar os "px" para ir a esquerda
O mesmo se repete com os "padding bottom,right, e top." Só muda a direção.
Border: Nada mais é do que a espessura da Borda. Ao lado, a cor da borda, também pode ser usado a tabela que indiquei acima.

Espero que possa ter ajudado.
Beijos, Tayy

11 comentários:

  1. Nooooossa , tutorial ótimo mesmo :)

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É muito bom mesmo. Já dei uma voltinha no seu blog, muito bom!
      Beijos, Tayy

      Excluir
  2. Muito Bom seu Blog.

    http://truquesdemeninabijoux.blogspot.com.br

    Beijos!!!

    ResponderExcluir
    Respostas
    1. Obrigada flor! Retribui sua visitinha *----*

      Excluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. seguindo *--*
    ajudou muito seu tutorial, e amei o blog ^^
    visita la o meu se puder: (DREAM-UP!) sonhandoumpoucomais.blogspot.com

    ah e estou precisando de afiliados, se vc quiser eh só falar ta! bjs

    ResponderExcluir
    Respostas
    1. Olá. Desculpa a demora para responder. Obrigada por seguir, já visitei seu blog, mas não consegui entrar :/. Beijoos

      Excluir
  5. Ótimo tutorial, eu já tinha usado mas eu me esqueci, seguindo, segue de volta?
    www.fashioncandyly.blogspot.com.br

    ResponderExcluir
  6. Pelos comentários funciona mesmo, mas não consegui :( !!!
    encaracolandocaracóis.blogspot.com passa lá e segue <3

    ResponderExcluir