Um estilo de data que muitos blogs tem aderido é essa em um círculo com efeito hover, que eu acho lindo. Hoje vou ensinar como fazê-la, antes de começar quero dar os devidos créditos ao blog Go Imagine, foi lá que eu aprendi a fazer. Ficará assim:
Imagem do blog Go Imagine
1) Vá no Painel do Blogger > Configurações > Idioma e Formatação > Formato da data e deixe assim:
2) Vá em Modelo > Editar HTML > Ctrl + F e procure por:
.main-inner h2.date-header {font: $(date.font);color: $(date.text.color);}
3) Substitua o código acima por esse:
.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 **/
}
4) Faça as alterações necessárias e visualize, se estiver tudo certo, salve!
19 Comentários
Ótimo o tutorial, vou usar no próximo design do PDM!
ResponderExcluirBeijos,
http://paraisodemenina.blogspot.com/
Muito bom o seu tuto, útil mesmo
ResponderExcluirhttp://portrasdorimel.blogspot.com.br
Oi. Esse post é muito bom mesmo!
ResponderExcluirHtml sempre foi minha paixão, pena que não tive paciência para aprender tudo.
Um super beijo.
http://juliana-editions.blogspot.com
Que legal flor... adorei a dica !
ResponderExcluirBjim =*
http://meucontatoimediato.blogspot.com.br/
a ultima vez que tentei mexer na data quase morri de tao coplicado hahahaha
ResponderExcluirBeijos
Nathália - Fashion Jacket
http://fashionjacket.blogspot.com.br
Facebook • Twitter • Tumblr
Oi linda...
ResponderExcluirGostei do seu blog, adorei seu post, vou estar aqui sempre, você é muito talentosa.
Eu estava no site de uma amiga e vi o seu link lá, resolvi então fazer uma visita.
Já estou te seguindo, por favor me segue também.
Visite o meu Blog :
http://aliadosdabeleza.blogspot.com.br/
Bjs...
Nossa a dica é bem útil , pra quem não sabe mexer em html .
ResponderExcluirPost novo !
http://oqueeusinto-m.blogspot.com.br/
Muito legal ;)
ResponderExcluirBeijos
nandapezzi.blogspot.com
Tutorial ótimo!
ResponderExcluirfica lindo, adorei o tuto ^^
ResponderExcluirooi adorei o blog
ResponderExcluirAdorei o tutorial. Eu desconhecia esse tipo de data, mas adorei,vou tentar fazer no meu blog.
ResponderExcluirhttp://i-teenbr.net.tc
Olá!
ResponderExcluirÓtimo tutorial, parabéns!
Eu estava querendo muito fazer e aí achei seu tutorial, obrigada por compartilhar. Já adicionei no meu blog com os devidos créditos, e deu tudo certo. Bjs
ADOREI o tuto d[a uma olhada
ResponderExcluirhttp://robstenandbewardforever.blogspot.com.br/
No meu não deu certo , você pode me ajudar ?
ResponderExcluirno meu eu não achei o código que era pra substituir :ccc
ResponderExcluireu tbm não achei o codigo ajude-me
ExcluirAchei bem bonitinho! Já estou usando! Valeu!!
ResponderExcluirBabi, esse código não tem em todos os modelos =/
ResponderExcluir