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

16/01/2013

NOVO: Como Fazer Templates - Novo modelo!!!

Há um tempo atrás, postei uma série de postagens que ensinou aos blogueiros iniciantes como fazer um template básico com uma imagem dividida em três. Hoje vamos aprender um processo semelhante, mas dessa vez usaremos só uma imagem para o cabeçalho e a imagem do fundo. Se tudo der certo, ele ficará semelhante ao template atual do DSM:


Como Fazer Templates - Novo Modelo:

A primeira coisa que você precisará fazer é montar o seu cabeçalho. Para tanto, é necessário que você confeccione num programa de edição de imagens à sua escolha uma imagem inteira retangular, sem espaço para o menu, caso queira que seu menu de páginas fique na sidebar:


Ou com o espaço para o menu horizontal, se preferir:


Eu fiz a imagem com a largura de 990px, mas se você preferir, pode ser maior ou menor, de acordo com o tamanho que você queira para seu template.
Hospede agora essa imagem que você acabou de fazer na web. Nesse link vocês irão encontrar dicas para hospedar as imagens. Eu uso o Tumblr, pois é o mais seguro. Você também pode colocá-las pelo próprio Blogger e pegar o endereço delas depois (mas cuidado com seu limite de fotos do Picasa). Não recomendo que você use o Photobucket pois a versão gratuita tem limites de visualizações. Hospede também a imagem que você vai usar como fundo.

Preparando o Blog:

Lembrando que antes de toda e qualquer modificação do seu template, recomenda-se que você faça uma cópia de TODO o código atual para que no caso de acidentes você possa recuperá-lo. De preferência, faça um backup.

Dessa vez, você precisará fazer os passos a seguir direto no seu blog, então não se esqueça de salvar uma cópia do seu template atual. Para começar, entre no "Designer do Modelo", na aba Modelo > Personalizar, clicando no botão laranja logo abaixo do seu template atual. Assim que abrir, coloque no seu blog o último modelo do "Simples" (o branco). Clique na imagem abaixo para ver os detalhes:


Ainda no Designer, clique na aba Layout e escolha o da sua preferência (não precisa ser igual ao que eu escolhi, pode ser qualquer um):


Depois Clique em "Ajustar Larguras" e coloque no valor "Todo o blog" a largura da imagem que você acabou de criar. A minha imagem tem 990px de largura, então o meu blog terá 990 em "Todo o blog". Os outros valores coloque ao seu gosto:


Por fim, vamos à aba "Avançado". Antes de ajustar as outras cores, vá na opção "Planos de fundo" e coloque todos os três como "Transparente". Vai continuar tudo branco no Designer (o print abaixo é antigo):


Agora vá em cada uma das outras opções e coloque as cores e as fontes a seu gosto, dos links, dos textos, dos títulos, etc...
Quando todas as cores estiverem escolhidas, clique em "Aplicar ao blog":



Coloque as abas (menu) no lugar:

Caso você queira um menu horizontal, entre no Painel 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".

Se quiser que o seu menu de páginas fique na sidebar, escolha a opção "Links Laterais".

Colocando o Cabeçalho (Header):

A próxima coisa que vamos fazer é colocar o cabeçalho. Entre na aba Layout (Design) e clique no link "Editar", do seu cabeçalho. Vai abrir uma pou-up. No item "Imagem", cole o endereço da imagem que você acabou de hospedar 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 pelo 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 (só que com o seu cabeçalho e sem o fundo):


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.

Colocando o menu em cima do cabeçalho:

Se você quer o menu horizontal em cima do cabeçalho, siga os passos a seguir. Se não quiser, passe direto para "Últimos passos".
Para colocar 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.

Últimos passos:

Agora, siga todos os passos do tutorial "Estilo diferente para cada Gadget", disponível neste link. Com esse tutorial, você irá personalizar a sidebar e a área de postagem.

Acessórios:

Depois de seguir o tutorial, talvez você queira colocar alguns acessórios, então dê uma olhadinha nas postagens abaixo:

Marcadores em forma de menu
Background diferente em cada página do blog
Personalizar h3 (h3.post-title)
Personalizar títulos da postagem
Personalizar o Link Within (cores)
Cursor que muda no link
Sombra na fonte dos títulos
Imagens diferentes no título de cada Gadget/Widget
Personalizar o LinkWithin (texto e posição)
Ícones para Anterior, Próxima e Home
Personalizar a caixa de busca II
Personalizar o Jump-break (leia mais)
Mudar a cor da seleção
Links postagens mais antigas/recentes e home
Cursores prontos para o seu blog
Setas de voltar ao topo prontas
Assinatura na postagem
Barra de Ferramentas da Cat-us
Para o topo
Imagem no "H2"
Favicon

Não estão todos os tutoriais aqui, mas estão os principais, espero que gostem!!!

Pronto, você já fez seu template! Caso não tenha dado certo, coloque outra vez seu template anterior, aquele que você guardou ou fez backup!

Mil Sweetkisses,
6 Comentários
Comentários

6 comentários:

  1. Muito legal essa postagem, depois quero dar uma olhadinha também nos outros tutoriais para quando eu quiser dar uma incrementada no meu blog. Um abraço!

    ResponderExcluir
  2. Adorei o tutorial , algumas coisa eu ja sabia outras não ...super legal!
    Seguindo aqui , se puder visite o meu bloguito também :)

    Bjus
    rosachoquemakeup.blogspot.com

    ResponderExcluir
  3. Valeu pelas dicas. Não sabia sobre o tamanho das imagens. Bjus!!!

    galerafashion.blogspot.com.br

    ResponderExcluir
  4. Oi Sheilaaaa...saudades e saudades... vou voltar a bloggar agora, uma postagem semanal, finalmente consegui arrumar as coisas aqui, ao menos vou poder tirar duas hora na semana pra fazer a postagem e mais duas hora pra retribuir os comentários... estava olhando aqui a postagem, vou fazer meu novo template e como sempre recorri aqui né... tá tudo tão lindo aqui... parabéns, vou fazer um novo banner pra mim e assim que tudo estiver pronto te falo viu... Bjks amiga.

    ResponderExcluir
  5. Obrigada pelas dicas!
    Tá rolando uma enquete lá no http://santaclaraartesanato.blogspot.com.br/ conto contigo!
    bjin

    ResponderExcluir

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