16 de ago de 2016

Data dentro de círculo ao lado do título do post

Oi gente, desculpa que fiquei um tempo sem postar, mas é tudo culpa daquela boa e velha correria. Mas estou de volta com novidades e com várias idéias de posts maravilhosos pra ninguém ficar sem BDR.

No post de hoje vou enviar a colocar a data dos posts dentro de um círculo ao lado do título do post. Aposto que vocês irão amar, olha só o resultado:



Legal né? Pra saber como fazer é só continuar lendo.


1- Mude o formato de data e hora no seu blog para Dia, Mês e Ano.
Vá em Configurações > Idioma e Formatação > Formato da Data, escolha o primeiro modelo, vai estar com esse formato: 16 de ago de 2016

2- Cliquem CTRL+F para abrir a caixinha de pesquisa e procure por .main-inner h2.date-header {

Apague todo o código antes de } e cole o código a seguir:
 .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:13px;/** tamanho da fonte **/color: #000000!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 apague se não quiser **/background: #FEC7E6; /** altere a cor do fundo **/}
 Salve e veja o resultado pra ver se está tudo OK. No código está indicado com "*" todas as coisas personalizáveis, só mude se souber o que está fazendo.


Foto do perfil redonda com descrição justificada

Um comentário :

  1. Rock eu não entendi e para colocar isso ai sobre o Ctrl+f em editar hatml ou no lugar onde já estavamos?

    ResponderExcluir