Oi Docinhos, tudo bem ??, espero que sim né . . .
Bem vamos ao assunto principal da postagem de hoje
e a postagem de hoje vai ser um " Tutorial " bem legal !!!
e o tutorial é de como fazer um layout simples mais bonito
eu espero que vocês gostem,, pois fiz meu 1° layout dia 05
e ficou muito bonito, bom bonito foi oque disseram né . . .
Mais eu to aqui com papo furado não acha ??
vamos logo ao tutorial,, e faça direitinho para ficar bem bonitinho
então vamos lá agora ??
Créditos meninas eu achei esses tutoriais em 2 blogs e 1 eu fechei e não consegui encontrar ele novamente
então os créditos vai somente para Cherry Bomb,, e meninas algumas coisinhas foi eu que fiz ok??
1° Passo
2° Passo
Depois tem o " Plano de Fundo "
x - - > clique em " Remover Imagem "
x - - > e depois tem uma seta ao lado,, clique nela e abrira uma pagina
x - - > clique em " Fazer upload da imagem " e depois em " escolher arquivo "
Algumas imagens de plano de fundo : : : :
3° Passo
Depois, você modifica o tamanho do template em 'Ajustar Larguras ' e modifique para :
1000 x 310
4° passo
Depois, escolha o corpo do Layout em: 'Layout', de preferência coloque:
2° Passo
x - - > Vá em avançado
x - - > depois em " Texto de pagina "
de preferencia Fonte " Verdana "
e a cor " #000000 "
x - - > Plano de fundo externo e Plano de fundo principal
coloque a opção " Transparente "
x - - > Links
os links coloque as cores que quiser mais recomendo..
#f59fc9 , #fa7ebb e #f8d6e7
essas cores são rosas . . . .
x - - > Titulo do blog
o titulo do blog coloque a fonte que quiser e a cor que quiser
x - - > Texto das guias
coloque a fonte que quiser
de preferencia " Verdana " e a cor que quiser
x - - > Plano de fundo das guias
eu coloquei
1° - - > #000000
2° - - > #333333
x - - > Cabeçalho de data
eu recomendo que deixe a cor que esta
x - > #666666
e a fonte " Verdana "
x - - > Titulo da postagem
eu coloquei a fonte " Arial "
e a cor " #fa7ebb "
x - - > Plano de fundo de postagem
eu coloquei #ffffff
Mais você pode colocar a cor que quiser
x - - > Cor do titulo do gadget
Fonte " Verdana " e cor que quiser
a cor eu coloquei " #fa7ebb "
x - - > Texto do gadget
eu coloquei " Verdana " e cor " #666666 "
x - - > Links dos gadgets
escolha as cores que quiser, eu recomendo estas
" #f83797 " " #fa7ebb " " #f83797 "
x - - > Plano de fundo da barra lateral
Cores coloquem " Transparente "
x - - > Mobile Button Color
cor - - > #ffffff
x - - > Adicionar css
não coloque nada
x - - > Tirando a Navbar
- - > Vá em layout
- - > lá em cima tem escrito Navbar
- - > cliquem em desativado e pronto
Agora vamos mexer no HTML do blog para deixá-lo bonitinho.
Clique em editar HTML
Vamos começar as modificações. Primeiro vamos tirar aquelas bordinhas de papel horrorosas. Aperte Ctrl+F e procure por .content-outer .content-cap-top {
Logo abaixo disso, você irá apagar apenas o que está destacado em verde na imagem, nada mais nada menos! Atenção para os ponto e vírgula.
Para o próximo passo, precisamos colocar uma imagem de cabeçalho no blog. Eu fiz uma só para dar o exemplo, mas você já pode usar a sua imagem definitiva. Lembre-se sempre de fazer uma imagem da largura do seu blog (Veja qual é a largura no designer de modelo).
Lá em layout clique em "Editar" no gadget do cabeçalho:
Vai abri uma janela, lá você clica em "Fazer upload da imagem" e escolhe sua imagem de topo. Em posicionamento, marque a opção "Em vez de título e descrição". Quando a imagem for totalmente carregada, é só salvar.
Agora vamos voltar para o Modelo HTML do blog. (Modelo > Editar HTML > Prosseguir)
Iremos retirar aquele espaço chato que fica entre a imagem do cabeçalho e o resto do blog. A maioria dos layouts fica melhor sem aquele espaço, mas se você achar que não precisa tirar, pule essa etapa.
Aperte Ctrl+F e procure por: /* Tabs
Logo abaixo você verá esse código:
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
Apague o que está destacado.
Aperte Ctrl+F de novo e procure por .main-inner {
Logo abaixo desse código, você vai acrescentar essa linha: margin-top: -20px;
Agora é só modificar o número (20) até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço.
Se você quiser aumentar esse espaço, é só tirar o sinal de menos (-).
Já fizemos as principais modificações no nosso layout
faça coisas novas nele se divirta fazendo