Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502877524
Vida do cache: 1502920724
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Sidebar

Personalizando os títulos da sidebar

Você já conferiu como Personalizar a Sidebar do seu blog, inclusive como Personalizar os links da sidebar.
Neste tutorial veremos como personalizar os títulos da sidebar.

Se você estiver utilizando o template Minima, você deverá acrescentar o código abaixo referente aos título da sidebar, já que, por padrão, ele não consta nos templates mínima.
Para outros templates já modificados, este trecho já deve constar no código, basta procurar por ele no corpo do html do seu blog.
Procure no seu template os trechos CSS que se referem a sidebar.
Geralmente estão dentro da área :
.sidebar

Como existem muitas variações de estilos a serem aplicados aos títulos da sidebar, vou colocar alguns códigos CSS e destacar cada elemento informando o que cada um representa.
Os estilos deverão ser aplicados por você, de acordo com sua preferência.

Os títulos da sidebar, são representados pela variável:
.sidebar h2

Todos os estilos que você quiser aplicar, deverão, ser sempre incluídos neste trecho.
Veja exemplo:


.sidebar h2 {
margin: 10px;
line-height: 1.5em; /*--altura da linha do titulo--*/
padding: 10px;
text-align: center; /*--alinhamento do texto do titulo--*/
}

Lembrando que:
text-align: é o alinhamento do texto (pode ser: center= Centro, left= esquerda ou right= direita)

Definir cor para plano de fundo do título da sidebar:

Se quiser incluir uma cor como plano de fundo ao título da sidebar, basta acrescentar a linha “background” e aplicar os estilos a ela.
Exemplo:


.sidebar h2{
background: #CCCCCC;
}

Consulte a tabela de cores html.
Se quiser você também poderá aplicar um efeito gradiente ao background do título.

Você pode optar por colocar uma imagem para compor o fundo do título da sidebar, neste caso você deve determinar o comportamento desta imagem.


.sidebar h2{
background: #CCCCCC url(ENDEREÇO-DA-IMAGEM);
}

Você pode estipular que ela se repita (para cima,para baixo, e para os lados), ou que ela não se repita e fique fixa á direita, á esquerda, no topo, ou no bottom.

Veja as maneiras que você pode estipular o comportamento da imagem:

repeat; – se você quiser que a imagem se repita tanto para cima, quanto para baixo e para os lados;
repeat-y; – a imagem repete somente na vertical
repeat-x; – a imagem repete somente na horizontal
no-repeat; – se você não quer que a imagem se repita, quer que ela fique fixa
top; – Imagem somente no topo
bottom; – imagem somente abaixo
right; – imagem a direita
left; – imagem a esquerda

Lembre-se sempre de informar os espaçamentos, incluindo valores em margin e padding.
Padding: determina as margens internas, é responsável por determinar a distância entre o conteúdo de determinado elemento e sua borda.
Margin: determina a distância de um elemento para outro.
Recomendo que você aprenda mais sobre “padding e margin” , leia o artigo que fala sobre: Diferenças entre Margin e Padding.

Alinhamento do texto do título da sidebar:

text-align:left -> titulo alinhado à esquerda.
text-align:right -> titulo alinhado à direita.
text-align:center -> titulo alinhado o centro.
text-align: justify -> titulo com alinhamento justificado (faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita).

Definir Transformação da fonte:

Você pode definir transformações da fonte do título da sidebar no formato caixa-alta ou caixa-baixa.
Para definir a propriedade de transformação de textos, você pode atribuir as seguintes variáveis:
text-transform: none; -> sem efeito.
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas.
text-transform: uppercase; -> TODAS AS LETRAS MAIÚSCULAS.
text-transform: lowercase; -> todas letras minúsculas.
font-variant: small-caps -> transforma letras em maiúsculas de menor altura.
font-variant: normal -> sem efeito variante.

Definir decoração da fonte do titulo da sidebar:

Para a decoração do fonte do título você pode atribuir as seguintes variáveis:
text-decoration: underline; -> título sublinhado.
text-decoration: line-through; ->título com linha em cima.
text-decoration: overline; -> título sobrelinhado.
text-decoration:none; -> sem efeito.

