Tutorial - Mudando a sidebar do blog

Olá pessoal!

Hoje vou mostrar como colocar imagem na sidebar do blog, a coluna que fica na lateral.
Para quem não leu os anteriores, clique AQUI.

Como em meu blog, tem a imagem fofinha, aquela faixazinha na barra lateral com borboleta.

Para fazer isso, terá que ter a imagem hospedada em algum local, olhe o tutorial no blog de como hospedar imagem no próprio blogger.

 Atenção! Não criar tão grande, tudo bem? Olhe o exemplo que será usado no template free abaixo:

Agora vamos aprender a colocar na barra. Primeiro procure pelo código abaixo destacado:
/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .5em;
}
Após fazer isso, substitua todo código acima por este:
/* Headings
----------------------------------------------- */
.sidebar h2 {
background:url(LINK DE SUA IMAGEM AQUI)no-repeat;
width:310px;/*Largura da imagem*/
height:41px; /*Altura da imagem*/
margin-right:-30px;
margin-top:2px;
margin-bottom:0px;
padding-left:2px;
color:#fff; /*Cor da fonte*/
text-align: center; /*Texto centralizado*/
font-family:'Dancing Script'; /*Fonte da sidebar*/
font-size:24px; /*Tamanho da fonte*/
line-height:40px;
text-transform:normal;
}
h2 {
font: normal bold 6px 'Dancing Script';
color: #000000;
}
.main-inner h2.date-header {
font: normal bold 14px 'Dancing Script';
color: #666666;
}
.footer-inner .widget h2,
.sidebar .widget h2 .region-inner .fauxcolumn-inner .region-inner{
padding-bottom: .5em;
background: #ffffff;
}

Nas partes que estão destacadas de azul pode modificar de outra forma.
Para colocar a cor de acordo com a TABELA, no local de imagem é só apagar tudo que está em azul, mas atenção com ponto e vírgula ok?
Para modificar é só colocar # com a cor que quer, exemplo:
background: #000;/*Cor do fundo*/
Para modificar a outra parte em azul, o CENTER, ou seja, texto centralizado, troque por estes:
Direita: right
Esquerda: left
Centralizado: Center
Atenção para o ponto e vírgula também.


Por hoje é só, beijos e até a próxima.

OBS: Favor não reblogar, dê sempre os créditos, este blog está sobre licença e você pode ser acusado de plágio.
Comentários
7 Comentários

7 comentários:

  1. Dica super util, vou deixar no favoritos aqui caso eu precisar!

    http://blogquerida.blogspot.com.br/

    ResponderExcluir
  2. Oooi,

    Menina esses tutoriais são maravilhosos! Eu sou uma negação para fazer qualquer mudança no layout, sempre peço para o meu namorado que se da melhor do que eu.
    Mas eu adorei :)


    Beijinhos,
    www.entrechocolatesemusicas.com

    ResponderExcluir
  3. Hey!!
    Adorei esse post! Mega mega útil!
    Eu tenho uma, mas ela é mega sem graça e eu preciso muito mudar :/
    Eu adoro a do seu blog!

    Beijos!
    http://heartbreaker-girls.blogspot.com.br/

    ResponderExcluir
  4. Adorei a dica, amo tutoriais assim <3
    www.iamcamilakellen.blogspot.com

    ResponderExcluir
  5. Eu adoro tutoriais de html - eu adoro mexer em html, passo horas e mais horas fazendo isso, não sei porquê.... rsrs
    adorei as suas dicas para a sidebar - isso já me deu muita dor de cabeça, uma ajudinha sempre é bem vinda!
    Simmm!
    Leia Hush Hush, é bom :D Acho que com anjos caídos não tem como nao ter pelo menos um pouco de clichê, né?
    MENINAAA, é uma série de 8 livros, e todos daquele tamanho? GENTE kk tenho que começar a ler logo kk

    Um beijo!
    Pâm - http://www.interruptedreamer.com/

    ResponderExcluir
  6. Oi Tamires, legal você dar umas dicas pra galera que quer personalizar o próprio blog com o seu jeitinho. Gostei do tutorial! :)

    Bjs bjs bjs Mih!
    Paradise Books || @ParadiseBooksBr || @Mih_Francielle

    ResponderExcluir
  7. Adoro tuas dicas, ajudar o pessoa novato é algo que pouca gente faz, e se faz cobra por isso!

    Beijos Joi Cardoso
    Estante Diagonal

    ResponderExcluir

Obrigada pela visita, seu comentário me deixa muito feliz e pode ter certeza, vou retribuir com muito carinho!