20 fevereiro 2013

Fazendo meu Layout - Parte 2


Hoje vamos para a segunda parte da série Fazendo meu Layout.
Hoje vamos aprender a personalizar a sidebar, que é a coluna lateral do blog.

A sidebar pode ser personalizada de diferentes formas. Vou ensinar vários modos de personalização. Veja:
  • Cor no fundo da sidebar
  • Gadgets separados em caixas
  •  Imagem nos títulos
  • Título em caixinha

Cor no fundo da sidebar

Para colocar uma cor como plano de fundo da sidebar é bem fácil.
Vá no painel do blog  clique em "Modelo Personalizar
Na aba "Avançado", clique em "Plano de fundo da barra lateral" e mude a cor do plano de fundo. Deixe a cor da moldura transparente.


Gadgets separados em caixas

Para separar os gadgets em caixinhas, assim como é a sidebar aqui do blog, o processo muda.
A cor usada no modo acima deverá ser ambas transparentes. Feito isso, clique em "Aplicar ao blog".

No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
/* Widgets
Logo abaixo dele vai estar assim:
.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}
Substitua todo esse código por esse:
.sidebar .widget {
margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
background: #FFFFFF; /* cor de fundo das caixas */
padding:10px; /* espaço entre o texto e as margens */
border-radius: 10px; /* arredondamento dos cantos das caixas */
text-align: justify; /* alinhamento justificado do texto */
-webkit-box-shadow: 0 0 1em #c9c9c9; /* sombra nas caixas, apague esse trecho se não quiser sombra */
}
Para escolher outras cores de fundo consulte essa tabela: clique aqui.

Visualize, se estiver tudo certinho, salve o modelo.
 Imagem nos títulos

Vamos agora aprender a colocar uma imagem no fundo do título, assim como eu uso aqui no blog.
Tenha sempre suas imagens hospedadas em algum site.
No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Substitua por:
.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: url(URL DA IMAGEM) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
Faça as modificações necessárias. Quando estiver tudo certo, salve o modelo.
Título em caixinha

Vai ficar mais ou menos assim:


No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Substitua por:
.sidebar .widget h2 {
padding-bottom: .5em;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
background: #B0C4DE;
margin-top: -20px;
margin-left: 6px;
height: 12px;
width: 150px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
Entenda
Uppercase quer dizer que todas as letras do título ficarão maiúsculas. Em background coloque a cor de fundo da caixinha que fica o título.

Feito as alterações necessárias, visualize e salve o modelo.


Não coloquei uma imagem de como ficou o meu porque são diversos modos. Depende do que você vai usar.

Se você perdeu a primeira parte dos posts clique aqui.
No próximo post da série vamos aprender a colocar imagem no cabeçalho do blog.

22 comentários:

  1. Muito bom o tutorial, estava procurando um parecido mas nao tinha achado nenhum tão bem explicado, depois vou fazer umas mudanças no meu blog.
    beijos
    http://coisasdahana.blogspot.com.br/

    ResponderExcluir
  2. Gostei do tuto ^^
    Utilizarei esse para fazer algumas mudanças lá no blog :)
    Beijos
    htto://srtaveneno(.blogspot.com.br)

    ResponderExcluir
  3. ótimo tutorial seu layout é lindo,
    bjuss
    fashionline-elizabeth.blogspot.com

    ResponderExcluir
  4. Oii! Eu gostei da segunda parte do tutorial, só gostaria de saber em que theme do blogger os títulos em caixinha ficam bons, porque eu testei em vários e os títulos ficaram bem estranhos. As outras dicas foram bem úteis :)

    ResponderExcluir
  5. Tô amando esses tutoriais, mas como muda a cor de fundo da partezinha que tem "seguidores", "Blogueira", etc ?

    ResponderExcluir
    Respostas
    1. É só vc seguir esse tutorial na parte : 'Imagem nos títulos', e no lugar de URL DA IMAGEM colocar o código da cor que deseja usar como fundo.

      Excluir
  6. amei tudo! e consegui fazer... mas esse modelo travel é em gota d'gua.. como se tira?

    ResponderExcluir
  7. Oi Nah! Só uma dúvida, como eu deixo a cor de fundo/imagem justificada... Assim como está na sua barra lateral, do mesmo tamanho da barra :D

    =*****

    ResponderExcluir
  8. Nossa!! Ameeei! Estou dando uma boa arrumada no meu blog e o resultado está perto(eu acho!)!! Só tenho uma pergunta: Como faço para deixar a fonte minúscula?
    Beijinhos!

    ResponderExcluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. Oi Nah!encontrei seu blog por acaso em algumas buscas no google,estou adorando,to acompanhando o passo a passo do layout,minha duvida é porque quando procuro um código no html e do um enter não acontece nada não aparece o código.Me ajuda
    obrigada

    ResponderExcluir
  11. Conseguir estou aprendo muitas coisas com seus tutoriais meu blog vai ficar lindo !

    ResponderExcluir
  12. O meu não está aparecendo "expandir modelos de widgets" por que ?

    ResponderExcluir
  13. Os meus gadgets separados em caixas ficaram com as pontas arredondadas, o que eu faço pra deixar quadrada ?

    ResponderExcluir
  14. Por que no meu não está funcionando o último? Os outros ficam todos desalinhados...

    ResponderExcluir
  15. Uma dúvida, no código
    .sidebar .widget {
    margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
    background: #FFFFFF; /* cor de fundo das caixas */
    padding:10px; /* espaço entre o texto e as margens */
    border-radius: 10px; /* arredondamento dos cantos das caixas */
    text-align: justify; /* alinhamento justificado do texto */
    -webkit-box-shadow: 0 0 1em #c9c9c9; /* sombra nas caixas, apague esse trecho se não quiser sombra */
    }
    Tem que apagar essa frase que ta entre astericos?!

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo