8 de nov. de 2012

Criando um Layout part 2 - personalização básica


H

ello cutes! Tudo bem?
Bom, eu fiquei um tempinho sem postar sobre o nosso big tutorial, mas já estou de volta! Hoje eu vou focar principalmente na personalização do layout, okay? Curioso? Cliquem em leia mais!
créditos: ♥ 
participe do super concurso que está rolando aqui no CT, valendo um layout + entrevista + divulgação por 1 mês! Tá esperando o que? Clique aqui e participe :) 


 
Primeiro, nós iremos colocar um background no blog, para dar um up e deixá-lo mais bonitinho! Para isso siga os passos a seguir:
vá em modelo  clique em personalizar  vá na aba plano de fundo  clique em "remover imagem"

faça o upload do background 

clique para ampliar :)

clique em aplicar ao blog e volte para o blogger

Agora, nós iremos personalizar a data dos posts, e para isso teremos que mexer no HTML do blog e nas configurações. Vamos lá?!
vá em configurações  vá na aba "idioma e formatação"  clique em formato da data  selecione logo a primeira opção 08/11/12  salve

Depois de editar a formatação da data, vamos personaliza-la e deixa-la mais bonitinha! Vá em:
modelo  editar HTML  de Ctrl F e procure por main-inner h2.date-header {

Achou? Então apague todo este código que o acompanha:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
 e substitua por este outro código abaixo:
.main-inner h2.date-header {
font: georgia; 
color: #fff; /* Cor da fonte */
margin-left: -85px; /* Espaço entre data e área do post, altere até ficar do tamanho certo */ 
background: #FF69B4; /* Cor do fundo */
float: left; /* Posicionamento, caso a sua barra lateral seja do lado esquerdo, mude para left */
font-size: 11px; /* Tamanho da fonte */
padding: 4px; 
border-radius: 10px; /* Bordas arredondadas */
}
.main-inner h2.date-header:hover {
background: #66CDAA; /* Cor do fundo quando passa o mouse */
}
agora é só você editar! Aconselho essa tabela de cores aqui, ela realmente é muito boa e apresenta uma variedade de cores :) Visualize e se der tudo certo, salve!

Agora iremos personalizar o título dos posts, okay? Bom, é super simples de se fazer, mas mesmo assim preste atenção.

1. Acesse o site Google Web Fonts e escolha uma das fontes
2Clique em Quick-use. Veja aqui
3. Copie esse código. 
4. Acima de </head> você cola o código da fonte. 
5. No código da fonte, antes disso você deve colocar isso e salvar.

E pronto, sua fonte vai estar instalada no seu blog. Agora iremos colocar no titulo do post! Procure por
 h3.post-title a { 
e abaixo dele, localize font: Então, cole ao lado de font: isso:
normal 44px "NOME DA SUA FONTE";
Aonde está o numero 44px é o tamanho da fonte. Aonde está o NOME DA SUA FONTE, você deve colar o código referente a fonte escolhida. Visualize e se estiver tudo ok salve.

13 comentários:

  1. Gostei de mais do tuto!! Dá um pouquinho de trabalho para personalizar o código mais vale muita a pena né!? Fica lindo :D

    http://morangosdespedacados.blogspot.com/

    ResponderExcluir
  2. Hey pequena, em alguns selos lá no blog para você :3

    http://capricornizando.blogspot.com.br/2012/11/ganhei-5-selos.html

    ResponderExcluir
  3. Tuto bem elaborado, gostei sz
    Fica lindo né? Beijoos'
    Up> Sweet Magia

    ResponderExcluir
  4. Tuto bem elaborado, gostei sz
    Fica lindo né? Beijoos'
    Up> Sweet Magia

    ResponderExcluir
  5. Tão fofo esse blog.
    estarei seguindo.
    Beijos

    ResponderExcluir
  6. Oi flor !! você disse nos comentarios do meu blog que queria afiliação !! então acabei de fazer meu gadgetes de afiliados e queria que você participasse tá .. se aceita comenta lá ♥ BJSS

    ResponderExcluir
  7. Adorei o tutorial, tá mega elaborado, viu? Vai ajudar muita gente :D
    Ótimo post!
    Beijinhos :*

    PiinkCookie.blogspot.com

    ResponderExcluir
  8. Nossa, vc é mto fera em html, ameei o novo lay, esse post foi mto útil. Principalmente o formato da data, é lindinho! Beijos, Giovana.
    girlsabout.blospot.com

    ResponderExcluir
  9. Adorei o big tutorial! bem legal!

    ResponderExcluir
  10. É ótimo,que pena que já coloquei o meu!Criei um novo blog,poderia participar da minha enquete para saber o que devo postar em minha primeira postagem?Amei seu blog vou seguir!Ah quase ia me esquecendo,o endereço é:http://girl-teen1.blogspot.com.br/ Agradeço!

    ResponderExcluir
  11. Da um pouquinho de trabalho, mas compensa. *-* Adorei o big tutorial.

    http://blog-wonderland-cherry.blogspot.com.br/

    ResponderExcluir
  12. Oiie disculpa agente não ter te respondido desde de dia 08 perdão mesmo mais divulgaremos sim no espaço do blog (SITE FAMILY) Vamos seguir seu blog e sua foto estara no site hj mt obrigada e desculpa agente mais uma vez!

    ResponderExcluir
  13. Muito fofo da sua parte ensinar como fazer bum layout, tanta gente precisa, beijos!

    docefuturo.blogspot.com

    ResponderExcluir

LEIA ANTES DE COMENTAR
-não faço parcerias, apenas afiliações
-"segue meu blog" ou "seguindo, segue de volta" - só seguirei os blogs que eu realmente gostar, okay?
-não aceito tags nem selinhos
-deixe o link do seu blog no fim do comentário para que eu possa retribuir a visita