Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1490295728
Vida do cache: 1490554928
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Criando um template

Fazendo seu template – Parte 4 – Configurando efeitos da(s) sidebar(es)

Estamos chegando à parte final da estrutura do template. Após essa postagem nos restam apenas alguns detalhes e opcionais. Aqui vou ensinar como mudar os efeitos da sidebar, e na próxima postagem ensino como fazer para definir o tamanho das colunas.

– Faça login no Blogger, entre em “Layout” -> “Editar HTML”;

– Vamos editar o título da sidebar. Encontre (Ctrl + f):

.sidebar h2 {

Fiz as seguintes mudanças:

padding: 5px;
border: 1px solid #000;
font-size: 13px;

Onde padding define as distancias do escrito das bordas. Border é a configuração das bordas, coloquei 1px solido de cor preta. Font-size é o tamanho da fonte, usei 13px como vocês podem ver.
Brinque” um pouquinho, vale a pena você testar efeitos, fontes, tamanhos, etc. O Google oferece diversas fontes para isso.

A cor de fundo e a cor da letra estão como variáveis, sendo possível sua modificação diretamente na aba “Fontes e cores”. Assim não é necessária a mudança direta no CSS.

- Procure:

.sidebar li {

Vamos editar o "li" da sidebar. Podemos dizer que está é a parte em que mudamos os links da sidebar, a parte básica.
Apague TUDO que está entre {...}.
Depois adicione:

margin: 0; 
padding-top: 0;
padding-bottom: 5px;

Assim retiramos as configurações inicias e colocamos 5px de distância de um link para o outro.

- Depois de definir as distâncias dos links da sidebar, nos resta configurar as cores, ícones, sublinhados, etc.

Por isso vamos CRIAR novas caracterisitas, dentro do CSS depois de sidebar li:

.sidebar a, sidebar a:link{
}

.sidebar a:hover{
}

.sidebar a:visited{
}

Em sidebar a, sidebar a:link, adicione as configurações iniciais dos links, as configurações que serão aplicadas quando alguém visitar seu blog.

Em sidebar a:hover vai ser aplicada as configurações quando o visitantes passarem o mouse sobre o link.

Em sidebar a:visited vai ser aplicada as configurações no link após o clique. Assim vai ficar marcado como se fosse um aviso que a pessoa já visitou este link.

Exemplo que vou utilizar:

.sidebar a, .sidebar a:link{
text-decoration: none;
padding-left: 20px;
background: url(http://codigosblog.net/servidor/li.gif) no-repeat;
}

.sidebar a:hover{
text-decoration: underline;
}

.sidebar a:visited{
background: url(http://codigosblog.net/servidor/livisited.gif) no-repeat;
}

  • O que eu fiz?

Text-decoration: none; -> Retirei o sublinhado.
Padding-left: 20px; -> Coloquei 20px de distância da palavra linkada ao canto esquerdo.
Background: url...; -> Coloquei um ícone no link antes e depois de já visitado (a:visited).
Text-decoration: underline; -> Coloquei um sublinhado no link quando passa o mouse.

O template seu deve estar parecido estruturalmente com esse:

Acompanhe as mudanças do template: www.fazendoseutemplate.blogspot.com

Pronto, basicamente é isso. Procure ser curioso e modifique o quando quiser as configurações da sidebar. Mas lembre sempre de verificar as mudanças em alguns navegadores (Firefox, Chrome, Internet Explorer 7 ou superior, etc).



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:

29 Comentários

  1. Carlos Tomaz disse:

    Paulo, se puder fale um pouco tbm sobre os fechamentos dos códigos no template, quais são aceitos no html do template, tipo, caso eu queira inserir qualquer outra coisa no template, como devo usar o código, como por exemplo aqui no seu, no final da pagina tem essas informações do template e da licença, vlw

  2. Minhas Pesquisas disse:

    Olá segui todos os seus consellhos ficou ótimo, só tive poblema com link os meus viraram vertical e em cima do título do blog, como concert isso, obrigada.rdiasaraujo@gmail.com

  3. Salvador Lucas disse:

    Muito bom tutorial 😀

  4. Paulo Estevão disse:

    @Benhur,
    Sidebar é a coluna lateral do blog, onde vai os gadgets.

    @Carlos,
    vou tentar. =D

    @Minhas Pesquisas,
    Você apagou alguma coisa do menu que fez isso. Volte como estava e tente novamente.

    @Salvador,
    obrigado. =D

  5. Salvador Lucas disse:

    Só uma coisinha que surgiu agora @Paulo.
    A minha main-wraper (desculpe se escrevi errado) ficou grudada com o menu horizontal, como faço para deixar um espaço entre eles como na screenshot que você postou?

  6. Salvador Lucas disse:

    Opa, já descobri a solução… Foi só usar o padding, valeu 😀

  7. Salvador Lucas disse:

    Sem querer ser chato 🙂
    mas esses tutoriais vão ter uma continuação ou terminam por aqui?

  8. Paulo Estevão disse:

    @Salvador,
    Vai continuar sim. Paciência. =D

  9. Paulo Estevão disse:

    @Salvador,
    me manda o link. Assim eu vejo.

  10. Eclipse Filmes & Séries disse:

    Nossa que maravilha de blog, espero que continue assim a ser uns dos melhores blog para ensinar a gente que é leigo no assunto de como fazer um template, ai sucesso mesmo que Deus Sempre te Ilumine, eu tenho um blog de filmes http://www.eclipsefilmeseseries.blogspot, mas ñ é a mesma coisa de vc aprender a fazer o seu template, então estou sempre aqui para seguir as aulas, estou acompanhando desde a 1º até a 4º agora, valeu sucesso mesmo.

  11. Jhony Nunes disse:

    pode crer. ate aqui missao cumprida. valew ter ficado ate as 3h nda manha para concluir o tutorial… espero o proscimo poste desta serie,
    abraço

  12. Stefanato disse:

    Opa, beleza Paulo? to vendo seus tutos e gostei muito, gostaria de saber se você tem algum tuto sobre como por fotos no blogspot, pq já tentei MUITAS vezes e nunca da certo, vlw ai

  13. CarelPinheiro disse:

    Paulo,o meu template fica com a escrita dele (o que eu escrevo nos posts) tudo centralizado,porque?

  14. CarelPinheiro disse:

    Paulo,eu sei que não tem nada a ver mais,como criar essa coisa ou bloco cinza que envolve um codigo que não da para apareçer nos posts?

    Grato,CarelDicas.blogspot.com

  15. CarelPinheiro disse:

    Caro Paulo,quando eu vou postar minhas postagems elas sempre ficam centralizadas,tem como eu deixar meus posts normais de novo?

  16. Paulo Estevão disse:

    @CarelPinheiro:
    http://www.codigosblog.com.br/2009/01/blockquote-citacao-nas-postagens.html

    Você modificou alguma coisa.
    Tente procurar por: .post {

    E coloque a seguinte característica:
    text-align: center;

  17. Nanda disse:

    Oi Paulo,
    Estou precisando de ajuda, eu nunca na minha vida tinha mexido em qq coisa parecida com html rsrs
    Mas to tentando deixar meu layout decente, mas to ficando mais velha por isso! =/
    Dentre todas as coisas que eu queria mudar, está a fonte dos links da caixa de arquivos, eu fiz as alteraçoes que vc ensinou aqui mas não muda nada nos arquivos, só muda nas outras listas.
    Pode me ajudar?
    Bjo

  18. _____Matheus_____(((ADM)))™ disse:

    no meu nao deu certo pq todos os gadgets ficaram no final do blog

  19. R.Ferrari disse:

    Tenho um BLOGSPOT. Já alterei tamanho das colunas. Queria aumentar o tamanho da foto. Não consigo. Quando altero o tamanho na postagem, ela perde qualidade. Qual o caminho?

  20. Junior Paulino disse:

    parabens.

    eu consegui entende +ou- mas ja melhoro, dessas 4 postagens de ajuda para templte a mas complicada é essa das sidebar, mas as pouco vo aprendendo.

  21. Edson disse:

    Desculpe, mas você não ensinou ainda isso e queria perguntar!
    Como eu altero o tamanho da área do post?
    Tipo assim, como aumento a largura?

  22. †µℓเ๏๏ .†.קαiм- disse:

    Como Faço para por o icone só nos marcadores?

  23. Paulo Estevão disse:

    @Nanda, vou ensinar isso ainda. =]

    @Matheus, você aumentou o tamanho da sidebar de mais, é por isso.

    @Ferrari,
    coloque uma imagem de melhor qualidade. =]

    @Junior, você não pode perder a vontade de aprender, só isso. Nada é fácil!

    @Edson,
    Aguarde o próximo post.

    @†µℓเ๏๏ .†.קαiм-,
    Vou ter que fazer um post para isso.

  24. Vinicius Chargel disse:

    Simplesmente… Sensacional!

    O melhor tutorial da net toda, parabéns!

  25. UNIJOVEM disse:

    parabens kra, belo tutorial…

  26. Severino Silva disse:

    seu blog é ótimo parabéns!!!!
    o meu é cavernadanoticia.blogspot.com

  27. Paulo Castro disse:

    Sensacional, consegui aplicar todas mudanças, agora vou dar um toque exclusivo no meu template

  28. Felipe disse:

    Po quando vai sair a 5ª parte? da pra postar logo to ansioso quero aprender a mecher melhor no meu blog.

    Obs: O Blog ta jóia!

  29. Matheus Eduardo disse:

    Parte 5 =)

Para enviar seu comentário, preencha os campos abaixo:

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