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 + "_headerimg"' 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);
}
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;
}
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;
}
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:
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,

Sao demais essas dicas para melhorar um template, gostei demais (:
ResponderExcluirBeeeeeeeeeijos ;*
http://sooulteen.blogspot.com.br/
um mega tutu! e tudo bem explicadinho!♥
ResponderExcluirhttp://kelly-club.blogspot.com.br
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!
ResponderExcluirbjns
cadernocolorido.blogspot.com
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
ResponderExcluirque legal esse post, explicado mtmt bem, vai ajudar mt gente em *-*
ResponderExcluirFloor, tem post novo lá no blog, o primeiro post da Giih, comenta lá *-*
http://s2-fearless.blogspot.com.br/
Beeijos, Marianna ..
Oiee Sheila tudu bem?nossa otima postagem,aprendi muito,Olha tem uma postagem super fofa vc vai Adorar,to te esperando
ResponderExcluirBeijos
Rebequinha
http://rebequinhaclemente.blogspot.com.br/
Olá minha querida como vai?
ResponderExcluirSelinho pra você :)
http://jesguinha.blogspot.com.br/2012/04/tag.html
cou seguir direitinho Sheila, vamos vr se eu consigo vou acordar até cedo rsrs!!!
ResponderExcluirbjus um final de semana perfeito pra vc também!!!
Super bem explicado e super bem feito. bjs
ResponderExcluirhttp://makesdajojo.blogspot.com/
Dicas maravilhosas para quem é iniciante no mundo blogueiro. Parabéns pelo tutorial! ^^
ResponderExcluirKKKKKKKKKKKKKKKKKKKKK! Eu ri demais com sua história. Que péssima experiência você teve... Lol!
Beijo!
www.delicadissima.com
www.delicadissima.com