7.12.13

Como fazer um layout simples e kawaii

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

Beijos de  

2 comentários:

。 Ei carinha fofa >< seja gentil e não seja mal - - Educado :D
。 Cupcakes de morando deixe o link do seu blog eu visitarei
。 De sua opnião ,, mais se for muito mal eu não me aguentarei de raiva ...
。 Respondo todos os comentários rsrs... ... ... ...
。◕‿◕。 Hey... e obrigada pelo comentário use nossas carinhas

❣◕ ‿ ◕❣ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀
❁◕ ‿ ◕❁ ✾◕ ‿ ◕✾ ◡‿◡✿
✿◠‿◠ ≧◔◡◔≦ ಥ_ಥ
≧�◡�≦ ≧^◡^≦ ≧✯◡✯≦
✿⍲◡⍲ ◕‿‿◕ ( ● ω ● )>(o゜ェ゜o)