Definir espaço entre as letras do título:

Você pode definir o espaço entre os caracteres, ou seja, o espaço que existe entre as letras do título.
Exemplo:
letter-spacing:1px;

Inserir borda no título da sidebar:

Se quiser acrescentar borda ao título, basta incluir no CSS a variável para borda.
Exemplos de bordas:

border: 1px solid #000000 -> borda em volta de toda área do título.
border-bottom:1px solid #000000 -> borda apenas abaixo do título.
border-top: 1px solid #000000 -> borda apenas acima do titulo.
border-left: 1px solid #000000 -> bordas apenas á esquerda.
border-right:1px solid #000000 -> bordas apenas á direita.

Você também pode aplicar o efeito de Bordas Arredondadas e efeito sombreado nas bordas. Veja um exemplo com borda arredondada e efeito sombreado na borda:


border:1px solid #000000;
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Veja mais sobre tipos de bordas em:
Personalizar Bordas

Definir estilo da fonte do titulo da sidebar:

Estilo da fonte: normal e italic.
Se você deseja que a fonte do título se apresente em itálico, devemos incluir no CSS a variável para o estilo da fonte.
Exemplo:
font-style: italic;
A fonte pode ser definida para se apresentar em negrito(bold).
Exemplo:
font-weight:bold;

Você também pode aplicar efeito sombra na fonte do título da sidebar.
Exemplo:
text-shadow: 2px 2px 2px #000000;

Definir cor e tamanho da fonte do titulo da sidebar:

Geralmente as alterações para cor e tamanho da fonte dos títulos da sidebar podem ser feitas através do painel do Blogger. Basta entrar na aba “designer do modelo” e clicar na opção “avançado”.
Mas se no seu template não tem esta possibilidade, você pode aplicar estilos para definir uma cor ou tamanho da fonte do titulo da sidebar diretamente no trecho CSS, basta incluir o código correspondente referente a cor e tamanho da fonte que você deseja que o título da sidebar tenha.


.sidebar h2{
color: #XXXXXX; /*--cor da fonte--*/
font-size:Xpx; /*--tamanho da fonte--*/
}

Definir tipo de fonte para o título da sidebar:

Você pode definir o tipo de fonte para o título diretamente no trecho CSS, basta incluir a definição da fonte que você deseja , defina sua fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
Exemplo:
font-family: ‘Trebuchet MS’, Arial, Serif;

Veja também:
Fontes diferentes para usar no blog

Identificando o código referente aos Títulos da sidebar nos templates Designer de Modelo:

Não há como eu informar precisamente o código CSS correspondente aos títulos da sidebar existentes nos templates designer de modelos, pois devido a facilidade de poder escolher como dividir as colunas da sidebar, o código CSS referentes aos títulos da sidebar podem variar dependendo do modelo que você estiver usando e da quantidade de colunas que você já tiver determinado.
Entretanto, posso deixar uma dica para que você mesmo possa tentar localizar o trecho referente aos títulos da coluna sidebar, do modelo que estiver usando.
Desta forma, conseguindo identifica-lo, você poderá acrescentar o código aplicando alguns estilos CSS, como bordas e background.

As alterações para cor e tamanho da fonte dos títulos da sidebar podem ser feitas através do painel do Blogger.
Basta entrar na aba “designer do modelo” e clicar na opção “avançado”.

Para identificar o código referente ás colunas sidebar no seu template, é necessário que você já tenha seus widgets instalados na sidebar, para facilitar a identificação.
Entre na aba “design” >> “editar html” >> marque a caixinha “expandir modelos de widget” e procure o código referente aos widgets.
É só procurar pelo título que você deu a cada widget.

Vou exemplificar, para tornar o entendimento mais fácil.
Na minha coluna sidebar eu adicionei o gadget de “Perfil” que por padrão, o titulo ficou: “Quem sou eu”, procurando pelo trecho referente a este título, eu encontrei este código:


<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>

na linha acima está:


<b:section-contents id='sidebar-right-1'>

e na linha abaixo está:


</b:section-contents>

este trecho que encerra o gadget citado.

