Oie gente hoje vou ensinar a fazer um layout básico, ele é modelo viagem e até bom esse modelo porque pode aplicar vários estilos, porque os códigos são fáceis de identificar, vai ser com ele que eu vou ensinar outros tutoriais mais na frente. Então vamos lá.
Passo 1
Vá em designer de modelo e clique no modelo viagem--> travel, veja a imagem
clique na imagem pra visualizar melhor.
Passo 2
Retirar a Folha Branca
Sabe essa folha amassada, que ficou no fundo do titulo do blo. vá em modelo>> editar Html. aperte a tecla Ctrl F e procure content-outer .content-cap-top {
você vai achar isso, apague os códigos em negrito:
.content-outer .content-cap-top { height:$(content.imageBorder.top.space);background: transparent $(content.imageBorder.top) repeat-x scroll top center;}.content-outer {margin: 0 auto;padding-top: $(content.margin);}.content-inner {background:$(content.background);background-position: left -$(content.imageBorder.top.space);background-color: $(content.background.color);padding:
$(content.padding);}
Visualize se estiver tudo ok, salve. Clique na imagem para visualizar melhor
Passo 3
Volte em designer de modelo e coloque um plano de fundo, de sua preferencia: veja o exemplo:
Passo 4
Ajuste as larguras e o layout do blog :
Passo 5
Personalize os detalhes:
Passo 1
Vá em designer de modelo e clique no modelo viagem--> travel, veja a imagem
clique na imagem pra visualizar melhor.
Passo 2
Retirar a Folha Branca
Sabe essa folha amassada, que ficou no fundo do titulo do blo. vá em modelo>> editar Html. aperte a tecla Ctrl F e procure content-outer .content-cap-top {
você vai achar isso, apague os códigos em negrito:
.content-outer .content-cap-top { height:$(content.imageBorder.top.space);background: transparent $(content.imageBorder.top) repeat-x scroll top center;}.content-outer {margin: 0 auto;padding-top: $(content.margin);}.content-inner {background:$(content.background);background-position: left -$(content.imageBorder.top.space);background-color: $(content.background.color);padding:
$(content.padding);}
Visualize se estiver tudo ok, salve. Clique na imagem para visualizar melhor
Volte em designer de modelo e coloque um plano de fundo, de sua preferencia: veja o exemplo:
Passo 4
Ajuste as larguras e o layout do blog :
Passo 5
Personalize os detalhes:
agora clique na aba avançado
Texto da página= cor, tamanho, formatação e fonte da página. Não coloque fontes muitos enroladas,prefira, Arial, Verdana ou Trebuchet. De prefêrencia,use a cor preta.
Links= essa é a cor dos links. Primeiro, coloque a cor dos links normal. Depois a cor dos itens visitados e cor do destaque, que é uma cor alternativa.
Titulo do Blog: Altere para 0px e cor transparente.
Descrição do blog: A mesma coisa do Texto da página
Plano de Fundo Da Postagem: coloque tons Brancos.
Cor do titulo do gadget: Praticamente o mesmo que Titulo do blog.
Texto dos gadgets: o mesmo que a aba links, mais esse vai mudar somente o link dos gadgets.
Plano de Fundo Da Barra Lateral: Você pode alterar a cor pra uma de corzinha diferente não coloque muito forte, Mas se quiser transparente, porque mais na frente vou ensinar a separar-las, e voce vai ter que ter colocado
transparente.
Clique em "Aplicar ao Blog"
Pronto Esse Foi o Tutorial , Recomendo Que acompanhe os próximos tutoriais irão ajudar a melhorar o blog!!
Bjinhos *-*
muitoo Bom o Tutorial me ajudouu no meu blog ^^
ResponderExcluir