Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

13/04/2012

NOVO: Fazer Templates II - Colocando as imagens no blog

Agora sim, vamos começar a parte do tutorial de hoje... Eu pensei muito, e vou conseguir dividí-lo em três partes apenas!!!
Então, vamos voltar lá no nosso blog de testes para continuar a editar o template, Lembre-se que só depois de seguir à risca o tutorial de ontem é que você deve seguir o de hoje!!!

Coloque as abas (menu) no lugar:

Antes de tudo, entre no Painel novo do Blogger e Clique na aba "Páginas" e em "Mostrar páginas como" escolha a opção "Guias na parte superior", como na foto abaixo:


Depois clique em "Salvar organização".

Colocando o Cabeçalho (Header):

A primeira coisa que vamos fazer é colocar o cabeçalho. Essa é a única parte que vamos ter que repetir amanhã quando colocarmos o template no seu blog...
Entre na aba Layout (Design) e clique no link "Editar", do seu cabeçalho. Vai abrir uma pou-up. No item "Imagem", escolha a imagem de seu cabeçalho em "De seu computador" ou cole o endereço da imagem em "Da web".
Vai aparecer uma miniatura do seu cabeçalho. Depois de aparecer, escolha em "Imagem" a opção "Em vez de título e descrição". Vai ficar mais ou menos assim:


Depois clique em "Salvar".

Tirando o link do cabeçalho:

Até aqui, nada diferente do processo normal de colocar o cabeçalho do blog. Para tirar o link do cabeçalho (já repararam que o cabeçalho tem a tendência a ficar como link?) vamos em  Modelo > HTML (caixinha branca abaixo da miniatura do seu template).
Copie o seguinte código:

<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a> 


Clique em qualquer parte do seu HTML e aperte Ctrl+ F. Agora cole o código na caixinha que acabou de aparecer (Search) e aperte a tecla "Enter". No trecho que ficou em destaque, apague as linhas indicadas acima em vermelho (as duas, não se esqueça de apagar o </a>).

Continuação:

Agora procure (com a caixinha Search) o seguinte trecho:  .content-inner {
Aparecerá um código assim:

      .content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

Apague todo o trecho em vermelho.

Agora procure pelo código: .header-outer {
Vai aparecer um código assim:

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

Troque-o inteiro pelo código abaixo:

.header-outer {
width:990px;
height: 476px;
margin: 0px auto;
display: block;
overflow: hidden;
}

Visualize para ver se não dá erros, seu template estará mais ou menos assim:


Parece estranho, mas é assim mesmo que tem que ficar. Clique em "Salvar Modelo".

Colocando o fundo (Background):

Eu já havia ensinado como colocar o fundo no blog, mas vamos ter que colocar o fundo pelo HTML para que seu blog fique 100% bom. Ah, vou dar uma dica que nem eu sabia: imagens de fundo que tenham tamanho maior que 5kb tendem a ficarem fixas na tela quando usamos o scroll do mouse... Sério!!! Meu fundo tinha 6kb e ficou fixo um tempão, até que eu troquei por um menor. Então quando for escolher a imagem do fundo, prefira as de 5kb para baixo... A não ser que você as queira fixas mesmo.

Continue no "Editar HTML" e copie o seguinte código: body {
Clique em qualquer lugar do código, aperte Ctrl+F e na caixinha que abriu (Search), cole o código que você acabou de copiar e aperte a tecla "Enter". Vai aparecer o seguinte trecho:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Vamos substutuí-lo pelo trecho abaixo:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: url(URL_DA_IMAGEM) repeat scroll top center;
margin: 0px;
padding-bottom:10px;
}

Troque URL_DA_IMAGEM pelo endereço da sua imagem de fundo.
O código em vermelho determina a posição do fundo. O primeiro, repeat, determina que o fundo vai se repetir por toda a página. Troque por repeat-y se quiser que só se repita na vertical, repeat-x se quiser só na horizontal e no-reapeat se quiser que não se repita.
O segundo, scroll, determina que o fundo vai rolar com a tela. Troque por fixed se quiser que ele fique fixo e não se mova com a tela.
Top determina que vai se posicionar no topo da tela. Troque por bottom se quiser que fique abaixo. E center determina que a imagem ficará no centro. Troque por left se quiser que fique na esquerda e right, se quiser que fique na direita.

Clique em "Visualizar" para ver se está do jeito que você quer.

Mudando o corpo do template:

Agora procure por esse trecho: .main-outer {
Vai ficar em destaque um código assim:

.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
}

Troque por esse:

.main-outer {
width: 990px;
display: float;
margin:0px auto;
background: url(URL_DA_IMAGEM) repeat-y top center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

O número em vermelho tem que ser o mesmo da largura do seu blog. No lugar de URL_DA_IMAGEM cole o endereço da imagem que fizemos ontem que eu chamei de "Main-outer" (aquela que cortamos do meio do template).

Abaixo desse código, tem dois assim (se tiver só um, modifique o único que tem pelo seu correspondente):

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
}

Troque por esse código:

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 0px solid $(body.rule.color);
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 0px solid $(body.rule.color);
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Trocando o Rodapé (Footer):

Agora vamos trocar o rodapé que fecha o seu template. Procure pelo trecho: .footer-outer {
Vai ficar em destaque o seguinte código:

.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}

Agora troque-o pelo código a seguir:

.footer-outer {
width: 990px;
height: 37px;

margin-top:-20px;
background: url(URL_DA_IMAGEM) no-repeat bottom center;
}

Troque URL_DA_IMAGEM pelo endereço da imagem de Footer (Rodapé) que hospedamos no tutorial anterior. Os números em vermelho devem ser trocados pela dimensão exata da sua imagem do Footer, o primeiro número (width) é a largura e o segundo (height) é a altura.
Visualize para ver se não deu nenhum erro. Se tudo der certo, apenas o seu menu estará no lugar errado. Se estiver tudo OK, clique mais uma vez em "Salvar Modelo".

Colocando o menu em cima do cabeçalho:

Procure pelo seguinte código: .tabs-inner .section:first-child ul {
Vai aparecer o seguinte trecho:

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);

}

Apague toda a parte em vermelho.

Logo abaixo temos o seguinte código:

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);

}

