Blush-se: Dicas básicas: como criar um layout para o seu blog sozinha(o).(Plataforma blogger)

15 de jul de 2014

Dicas básicas: como criar um layout para o seu blog sozinha(o).(Plataforma blogger)

Imagem: Google

  Oi genteee.
  Hoje vim fazer um post que eu acho super útil, porque existem muitas pessoas que desejam criar um blog mas não criam porque não sabem nem como começar com o layout. E também tem muitas blogueiras que muitas vezes encomendam layouts, ou que seus blogs tem posts incríveis mas que a aparência não exprime realmente oque é.
  E pelo menos pra mim, o layout é uma das almas do blog.
Então pra começar:

1-Encomendar ainda é uma opção, existem webdesigners incríveis que podem fazer o layout do seu blog do jeito que quiser, mas a maioria cobra, então se não quiser gastar dinheiro...
2-Existem muitos sites e blogs com tutoriais que podem te ajudar, e com base nisso aprenda a criar seu layout sozinha:

  Para começar, você precisa ter uma base(como assim?) e não é base sobre o assunto não, é base mesmo.
  É só pesquisar no Sr. Google as palavras: layout base free. Ou layout free.
  Esses são os layouts que algumas webdesigners disponibilizam gratuitamente, alguns deles estão disponíveis para download, e outros tem o código html.
  Para os que estão para download:
-Muitas vezes quem criou disponibiliza o download no 4shared ou no Mediafire, é super simples, basta você fazer o download no site. E no seu blog fazer o seguinte:
(clique na imagem para ampliar)

 Na página "modelo", você clica em Backup/Restaurar. Vão aparecer duas opções:
-Fazer download de modelo completo.(super recomendo, se o layout der errado, ao menos você salvou o seu antigo).
-Escolher arquivo.
 Você clica em escolher arquivo, e vai até onde você salvou o layout free. Prontinho.
  •  Mas e se o layout free for disponibilizado em html, oque eu faço?
  Geralmente, o código do html vai ser disponibilizado no site pastebin. Não se assuste, o código é enorme mesmo. Você copia todo o primeiro código(existem 2, um grandão em cima, e um reduzido embaixo).
Vem aqui em editar html:
(clique na imagem para ampliar)

 Apaga tudo, e cola o código que você tinha copiado.
 Prontinho.
 E você não precisa fazer isso só com um layout básico(para quem quer personalizar), pode fazer um um layout free completo, e existem vários por ai.

Aprenda a personalizar seu layout:
  Agora que você já tem uma base para seu layout, você pode mudar as cores, colocar um cabeçalho, mudar a fonte, e com o tempo ir fazendo mudanças radicais.
  Para colocar um cabeçalho, é só ir em layout.
  E para as outras mudanças:
  • Aprenda facilmente a editar do jeito que quiser:
  Para mudar estilo dos comentários, posts, gadgets, entre outros. Você deve mudar em certos locais do html.
  Vá em editar HTML, e dê CTRL+f.
   Para mudar o estilo dos posts procure: /* Posts
   Dos comentários: /* Comments
   Dos gadgets: /* Widgets

Embaixo do que você procurar, estarão códigos. Algumas regras:
-Você sempre deve separar uma parte do código para outra com ;
-Um código sempre deve terminar com } se não dá errado.
Exemplo:
margin-top: -5px;
font-style: normal;
}

Oque as "coisas" do HTML querem dizer:
  • font-color: É a cor da fonte, você deve utilizar códigos. Exemplo, se quiser a cor branca, deve colocar font-color: #ffffff; Pois #FFFFFF é o código da cor branca. Para saber o código de alguma cor, entre aqui.(você deve usar o código html.
  • font-style: É o estilo da fonte, normal, itálico, ou negrito. Se quiser normal é só escrever normal, se quiser negrito é só escrever bold.Sempre lembrando de "fechar" com ;
  • font-size: É o tamanho da fonte, que é medido por px. Exemplo, se tiver: font-size: 10px; E você quiser maior, aumente para 11px ou um número maior até desejado. E diminua se quiser a letra menor.
  • font-family: É o estilo da fonte também, mas refere a nome, você pode escolher a fonte que quiser. Pode ser Arial, Century Gothic, Courier, Verdana, Helvetica. Várias fontes do word podem ser usadas no seu blog, é só colocar o nome no html.
  • text-align: É o posicionamento do texto. Coloque Center se quiser que fique alinhado no centro, justify se quiser normal.
  • background: É a cor de fundo, se você estiver na parte de posts, background vai se referir ao fundo, que geralmente é branco, mas você pode mudar, e é a mesma história das cores em códigos.
Agora vamos dar um exemplo, finjam que eu tenho um blog, e o código do título do meu blog:
-Ps: Para mudar o título das postagens, dê CTRL+F e procure h3.post-title { e modifique oque está embaixo de acordo com oque aprendeu, faça o mesmo no código embaixo que começa com h3.post-title a {.
Continuando, finge que meu título está enooooorme, preto, e negrito, e eu quero mudá-lo, atualmente está assim:
h3.post-title {
text-align: justify;
font-family: Arial;
font-color: #000000(código da cor preta);
font-style: normal;
font-size: 50px;
}
h3. post-title a {
text-align: justify;
font-family: Arial;
font-color: #000000(código da cor preta);
font-style: normal;
font-size: 50px;
}

 E quero mudar para uma fonte diferente, deixar a fonte branca, o texto centralizado e diminuir o tamanho.
É só seguir oque eu falei:

h3.post-title {
text-align: center;
font-family: Verdana;
font-color: #ffffff(código da cor branca);
font-style: normal;
font-size: 20px;
}
h3. post-title a {
text-align: center;
font-family: Verdana;
font-color: #ffffff(código da cor branca);
font-style: normal;
font-size: 20px;
}

  Basicamente é isso, e falando mais sobre as fontes e tal.
  Futuramente pretendo fazer um post falando sobre outras partes, sobre como adicionar bordas, sombras, mudar imagens.
  Se eu fosse falar sobre tudo o post ficaria maior do que já está hahaha.
  Mas tudo é bem prático, eu aprendi pesquisando e vendo tutoriais. Se você quiser que a sua área de post tenha uma borda, é só pesquisar exatamente isso e vão aparecer vários tutoriais. É só seguir oque fala, super fácil.
  Também estou aqui a disposição, se quiserem alguma dica, ou tutorial eu posto.
   Beijão,




4 comentários:

  1. Adoreeeeei o post Eloá , super útil mesmo , parabéns !!

    ResponderExcluir
    Respostas
    1. Que boooooooooooooom que gostou Ana <3

      Excluir
  2. Oii linda,
    Eu adorei as dicas. Você explicou super bem.
    Eu adoro aprender mais sobre como criar layouts e dicas de html.
    Esse post com certeza vai ajudar muitas pessoas.
    Te convido a conhecer o meu blog.
    Beijinhoss <3
    BLOG GLAMOUR SECRETS

    ResponderExcluir
    Respostas
    1. Que bom que gostou, pretendo fazer mais posts desse tipo.Espero que ajude mesmo <3

      Excluir