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:
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!.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 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
2. Clique 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.
Gostei de mais do tuto!! Dá um pouquinho de trabalho para personalizar o código mais vale muita a pena né!? Fica lindo :D
ResponderExcluirhttp://morangosdespedacados.blogspot.com/
Hey pequena, em alguns selos lá no blog para você :3
ResponderExcluirhttp://capricornizando.blogspot.com.br/2012/11/ganhei-5-selos.html
Tuto bem elaborado, gostei sz
ResponderExcluirFica lindo né? Beijoos'
Up> Sweet Magia
Tuto bem elaborado, gostei sz
ResponderExcluirFica lindo né? Beijoos'
Up> Sweet Magia
Tão fofo esse blog.
ResponderExcluirestarei seguindo.
Beijos
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
ResponderExcluirAdorei o tutorial, tá mega elaborado, viu? Vai ajudar muita gente :D
ResponderExcluirÓtimo post!
Beijinhos :*
PiinkCookie.blogspot.com
Nossa, vc é mto fera em html, ameei o novo lay, esse post foi mto útil. Principalmente o formato da data, é lindinho! Beijos, Giovana.
ResponderExcluirgirlsabout.blospot.com
Adorei o big tutorial! bem legal!
ResponderExcluirÉ ó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!
ResponderExcluirDa um pouquinho de trabalho, mas compensa. *-* Adorei o big tutorial.
ResponderExcluirhttp://blog-wonderland-cherry.blogspot.com.br/
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!
ResponderExcluirMuito fofo da sua parte ensinar como fazer bum layout, tanta gente precisa, beijos!
ResponderExcluirdocefuturo.blogspot.com