Notem que o código de abertura do gadget em “id” temos o código: sidebar-right-1
é este trecho de código que você vai usar para aplicar o estilo ao título.

Agora entre na aba “design” >> “editar html” e procure pela tag ]]></b:skin>
e cole ANTES dela o código CSS referente ao trecho que você localizou, desta forma:


#sidebar-right-1 h2{

}

Você deve localizar o código referente a cada título dos widgets da sidebar (um por um) e incluir o código CSS seguidos dos estilos que você deseja aplicar para cada um deles.

Caso queira substituir os títulos (textos) da sidebar por uma imagem personalizada, veja este tutorial Substituir Títulos da Sidebar por Imagens.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

27 Comentários

  1. Aprendendo muito com vocês____
    consegui personalizar o título;consegui colocar uma imagem diferente em cada widgets e gostaria muito de colocar uma imagem de fundo diferente em cada widget_Ex:. Postagens Populares(uma imagem de fundo)_Quem sou eu (outra imagem diferente) e assim por diante.
    meu twitter >>> @CRRochaGuitar

    abraço a Vanessa,Clau e todos da equipe.
    Carlos Roberto Rocha

  2. Raíssa disse:

    Olá! Gostaria de saber como deixar o background do título gadget do tamanho do espaço da coluna lateral. Se puder nos ensinar a centralizar as imagens na coluna lateral agradeceria.

    Adoro seu blog. Com ele tenho feito bastante coisa nos meus blogs.

    No aguardo da resposta.

    Ótima semana!

    Grata

    Raíssa

  3. KAXS disse:

    Legal, principalmente quando mexe com :hover
    =)))))

  4. André disse:

    Olá!

    Fui colocar imagem no lugar do título de cada widget da sidebar.

    Não sei se coloquei no lugar certo, mas foi assim:

    .sidebar .widget h2 {
    background: url(http://andrenascimento.webs.com/barra%20redes%20sociais.jpg) no-repeat;
    }

    O problema é que apareceu a mesma imagem em todos os widgets…

    Help. Thanks!

  5. Grilozl disse:

    Seus tutoriais são bons, mas não há imagens explicando.

  6. Angelo disse:

    esse tutorial é otimo !

    me ajudou a fazer meu novo template !

  7. Oi gostaria de saber se tem como eu deixar uma sidebar de cada cor, nao o plano de fundo e sim a borda que eu criei para ficar no fundo do titulo do marcador, eu tenho 7 marcadores no meu blog e gostaria de deixar uma cor para cada nessa parte. Agradeço desde ja e parabéns pelo visu do seu blog, esta mais bonito, amaria ter essa dedicação toda =)

  8. Amauri Dirrty disse:

    O post acima ensina como colocar o titulo no Centro, na esquerda e na direita. E se eu quiser descer um pouco mais o titulo qual a tag que eu uso?

  9. .:: Clau ::. disse:

    Marcelo Souza
    Então pode ser que este arquivo "updateyourbrowser.net" esteja dando problemas de carregamento e com isso afetando o carregamento do meu blog. Vou retira-lo para testar.

  10. Marcelo Souza disse:

    Pois aqui continua da mesma maneira Clau.
    Quando clico para abrir, aparece a mensagem na parte de baixo: "Aguardando http://www.updateyourbrowser.net&quot;
    Pensei ser por que meu navegador (Google Chrome) estivesse desatualizado. Então atualizei-o, porém a dificuldade persiste. Já tentei abrir pelo Firefox, mas a mensagem é a mesma.
    É uma pena, especialmente para mim, que sempre fui adepto das suas excelentes dicas.
    Vou aguardar e ver se isso melhora de alguma maneira.
    Abração e obrigado!

  11. .:: Clau ::. disse:

    Marcelo Souza
    Nossa, que estranho! Aqui para mim está abrindo normal. Testei no note e estava normal tb. O.o

  12. Marcelo Souza disse:

    Clau, não sei se é no Mundo Blogger, ou aqui no meu note, mas tenho encontrado uma enorme dificuldade em acessar o blog ultimamente.
    As páginas quase sempre ficam carregando por horas e não aparece nada.
    É preciso Muita insistência para conseguir abrir um post.

    Abração.

  13. .:: Clau ::. disse:

    Livia
    Vc deve utilizar uma imagem que tenha a mesma largura da sua sidebar, caso queira colocar para que ela não se repita. Recomendo que vc dê uma lida na parte que fala sobre as maneiras que você pode estipular o comportamento da imagem, e acrescente mais informações, de acordo com a forma que vc deseja que a imagem apareça. Por exemplo:
    no-repeat top center;
    no-repeat center;
    etc

  14. Lívia Carolina Fabi disse:

    Oi Clau!
    Td bem?

    Será que vc pode me ajudar?

    Segui suas dicas para colocar uma imagem nos títulos da sidebar e deu certo…

    Só que… rs

    Se eu coloco assim:

    .sidebar h2{background: url(http://lh3.ggpht.com/_xgph0UEXaJ8/TRC9qrkMSKI/AAAAAAAAC1k/N0eH1o8GxEc/imagem%20sidebar%201.png)}

    A imagem aparece duplicada.

    Se eu coloco o no-repeat no final, não aparece nada!!!

    .sidebar h2{background: url(http://lh3.ggpht.com/_xgph0UEXaJ8/TRC9qrkMSKI/AAAAAAAAC1k/N0eH1o8GxEc/imagem%20sidebar%201.png)no-repeat}

    O que pode ser?

    Bjos

  15. .:: Clau ::. disse:

    ORM ESTACA DO VALE
    Que bom!
    Obrigada pelo comentário.

  16. ORM ESTACA DO VALE disse:

    Oi Clau
    Já resolvi meu probleminha. Te agradeço muito pela ajuda.
    Aprendi muita coisa aqui. Valeu Flor!

  17. .:: Clau ::. disse:

    bikercoimbra
    Muitos recursos variam de template para template, sendo assim, não tenho como te ajudar.

  18. bikercoimbra disse:

    Nesta imagem dá para ver melhor. Eu quero encostar o titulo ao limite do sidebar:
    http://img502.imageshack.us/img502/910/95477845.jpg

  19. .:: Clau ::. disse:

    ORM ESTACA DO VALE
    Olá, peço que, por favor evite publicar seu email nos comentários, a menos que queira ser vitima de spammers, até pq eu não envio respostas nenhuma por email, inclusive já informo isso nos "Termos de Uso do blog".
    Sobre sua pergunta, sugiro q vc dê uma lida nos artigos:

    http://www.mundoblogger.com.br/2010/01/css-variable-definitions-no-blogger.html

    http://www.mundoblogger.com.br/2010/01/css-variaveis-do-tipo-fonte.html
    Pode ser que te ajude.

  20. ORM ESTACA DO VALE disse:

    Oi, adorei seu site! E modifiquei os títulos das pstagens e sidebar de meu blog, mas, algum erro cometi, porque algumas postagens não mudaram o título. Pode me ajudar?
    Meu e-mail é laurabastosalmeida@yahoo.com.br
    Obrigado.

  21. .:: Clau ::. disse:

    Sayonara
    Que bom que deu certo!

  22. Sayonara disse:

    Olá Clau

    Obgda pela ajuda com sua dica consegui encontrar. A segunda coluna é .newsidebar h2 eu fucei ate encontrar . beijos obgda

  23. .:: Clau ::. disse:

    sAYONARA
    Se o seu blog possui 2 colunas sidebar vc vai ter q identificar no template qual é o código da nova coluna sidebar e incluir o código do titulo e aplicar estilos pra ela:
    por exemplo:
    .nomedaoutrasidebar h2{
    }

  24. Sayonara disse:

    Ola
    Estou tentando personalizar meu template e suas dicas são d+. Eu coloquei uma imagem no meu sidebar (.sidebar h2{) com vc ensinou e deu certinho.Mas só uma coluna mundou. Tentei achar outra coluna não encontrei como faço. Vc pode me orientar. Obgda

  25. Kevvin Oliveira disse:

    Boa dica para quem usa os templates do designe de modelo e que quer personalizar.Parabéns Clau!
    Abraços!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.