A primeira coisa quando se pensa em criar um blog, é no visual, pois é para se ter um blog de sucesso é necessário criar uma identidade ao seu blog, deixa-lo com a sua cara e com a do tema em que ele ira abordar .Para você ter um blog bonito e todo personalizado não é tão dificil assim, na internet você encontra varios tutorias ensinando como deixa-lo todo fofo,
Que tal personalizar a data de seu blog, e deixa-la linda.
Ai vai um tutorial que peguei no blog Go I magine , um blog maravilhoso para quem quer personalizar o seu. Vale a pena conferir.
Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML > Prossseguir) e procure por:
- Se colocar right em float, mude margin-left por margin-right.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/
Que tal personalizar a data de seu blog, e deixa-la linda.
Ai vai um tutorial que peguei no blog Go I magine , um blog maravilhoso para quem quer personalizar o seu. Vale a pena conferir.
Sua data ficará assim:
Curtiu? Então leia mais (:
Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:
"Dia Mês Ano" |
Então substitua esse código por:.main-inner h2.date-header {font: $(date.font);color: $(date.text.color);}
Observações:
.main-inner h2.date-header {
float: left; /** data no lado esquerdo, pode mudar para right **/
width:55px;/** largura **/
height:55px;/** altura **/
overflow:hidden;
font-size:15px;/** tamanho da fonte **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-bottom: -65px; /** desce **/
margin-left: -80px; /** margem pra esquerda **/
padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/
background: #FF6C91; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #E9B4BB; /** cor do fundo hover **/
}
- Se colocar right em float, mude margin-left por margin-right.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/
- Dependendo da sua fonte e tamanho
pode ficar meio desconfigurado, aí é só você fazer os ajustes
necessários (mudar valores de padding, margin, font-size, widht, height
etc) e deixar do jeito que você quiser.
Testado somente no modelo Travel! Espero que gostem, beijos :*
Muito bom o tuto,muito util!
ResponderExcluirTo usando essa personalização da data no meu blog ;)
minhas-confissoes-2012.blogspot.com
Gostei bastante obrigada estava procurando isso mesmo hehe
ResponderExcluirhttp://tips-in-london-nayara.blogspot.com.br/
Ola obrigada!! Adorei!! Bejos
ResponderExcluirtruquesparadivas.blogspot.com.br
Obrigada! Esse tuto é incrível mesmo. Funciona direitinho!
ResponderExcluirVISITE: www.thehomedream.blogspot.com
o meu não foi :(
ResponderExcluirFiz passo a passo, e não pegou.. o que fazer? Helppp!
ResponderExcluirnão deu certo o que faço?
ResponderExcluirhttp://sweetgirlblogoficiall.blogspot.com.br/
ADOREI A DICA FOI MUITO BOM
ResponderExcluirVISITA :http://cosmeticosbons.blogspot.com/
Adorei, foi o único que deu certo pra mim!
ResponderExcluirO MEU FICOU QUADRADO .-.
ResponderExcluirhttp://aolhardeumgaroto.blogspot.com.br/
Muito obrigado, me ajudou bastante
ResponderExcluiramei ficou perfeito do jeito que queria. Domo Arigatou
ResponderExcluirObrigada! Ficou muito lindo no meu layout :D
ResponderExcluirGO IMAGINE é divo<3
Adorei o seu blog! De verdade, me identifiquei super! Aliás, otimo tutorial!
ResponderExcluirBeijoss ♥♥
http://natalibispo.blogspot.com.br/