Cabeçalho

O Blog Html e Css tem como objetivo esclarecer todas as tuas dúvidas sobre design, codificação e personalização de blogs. Pede um tutorial, ou tira as tuas dúvidas. Estou aqui para te ajudar e faço-o de bom grado. Sugestões e perguntas são sempre bem-vindas. Obrigado pela visita e volta sempre.
- Zé Pedro Silva.

29/07/2013

Como Fazer um Template - Parte 2

Olá ^-^, nesta parte do Big Tutorial, vou ensinar a juntar a barra lateral com a área das postagens e a alterar-lhe a cor, a alterar-lhe o tipo e letra, a alterar o tipo de letra do blog e a alterar a cor do rodapé.

Para juntar a barra lateral com a área das postagens, vai a design → editar html → e procura pela tag:
  • Barra Lateral à Direita:
 .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  • Barra Lateral à Esquerda:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Depois de encontrares o código, conforme o posicionamento da tua barra lateral, só tens de procurar um pouco mais abaixo um destes códigos (ou parecido):
  • Barra Lateral à Direita:
margin-right: 30px;
  • Barra Lateral à Esquerda:
margin-left: 30px;
Quando encontrares o código, mais uma vez, conforme o posicionamento da tua barra lateral, apaga-o, e guarda o modelo.

Agora vamos definir a cor de fundo da barra lateral (sidebar), para isso volta a procurar pela seguinte tag:
  • Barra Lateral à Direita:
 .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  • Barra Lateral à Esquerda:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
E na tag background, substitui o que está lá (background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top left;), pelo código hexadecimal pretendido. Exemplo:
background: #dcdcdc;
Também podes pôr o url de uma  imagem que queiras que apareça como fundo.

Para alterares o tipo de letra, da barra lateral procura pela tag "Widgets". Um pouco abaixo dessa tag, vais encontrar este código:
.sidebar .widget {
font: normal normal 13px 'Trebuchet MS',Trebuchet,sans-serif;
color: #cccccc;
}
Nesse código, podes alterar o tipo de letra, o tamanho de letra e a cor do tipo de letra.

Agora localiza o seguinte excerto de código.
/* Content
----------------------------------------------- */
body, .body-fauxcolumn-outer {
font: normal normal 13px 'Trebuchet MS',Trebuchet,sans-serif;
color: #666666;
background: #ecb892 none no-repeat scroll center center;
}
Nesse código, vais poder alterar o tipo de letra que queres no blog, o tamanho e a cor dela. E onde diz background, vais poder escolher uma cor de fundo, usando o código hexadecimal da cor que pretendes, ou então uma imagem.

Agora vamos aprender a pôr o rodapé transparente, para isso procura por:
.footer-inner {
background: transparent url(//www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center;
}
E substitui esse código por este:
.footer-inner {
background: #transparent;
}
Esse código, define a cor de fundo do rodapé do blog. Em vez de transparente, podes optar por pôr o código de uma cor, em hexadecimal.
Pronto *-*, a Parte 2 deste big tutorial chegou ao fim. Se tiveres alguma dúvida na execução dela não hesites em perguntar na aba "Pergunta".

8 Comentários:

  1. Respostas
    1. Não percebi a sua dúvida, pode explicar-se melhor?! :D

      Eliminar
    2. eu tento editar a barra lateral mas não consigo

      Eliminar
    3. Eu devo estar mesmo lerdo, mas não consegue como assim? o.O

      Eliminar
  2. Eu queria saber como mudar a sidebar, pq eu n consigo

    ResponderEliminar
    Respostas
    1. Mas mudar como? Eu não percebo o que você não consegue? Tire prints, ou assim, mas explique melhor! :/

      Eliminar
  3. Pode me ajudar? Sempre que procuro um código não acho. Isso acontece desde o primeiro tutorial. Na hora de mudar o "postagens antigas, postagens rescentes" pelos ícones, eu não consegui achar os códigos. E agora, até pra mudar o background não consigo. Até achei o código do background, substitui mas não tá dando certo. To ficando desesperada já, help me!

    ResponderEliminar
    Respostas
    1. Olá Stheffany, você está usando o Modelo Viagem, que eu disponibilizei aqui no blog, para download? :o

      Eliminar

« »