Olá Pessoal, hoje eu vou ensinar a personalizar a data do post, o blog fica bem mais bonito, eu também queria avisar para vocês que o sorteio do Layout será no dia 10 deste mês se quiser ver como esta ficando Clique aqui, agora vamos ao tuto :)
Ficará assim:
Imagem do Go Imagine
Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data deixando assim: 08 julho 2015
Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML > Prossseguir) e procure por:
.main-inner h2.date-header {Você encontrara algo assim:
.main-inner h2.date-header { font: $(date.font); color: $(date.text.color);}Então substitua esse código por:
.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 **/}Observações:
- 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.
Crédito: Go imagine
Tchauu até o próximo tuto, espero que tenham gostado!
Eu vou tentar fazer isso quando tiver um pouco mais de tempo, mas uma dúvida. Eu não estou conseguindo buscar qualquer coisa no html. Como eu faço?
ResponderExcluirBeijo, beijo.
Larissa.
http://umtipicoteorema.com.br/
Olá Larissa, não sei se posso ajudar, mas tente fazer isso:
ExcluirModelo > Editar HTML > Clique na onde tem vários códigos em seguida aperte junto Ctrl+F e na caixinha que aparecer cole o código desejado se não achar pode ser o modelo do layout que não tem o código ou o código esta errado.
Espero ter ajudado, Tchauu :)