09 abril 2013

Data Personalizada {Exclusivo!}

| |
Já ouviram Here's To Never Growing Up da Avril Lavigne? É perfeita, véi. É aquele tipo de música que te trás boas vibrações e não é aquele pop "forte" que a Avril costuma cantar (tipo, What The Hell e Girlfriend). Se ainda não ouviu, clique aqui.

~ Hey!
Não sabem a saudade que eu senti do blog, gente. Para quem não viu, eu deixei o blog fechado por quase quatro dias porque eu percebi que a minha sidebar não estava funcionando, as tags, os followers e os extras estavam só de enfeite, nada tava funcionando. Aí eu percebi que eram os gadgets do cabeçalho e aí eu fui testando vários códigos que não deram certo aí eu tive que fazer meu próprio código para colocar os gadgets em cima.

Bem, eu poderia ter terminado no primeiro dia em que fechei, mas eu estou viciada em um dorama (é tipo uma série) coreano, se chama To The Beautiful You e é perfeita. De 24 horas, 23h 58min eram para assistir o dorama e 2min era para concertar o blog, me desculpem.

Eu vou calar a boca e ir ao que interessa: o tutorial. Aqui o live preview. Já sabem o que fazer, né?

No HTML do seu blog, aperte F3 e procure por: .main-inner h2.date-header { e quando achar substitua desse trecho até a chave } por isto:
.main-inner h2.date-header {
float: left; 
width:62px;/* largura */
height:65px;/* 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: -68px; /* margem para esquerda */
padding: 8px 2px 0px 2px; /* espaço interno: topo, direita, embaixo, esquerda */
-webkit-transition-duration: .80s;
outline-offset: -3px;
outline: 1px dotted #fff;
background: #COR;
box-shadow: inset 0 0 30px #SOMBRA, 0 0 4px #ccc;
}
.main-inner h2.date-header:hover {
background: #COR HOVER;
box-shadow: inset 0 0 25px #SOMBRA HOVER, 0 0 4px #ccc;
border-radius:0px;
-webkit-transition-duration: .80s;
}

float: left; é a flutuação. Se seus posts ficarem na direita, coloque right mas se ficar na esquerda mantenha o left
margin-left: -68px; se você colocou float: left; deixe assim, mas se colocou float: right; coloque right em vez de left . Mude o número para colocar para a direita ou esquerda.

Visualize e veja se está tudo bem, e depois salve


Bem, é só isso por hoje, LBStars!  De novo, desculpa por ter deixado o blog fechado por esses dias.

Ah, em breve vou começar a postar em outro blog {surpresa, por enquanto} e eu não sei porque estou falando isso, acho que é porque estou bem animada. Tipo, o blog é super diwo!

Besos ;♥

19 comentários:

  1. Faz tempo que não vinha aqui,o layout está lindo e adorei o tuto,a data personalizando é bem fofinha.

    Beijos
    Amora R.

    ResponderExcluir
  2. É difícil quando a gente vicia em alguma cvoisa, principalmente em séries, no meu caso são animes, tem dias que eu fico escrevendo o post é vendo eles, pois gosto muito deles.

    Quando meu HTMl, dá defeito eu fico com uma mega raiva, mais não gosto de fechá-lo pois os novatos, podem acabar sumindo.

    Sobre o estilo de data ele é muito perfeito, se meu layout não fosse tudo combinando eu o usaria, mais acho que vai ficar para a próxima, kisus.

    Kuusou World

    ResponderExcluir
  3. O lay ta tão lindo amor , e esse tuto amei :)
    http://srta-kawaii.blogspot.com.br/

    ResponderExcluir
  4. O layout está lindo, adorei o tutorial!
    Beijos :3
    pqngarota.tk

    ResponderExcluir
  5. Que blog lindo agora sou leitora e fã rss'
    Beeijos =3 http://princesses-ana.blogspot.com.br/

    ResponderExcluir
  6. Não me encheu os olhos, porque nem tenho data em meus posts, mas pra quem curte, ficou legal!

    @esteffanifontes, do blog Aos Dezesseis Anos
    aosdezesseisanos.blogspot.com.br

    ResponderExcluir
  7. amei o tutorial,eu estava procurando e nunca achava um fácil de fazeer.obrigada.Sobre o tuto do photoshop se vc ainda puder fazer;
    eu procurei como vc me explicou na ask,mas não achei.obrigada desde já.bjs:>

    Sckitty World

    ResponderExcluir
  8. Adorei o tuto, estou usando no meu novo Layout :D

    ResponderExcluir
  9. Fica muito fofinho a data *-*
    ameiii!
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  10. Amei,eu estava mesmo precisando desse tutorial,eu coloquei no meu novo layout ok?Beijos

    ResponderExcluir
  11. Olá, tentei colocar a data desta forma num blog, mas ela cortou na metade. Não está ficando em cima do post. O que faço?

    ResponderExcluir
  12. olá não encontrei no meu layout do blogger todos os layout tem

    ResponderExcluir
  13. No meu blog nao to achando esse codigo

    ResponderExcluir
  14. É exclusivo e FURADO!!!! a tag .main-inner h2.date-header { não existe e pra se localizar uma determinada tag em HTML é: CTRL+F não F3.

    ResponderExcluir
    Respostas
    1. Pela amor de Deus! Ctrl+F e F3 tem a mesma função: procurar palavras. Pelo menos no meu comutador tem.

      E sim, essa tag existe no template viagem, o mais usado como base. E está dentro de Headings.

      Excluir
    2. Então, a não ser que use o modelo viagem como base esse tutorial realmente não vai funcionar....

      Excluir

« »