Troque apenas o trecho em vermelho pelo seguinte código:

  margin-top:-197px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 70px;

Os números que eu defini são para o meu cabeçalho, visualize para ver onde o seu menu foi parar. Ajuste o 197 do margin-top para mais se você quiser que ele suba e para menos se quiser que ele desça. Altere o margin-left para mais se quiser que vá mais para a direita, e coloque um número negativo se quiser que vá mais para a esquerda. Deixe o margin-right sempre no zero.
O margin-bottom define a distância entre o menu e o conteúdo do blog. Aumente o número se quiser que o conteúdo se afaste mais e diminua se quiser que ele chegue mais perto. Vá visualizando o template para ir ajustando até ficar no lugar certo.

Logo abaixo, temos o seguinte trecho:

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

Troque ele todo por esse:

.tabs-inner .widget li a {
  display: inline-block;
height: 26px;
  padding: .5em 1em;
padding-top: 10px;
  font: $(tabs.font);
  color: $(tabs.text.color);
  border-$endSide: 3px solid mediumvioletred;
}

O primeiro código em vermelho é a altura do seu menu. Aumente ou diminua o valor de acordo com seu template. O segundo em vermelho é a borda que fica entre cada link, 3px é a largura da mesma (se quiser você pode colocar 2px, 1px ou 0px se não quiser borda nenhuma), solid é o tracejado da borda, se quiser a linha tracejada, troque por dashed e se quiser pontilhada coloque dotted. Mediumvioletred é a cor. Você pode trocar um código hexadecimal (ex: #000000 para preto) ou por uma Named Color (ex: black).

Mais abaixo um pouco temos os seguintes códigos:

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Troque todo o código por estes:

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a {
  color: mediumvioletred;
  background-color: black;

  text-decoration: none;
}

.tabs-inner .widget li a:hover {
 color: mediumvioletred;
  background-color: hotpink;

  text-decoration: none;
}

A primeira parte destacada em vermelho define quais serão as cores da aba selecionada, color é a cor da fonte e background-color é a cor do fundo. O segundo código em vermelho se refer as cores da baba quando passamos o mouse, color é a cor da fonte e background-color a cor do fundo. Troque as cores que eu coloquei por outra em named color (como black, por exemplo) ou por um código hexadecimal (como #000000 por exemplo).

Visualize, se tudo estiver certo, seu template estará perfeito!!! Clique em "Salvar Modelo" para terminar.

Continue o tutorial na Parte 3!!!


Mil Sweetkisses,
10 Comentários
Comentários

10 comentários:

  1. Sao demais essas dicas para melhorar um template, gostei demais (:
    Beeeeeeeeeijos ;*
    http://sooulteen.blogspot.com.br/

    ResponderExcluir
  2. um mega tutu! e tudo bem explicadinho!♥
    http://kelly-club.blogspot.com.br

    ResponderExcluir
  3. Oi amiga, como sempre, vc explicou mutio bem!Estou adorando essas postagens, que sabe um dia eu crio coragem e mudo o meu modelo basiquinho, que é o mesmo desde 2007 rs!
    bjns
    cadernocolorido.blogspot.com

    ResponderExcluir
  4. ora sheila não precisa pedir desculpa! foi por causa desses problemas horriveis que temos no pc que tirei o player e justo eu ficar com raiva de vc? que me acompanhou desde do meu primeiro blog? que mais me apoiu a continuar? dizendo que o desing tava lindo enquanto estava um porcaria? ora não diga bobagem rsrs

    ResponderExcluir
  5. que legal esse post, explicado mtmt bem, vai ajudar mt gente em *-*

    Floor, tem post novo lá no blog, o primeiro post da Giih, comenta lá *-*
    http://s2-fearless.blogspot.com.br/

    Beeijos, Marianna ..

    ResponderExcluir
  6. Oiee Sheila tudu bem?nossa otima postagem,aprendi muito,Olha tem uma postagem super fofa vc vai Adorar,to te esperando
    Beijos
    Rebequinha
    http://rebequinhaclemente.blogspot.com.br/

    ResponderExcluir
  7. Olá minha querida como vai?
    Selinho pra você :)
    http://jesguinha.blogspot.com.br/2012/04/tag.html

    ResponderExcluir
  8. cou seguir direitinho Sheila, vamos vr se eu consigo vou acordar até cedo rsrs!!!
    bjus um final de semana perfeito pra vc também!!!

    ResponderExcluir
  9. Super bem explicado e super bem feito. bjs

    http://makesdajojo.blogspot.com/

    ResponderExcluir
  10. Dicas maravilhosas para quem é iniciante no mundo blogueiro. Parabéns pelo tutorial! ^^

    KKKKKKKKKKKKKKKKKKKKK! Eu ri demais com sua história. Que péssima experiência você teve... Lol!

    Beijo!

    www.delicadissima.com
    www.delicadissima.com

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados