Como prometido, aqui no blog teremos mais tutoriais ensinando a editar os templates do Blogger. Por enquanto os tutoriais serão apenas para essa plataforma, já que não sei lhufas sobre os templates Wordpress e outros tipos. Vou tentar ensinar aqui tudo que aprendi nos meus anos de "blogueira de HTML", e qualquer dúvida que vocês tiverem é só chamar!
Hoje vou ensinar a vocês como personalizar a sidebar do Blogger e deixá-la bonitinha e organizada. Como a barra lateral é uma parte bem importante do blog (onde ficam muitas informações sobre o blog), deixá-la desarrumada espanta qualquer leitor, eu mesma não gosto de desorganização.
Veja aqui o antes e depois da sua sidebar com este tutorial:
Gostou? Então vamos!
OBS: Antes de começar, faça um backup do seu template! Essa postagem aqui ensina direitinho como fazer. Fazer backup é essencial, pois se algo der errado você pode reinstalar o layout. Outra coisa essencial é que esse tutorial vale para o modelo Viagem (Travel) do Blogger. Talvez funcione com outros modelos, mas não é de certeza.
Dividindo os gadgets em caixas
Na dashboard do seu blog, vá em Modelo >> Editar HTML. Dê um clique dentro da caixa do código e depois aperte Ctrl + F. Pesquise pelo seguinte código:
.sidebar .widget {
Você vai encontrar um código mais ou menos assim:
.sidebar .widget {Encontrou? Agora você vai substituí-lo por esse código:
border-bottom: 2px solid transparent;
padding-bottom: 10px;
margin: 10px 0;
}
.sidebar .widget {Para deixar do jeito que você quiser é só mudar o que está destacado, já tem as explicações do lado.
background: #ffffff; /* cor do plano de fundo */
padding: 10px; /* espaçamento interno */
margin-bottom: 30px; /* espaço entre cada caixa */
}
Personalizando os títulos da sidebar
Dessa vez é mais fácil ainda, não precisa substituir nenhum código. Logo depois do trecho que você modificou antes, cole esse aqui:.sidebar .widget h2 {Feito isso, basta modificar o que está destacado. É bem fácil, não é?
background: #000; /* cor do plano de fundo */
color: #fff; /* cor da fonte */
padding: 5px; /* espaçamento interno */
margin: -10px -10px 10px -10px; /* espaço externo (cima, direita, baixo, esquerda) */
text-align: center; /* alinhamento do texto */
font-family: Arial, sans-serif; /* fonte do título */
border-bottom: 3px solid #999; /* borda de baixo (está na cor cinza) */
}
Me digam se testarem, e se deu certo. Qualquer dúvida pode perguntar aqui nos comentários ok?
Beijos, e até mais!
Obrigada pelo tutorial! Vai ser bem útil se continuar postando tutoriais pro blogger.
ResponderExcluirPor incrível que pareça tinha menos dificuldade de codificar pro wordpress do que pro blogger.
Beijos~
Fragmentada ♥
Que bom que gostou, vou trazer mais sim! ^^ Já tentei mexer nos templates Wordpress mas não entendi nada! haha'
ExcluirBeijos!