Data personalizada de lado com o titulo .

Oi amores tudo bem com vocês ? espero que sim. hoje o assunto é html, faz tempo que vinha proucurando algumas dicas de como colocar a data do lado do titulo do post e não consiguia todos os tutorias que via não dava certo ou não tinha no meu html, então resolvir proucurar e aprender, tentei que conseguir e vim compartilhar com vocês espero que gostem :*

Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:

                                                    "Dia Mês Ano"

Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML >para proucurar clique dentro da caixinha onde aparecem os códigos e pressione Ctrl + F e abrirá a uma caixinha de pesquisa e procure por:

.main-inner .widget h2.date-header {

  margin: 0 -15px 1px;

  padding: 0 0 $(date.padding.bottom) 0;

Vai aparecer dois observe bem e procure por exatamente o que ta aparecendo no texto que deixei ai pra vocês, procure pela primeira linha em negrito que será mais fácil de encontrar vou deixar uma foto demonstrando o jeito que vai está no HTML de vocês.

Após encontrar o texto vocês vai apagar da segunda linha onde tem : margin: 0 -15px  1px; até o sinal } como demonstrado na foto abaixo onde eu selecionei onde vocês devem apagar :

Após apagar o texto cole esse código:

float: left; /** data no lado esquerdo, pode mudar para right **/

width: 65px;/** largura **/

height:58px;/** altura **/

overflow:hidden;

font-size:12px;/** tamanho da fonte **/

font-family: Arial;

color: #fff !important;/** cor da fonte **/

text-align:center;/** alinha o texto **/

margin-bottom: -65px; /** desce **/

margin-left: -85px; /** 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 **/

}

Ficará assim :

E prontinho amores, lembrando que indico a vocês testarem em um blog teste antes, façam outro blog e teste os códigos, caso der certo faça no seu.

Importante:

- 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.

Beijos fiquem com Deus !