Big Tutorial: Criando um layout estilo revista #05

Olá galera tudo bem? Bom hoje é o quinto passo do Big tutorial... Hoje vamos ver as barras laterais, as famosas area dos gadgets // sidebar ... vamos lá...


5. Barra Lateral: Sidebar
Essa é a parte mais gostosa do layout, personalizar a área dos gadgets... Bom gente é fácil... Vem..

A sidebar tem que estar organizado com o gadget de postagens populares, ícones de redes sociais, gadget de categorias,gadget de busca, anúncios (publicidade, propagandas)

O modelo de sidebar que vamos fazer hoje, é igual a esse: IMG
Então vamos lá!

1- Entre no HTML do seu blog e procure por: 
]]></b:skin>
2- Acima dele cole o seguinte código:
.sidebar h2{
TEXT-TRANSFORM:UPPERCASE; /* Titulo com letra maiuscula, caso não queira apague essa linha*/
background: #ff0080; / cor do fundo do titulo */
margin-top: -15px; /* mude caso fique desalinhado */
margin-left: -15px; /* mude caso fique desalinhado */
margin-right: -15px; /* mude caso fique desalinhado */
text-align:center; /* se quiser centralizar o titulo, caso não queira, exclua essa linha */
3- Salve, e visualize... 

Em alguns modelos, a sidebar é separada em caixas, como nessa imagem: IMG
Se você este estilo, faça o tutorial abaixo:

1- Vá no modelo do seu blog, e clique em personalizar.
2- Colocque em avançado >> Plano de fundo da barra lateral
3- Deixe em transparente
4- Salve
5- Clique em voltar para o blogger
6- Clique em HTML
7- Procure por:
.sidebar .widget {
8- Abaixo dele coloque:
margin: 0px 0px 15px 0px;
background: #FFFFFF; /* cor de fundo */
padding:10px;
text-align: justify;
9- Salve...

Prontinho! Seu Blog Já está quase pronto. Se você perdeu os posts anteriores, clique nos links abaixo: Parte 1 | Parte 2 | Parte 3 | Parte 4  

11 comentários

  1. Olá, parabéns pelo blog!
    Se você puder visite este blog:
    http://www.morgannascimento.blogspot.com.br/
    Obrigado pela atenção

    ResponderExcluir
  2. Adorei as dicas :) sempre bom aprender!
    beijo
    www.tatices.com

    ResponderExcluir
  3. Eu amo lay em estilo revista, mas já tentei e não deu em nada. Por isso deixo pra lá.

    Inquietudes Secretas

    ResponderExcluir
  4. Super legal a iniciativa em ajudar as pessoas com tutoriais ♥

    Bjs
    Diva de Brechó

    ResponderExcluir
  5. Estou precisando aprender mais sobre isso. Gostei das dicas.
    Beijas,
    http://mundoperdidodacarol.blogspot.com.br/

    ResponderExcluir
  6. Legal flor! Super dicas!

    Bjus, Bjus amore!

    Aline Laitarte - http://www.bomboneca.blogspot.com
    Canal: http://goo.gl/dhAJL5

    ResponderExcluir
  7. Muito bom o tutorial, principalmente pra quem assim como eu se arrisca a criar seu próprio layout.
    www.bydasneves.com

    ResponderExcluir
  8. Oi
    Adorei a dica, minha filha que faz para mim, pois eu dou um nó.
    beijinhos

    http://eueminhasplantinhas.blogspot.com.br/

    ResponderExcluir
  9. ótimo tutorial, adorei seu layout, principalmente a cor do bg *_*
    Bjos

    Papo Garota | Canal YouTube | Instagram

    ResponderExcluir
  10. Olhaaa que interessante. Vou considerar esse tutorial da proxima vez que for mudar meu layout ;)

    Beijos
    Www.duasvezesm.com

    ResponderExcluir
  11. Que post legaaaal
    Amei!

    Estou de volta com o blog, e já tem post novo!

    http://tudodiferentecomsamaralima.blogspot.com.br/
    @samaraklimaa

    Um beijo!

    ResponderExcluir










2011/2017 - Delicada e Abusada | Personalizado por Débora Alvim | Não copie! Encomende o seu na HTML LOVE DESIGN