20/07/2016

Data na vertical

Oi gente, tudo bem? Nesse momento estou super chateada porque eu já tinha feito um post, mas por conta de um erro, acabei perdendo ele, mas estou bem, espero que vocês também estejam. E olhem quem está de volta! Exatamente, eu! Que saudade eu estava de fazer um post. Espero que eu consiga manter o blog atualizado, porque como vocês sabem eu sou bem inconstante e preguiçosa. 

Ainda não superei o post que eu perdi. Eu tinha feito outro post de tutorial pra postar futuramente, então eu pensei "vou programar o post", mas eu não tinha percebido que tinha dado um erro por causa de um mini gif de coração que eu tinha colocado, então eu salvei. Fui ver o post porque eu estava sentindo que algo estava errado, e realmente estava. O post só salvou até o mini gif. Por exemplo: Oi tudo bem? (o ponto de interrogação é o mini gif), e ai eu perdi o post inteiro. To bem chateada, eu tinha adorado o post que eu fiz e agora estou desanimada pra refazê-lo. Por isso, escolhi outro tutorial pra postar pra vocês, algum dia quem sabe eu refaça aquele post. 

Mas, voltando ao foco do post, como vocês leram no título, vou ensinar como colocar a data na vertical (em pé) como a minha. Keep reading!
Primeiro vá em Layout. Lá, vai ter uma "caixa" com o título "postagens no blog", clique em Editar. Mude o formato da sua data para o seguinte formato:


Depois, vá em Modelo > Editar HTML e procure por .main-inner h2.date-header { e substitua tudo até o { por esse código:

/* Data personalizada by: Black Words */
.main-inner h2.date-header {
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-moz-transform: rotate(270deg); /* imagem na vertical */
width:75px;/*largura*/
height:15px; /*altura*/
margin-left:-65px; /* aumente o nº se quiser mais para a esquerda */
float: left; /* posição */
text-align: center;
font-family: 'Arial', sans-serif;/*fonte da data*/
font-size: 13px;
text-shadow: 1px 1px 0px #cor;/*sombra do texto*/
padding: 5px;
color: #000; /* cor da fonte */
bottom: -30px; /*aumente o nº se quiser mais para baixo */
background:#cor;/*cor de fundo*/
border: 1px solid #cor;
-webkit-transition-duration: .50s;
}
.main-inner h2.date-header:hover{
background:#cor;/*cor de fundo hover*/
-webkit-transition-duration: .50s;
border: 1px solid #cor;
text-shadow: 1px 1px 0px #cor;
}
Acho que o código está bem explicadinho, então caso você não tenha entendido algo, comenta aqui que eu vou fazer o máximo pra te ajudar! Beijos, até o próximo post.
Créditos: 
Obs.: Deem sugestões de posts aqui nos comentários, obrigada!
Obs.²: Estava fazendo uns testes no layout em outra conta e tentei seguir o blog pra ver se estava tudo bem, mas na minha outra conta ficou dando erro. Pra vocês também dá erro?

6 comentários:

  1. Olá Mackenzie o/
    É a primeira vez aqui no seu blog, acabei o achando por causa de um comentário seu em um blog que eu ia comentar. Achei seu blog bonitinho e simpático, caso vá visitar o meu é um blog meu e da minha irmã! Espero que goste~

    Que pena que deu erro no seu outro post, tenta refazê-lo quando tiver com vontade. Achei a data bonita, posso usar o tuto alguma hora, talvez num layout free ou num próximo layout, com certeza irei creditar aqui! Obrigada pelo tutorial, até logo, irei acompanhar este blog .

    Bye's ♡
    O Snack Cheese é a queijolândia~✧ |
    Temos pipocas e sopas! Venham ☆

    ResponderExcluir
    Respostas
    1. Hey Yuka!
      Conheço o seu blog e adoro ele, acho super simpático, principalmente o lay, dá vontade de comer pipoca sempre que entro lá ;-; Mas eu acho que nunca comentei lá não sei porque, desculpa.

      Ainda bem que gostou daqui <3

      Espero que use, fico muito feliz que tenha gostado!

      Beijinhos <3

      Excluir
  2. Oii <333
    Mackie, me desculpe, mas eu não tô com muito tempo 'cause tô resolvendo tretas a ver com plágio :/
    Enfim, seu layout tá muito lindo <333 e eu adoro esse tutorial! Nunca acho um jeito decente de colocar a data no post ;u;
    Sayonara <3
    cute-universe.blogspot.com

    ResponderExcluir
    Respostas
    1. Oie Yuni <3
      Plágio? Vish, se precisar de alguma ajuda, pode contar comigo, ok?
      Ainda bem que gostou do layout queridaaaa
      Eu também nunca sei como colocar a data no layout, parece meio impossível né? hahaha
      Beijinhos

      Excluir
  3. Olá~
    -primeira vez no blog :p-
    Sobre a perda do post, eu te entendo, odeio quando escrevo um post 'mo legal e quando vou ver ele não foi salvo e perco quase tudo, realmente bate aquele desanimo :(
    Amo esse tutorial, é tão simples, mas dá aquele toque a mais no layout.
    Ps.: Gostei do layout.
    Ps².: Como faço para adotar esse dinossauro ao lado?
    ~kiss
    {Free Slow}

    ResponderExcluir
    Respostas
    1. Oee
      É bem ruim, né? :/
      Eu também acho, acho a data super importante em um layout, sempre fico perdida nos posts de blogs que não colocam a data :'(

      O dinossauro que fica aqui ao lado é uma imagem transparente que eu coloquei como background, se quiser, posso passar pra você :)

      Beijos

      Excluir

Oi, acho que você deveria deixar um comentário, adoraria ler o que você achou da postagem. Olha, mas eu tenho um pedido importante pra você: caso vá comentar, por favor, não use linguagem ofensiva, palavrões, etc. Podemos manter o blog, um lugar agradável e receptivo para todos, não acha?

Caso tenha alguma crítica, pode comentar sem nenhum problema, desde que seja construtiva e não ofensiva, ok?

Obrigada pelo seu comentário ❤

.¸¸.*♡*.¸ ¸.*☆*¸.*♡*.¸ ¸.*☆*.¸ ¸.*♡*.¸¸.*☆*.¸¸.*♡*.¸ ¸.*☆*¸.*♡*.¸ ¸.*☆*.¸

Alguns símbolos caso queira complementar seu comentário:

♥ ♡ ❤ △ ∞ ☆ ★ ✖ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ❃ ❁ ❀ ✿ ✾ ✽ ▲ ▼ △ ▽ ☯ ♦ ♠ ♥ ♣ ♢ ♤ ♡ ♧ ● ✌ ☀ ❂ ❣ ✈ ♪ ♫
( ͡° ͜ʖ ͡°) ツ ☻ ☺ ʕ・ิɷ・ิʔ (◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰ (◡‿◡✿) ◑ω◐ (✪‿✪)ノ (✲✪‿✪)ノ (*˘︶˘*)