Mudar aparência da data do título da postagem do Blogger para ficar quadrada do lado

Mostrarei um modo de dar uma personalizada na data do post de blogs do blogger, aquela data acima do título, para que ele fique um quadrado no lado do título, parecendo um botão ou um balão, mas, isso é muito difícil de fazer, você terá que ter muita atenção e seria bom que tivesse um conhecimento em Html e Css, ou muita disposição.

Aconselho que use um blog de testes para praticar e evitar erro, e, salve seu código de modelo antes de começar, você não precisa saber Css ou Html, é possível fazer isso sem entender de códigos, mas para isso esteja muito atento para saber onde coloca ou muda os códigos.

1 - Primeiro, precisa escolher um formato de data que apareça o dia e logo após o nome do mês, precisa ser nesse formato: 29 Fevereiro 2012

Para isso, acesse o blogger.com e vá em >Configurações >Formatação e onde diz Formato da data escolha a última opção dos tipos de datas e clique em SALVAR CONFIGURAÇÕES A última opção de formato de data vai dizer o dia o nome do mês e ano.

2 - Depois precisa adicionar um código no HTML do blogger, esse irá incorporar uma fonte(letra) do Google, nós não podemos usar qualquer fonte porque algumas tem uma letra mais larga, e isso poderia fazer com que um pedaço do nome do mês ficasse fora do 'quadro', aparecerá apenas os três primeiros dígitos do mês e o restante ficará escondido.

Acesse o Blogger e >Modelo e >Editar HTML, antes faça uma cópia de seu código, use as teclas de atalho Ctr F e localize essa tag </head> cuidado porque tem outra tag parecida.

Exatamente acima/antes da tag </head> adicione:<link href='//fonts.googleapis.com/css?family=Share' rel='stylesheet' type='text/css'>Se der erro, adicione ou substitua por:<link href='//fonts.googleapis.com/css?family=Share' rel='stylesheet' type='text/css'/>

3 - Pode ter uma 'regra Css' que impedi os efeitos, por isso tente localizar .date-header span e substitua por .date-header h2

4 - Escolher, alterar e adicionar códigos Css para mudar a data

Os códigos abaixo estão prontos para mudar o estilo da data do post, você ainda poderá fazer alterações nele, cor de fonte, fundo e posição.
Esses códigos são estilos Css e, se conhece bem códigos, aí no blogger códigos Css podem ser adicionados exatamente antes(acima) desse trecho ]]></b:skin>, se você tem pouca prática, aí veja modo mais seguro de inserir Css no blogger, clique aqui

Entenda o básico de Css

Se você pretende alterar os códigos, é bom entender um pouco de Css, em qualquer página Html tem áreas com nomes e tags, para dar nome usa-se ids ou classes, a área onde tem a data tem uma classe chamada .date-header e agora observe:.date-header{color:red; /* outros estilos aqui */}Assim a gente usa o Css para personalizar uma área de página Html, perceba que entre as chaves{} vão estilos, acima tem color:red; que deixa a fonte vermelha e sempre que tiver um caractere ponto-e-vírgula indica fim de um tipo de estilo, aí, pode adicionar outro após ele, agora observe atentamente o mesmo código acima, porém, com um código para cor de fundo laranja:.date-header{color:red; background:orange;}

Escolha um dos códigos para um modelo de data personalizada

Agora, mostrarei uma imagem de exemplo e ao lado ou abaixo dela o código que deixará a data parecida com ela.

Os códigos abaixo foram testados em todos os novos modelos do blogger e 8 dos 16 modelos antigos(layouts de 2006) e funcionaram, porém, em um dos novos modelos deu um problema, para resolver, basta apagar a estilização antiga para a data, veja bem abaixo(clique), essa limpeza de estilos serve até para não pesar tanto seu blog, porque com os novos estilos para data os estilos antigos não precisam existir, sendo assim, todos que alterar o estilo da data podem fazer isso.

No final do post vou dar dicas sobre esses códigos e onde fica mais fácil e pode ser interessante alterar algo.

Data na cor Cinza

h2.date-header{margin:7px; float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #ddd;overflow:hidden;background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXcFvKyHoz8emfJ7pLcfGMjdEFto5my8kyu11rQwWSBG-VurVn-trcUYJCPhKw4-h4NKrIwORbumNSCRDk3tMqY17SqEZpqwt4-sx8VhhIWuFVRYPb7amtf02OlxcvwQwF-mzuZ9kNlV5/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #bbb;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#999;text-shadow:#eee 1px 1px 1px;}
/* primeira linha com numero do dia personalizado */
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
/* Agora código para título permitir data ao lado... */
.date-posts{display:inline;margin-left:9px;}

Data na cor Vermelho

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family:Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px red;overflow:hidden;background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #FF7878;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#ddd;text-shadow:#aaa 1px 1px 1px;}
/* Agora código para título permitir data ao lado... */
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}


Data na cor Azul

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family:Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #1500FF;overflow:hidden;background:#1500FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #6557FF;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#D7E6FE;text-shadow:#aaa 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Verde oliva

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #42774C;overflow:hidden;background:#42774C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #82A589;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#D0DDD3;text-shadow:#aaa 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Roxo ou Lilas

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #A90AC8;overflow:hidden;background:#A90AC8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #C65EDB;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#F6E5F9;text-shadow:#aaa 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data cor de Rosa ou pink

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family:Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #FF00D0;overflow:hidden;background:#FF00D0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #FF57E0;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#FFE3FA;text-shadow:#aaa 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Cor de laranja

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #FFB000;overflow:hidden;background:#FFB000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #FFCB57;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#FFF6E3;text-shadow:#aaa 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Amarelo

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #FFE800;overflow:hidden;background:#FFE800 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW59pM5i3QaFcmh7a_I-huhLndVVfS2VRVz4hp4vYSYdpA5OtO3CGQswuKBYzR1_OfJy-vQNfdRnWz_P_B42NOzsVF6HNUKHGR1RZ-8q27SENcrGY7pdL1I-G9R2sWLLuZhog0Nzhj_kCd/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #EFD900;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#AEA546;text-shadow:#eee 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Verde claro

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #82DE86;overflow:hidden;background:#82DE86 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW59pM5i3QaFcmh7a_I-huhLndVVfS2VRVz4hp4vYSYdpA5OtO3CGQswuKBYzR1_OfJy-vQNfdRnWz_P_B42NOzsVF6HNUKHGR1RZ-8q27SENcrGY7pdL1I-G9R2sWLLuZhog0Nzhj_kCd/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #7AD07E;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#3D683F;text-shadow:#eee 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Verde vivo

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #00FF1B;overflow:hidden;background:#00FF1B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXcFvKyHoz8emfJ7pLcfGMjdEFto5my8kyu11rQwWSBG-VurVn-trcUYJCPhKw4-h4NKrIwORbumNSCRDk3tMqY17SqEZpqwt4-sx8VhhIWuFVRYPb7amtf02OlxcvwQwF-mzuZ9kNlV5/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #2DD53F;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#00770C;text-shadow:#eee 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Azul claro

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #0093FF;overflow:hidden;background:#0093FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXcFvKyHoz8emfJ7pLcfGMjdEFto5my8kyu11rQwWSBG-VurVn-trcUYJCPhKw4-h4NKrIwORbumNSCRDk3tMqY17SqEZpqwt4-sx8VhhIWuFVRYPb7amtf02OlxcvwQwF-mzuZ9kNlV5/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #2D8ED5;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#004577;text-shadow:#eee 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Azul mais claro

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #00FBFF;overflow:hidden;background:#00FBFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXcFvKyHoz8emfJ7pLcfGMjdEFto5my8kyu11rQwWSBG-VurVn-trcUYJCPhKw4-h4NKrIwORbumNSCRDk3tMqY17SqEZpqwt4-sx8VhhIWuFVRYPb7amtf02OlxcvwQwF-mzuZ9kNlV5/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #2DD2D5;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#215152;text-shadow:#eee 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Vermelho claro

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #FE7979;overflow:hidden;background:#FE7979 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW59pM5i3QaFcmh7a_I-huhLndVVfS2VRVz4hp4vYSYdpA5OtO3CGQswuKBYzR1_OfJy-vQNfdRnWz_P_B42NOzsVF6HNUKHGR1RZ-8q27SENcrGY7pdL1I-G9R2sWLLuZhog0Nzhj_kCd/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #EE7171;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#A37070;text-shadow:#eee 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Vermelho muito claro ou pessego

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #FFB4B4;overflow:hidden;background:#FFB4B4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXcFvKyHoz8emfJ7pLcfGMjdEFto5my8kyu11rQwWSBG-VurVn-trcUYJCPhKw4-h4NKrIwORbumNSCRDk3tMqY17SqEZpqwt4-sx8VhhIWuFVRYPb7amtf02OlxcvwQwF-mzuZ9kNlV5/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #E09E9E;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#704F4F;text-shadow:#eee 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data de cor Branco

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #fff;overflow:hidden;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW59pM5i3QaFcmh7a_I-huhLndVVfS2VRVz4hp4vYSYdpA5OtO3CGQswuKBYzR1_OfJy-vQNfdRnWz_P_B42NOzsVF6HNUKHGR1RZ-8q27SENcrGY7pdL1I-G9R2sWLLuZhog0Nzhj_kCd/s1600/fundo-data1.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #eee;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#000;text-shadow:#bbb 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor preto

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family: Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #000;overflow:hidden;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #555;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#fff;text-shadow:#999 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Data na cor Cinza escuro

h2.date-header{margin:7px;float:left;padding:2px;font-weight:600;font-family:Share, 'Times New Roman', Lucida;letter-spacing:3px;font-size:13px;height:48px;min-height:52px;line-height:20px;width:37px;border:solid 4px #666;overflow:hidden;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-1g2RbXFbxWKRnsmCIPZ_N61SslChvpcd2pnXltsC3_-TAPYpl18au7eusmZz8XRdS71uzGzNkNLbINcSDvTYNJmlRRD4PFB9ZCBg8yTVcbB6ETa72avrOD8XWbwYuWb4aBGitrWDKxR/s1600/fundo-data2.png) 0 2px repeat-x;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; border-bottom:solid 3px #999;border-top:0px;text-transform:uppercase;word-wrap:break-word;text-align:center;color:#fff;text-shadow:#ddd 1px 1px 1px;}
.date-outer h2:first-line{line-height:34px;display:block;font-weight: normal;font-size:36px;letter-spacing:0px;}
.date-posts{display:inline;margin-left:9px;}

Limpar estilo antigo e mudar os novos

Como disse acima, você vai colocar novos estilos para a data, sendo assim, pode apagar os antigos, tanto para que não interfiram e para deixar o blog mais leve, depois de adicionar os novos estilos, você pode localizar no Css esse nome de classe .date-header após ele pode ter o nome de uma tag e antes dele o nome de outra classe, mas, o importante é você observar que o primeiro caractere abre-chaves, como esse { indica que alí começa o estilo da data e até o próximo fecha-chaves termina esse estilo } esses estilos antigos e que estão alí dentro desses dois caracteres você pode apagar, veja o código de exemplo abaixo, ele é apenas parecido com o que você encontrará, e a parte riscada é o estilo e pode ser apagada:.date-header {
margin: .5em 0 0;
color: $date-color;
line-height: 1.6;
font-size: 140%
}

Códigos podem ser alterados

Quem tem apenas uma lateral no seu modelo e do lado direito, e, sobra espaço no layout pode querer que a data fique mais para a esquerda e fora da área de postagesns, nesse caso pode acrescentar, logo após h2.date-header{ pode acrescentar:
position:absolute;z-index:1000;left:-9px; margin-top:2px;
precisará alterar os valores, o -9 puxará a data mais a esquerda, se aumentar o número 9 ela irá mais a esquerda.

Todos os códigos acima fazem a data ficar do lado esquerdo, para ficar do lado direito você pode mudar left para right, dos códigos acima que você adicionar mude todas as palavras left que encontrar, assim ela ficará do lado direito.

Se você adicionar a fonte incorporada que eu sugeri, não terá problema, mas, se optar por outro tipo de fonte, aí complica, ela poderá ser mais ou menos larga, aí, terá que mudar o tamanho de fonte, o primeiro trecho font-size:13px; é para o mês, o segundo trecho font-size:36px; é para o dia, a parte do mês é problematica, se você usar um tipo de fonte maior, irá aparecer apenas 2 letras do mês, principalmente nos posts de março, novembro, abril e agosto, mas, em caso de usar um tipo de fonte menor, aparecerá 4 letras para abril, julho, setembro e fevereiro. Esses são os 7 meses críticos, que você deve observar se tudo funcionou, caso opte por usar outro tipo de fonte que não aquela que eu sugeri.

font-family: Share, 'Times New Roman', Lucida; o tipo de fonte é Share, aquela que será importada, como mostrei no passo 2, no inicio do post, se ela não estiver disponivel será apresentada 'Times New Roman' e se não Lucida, isso se tiverem essas fontes no Pc(computador) do visitante, mas, o importante é a fonte Share, pois a personalização foi pensando nela como principal.

Cores, as cores são várias, sempre que você ver, entre-chaves{}, esse caracter # indica cor de algo, as três ou seis letras e números que seguem esse caractere # indica um código de cor(ver outros) e pode ser chamado de códigos hexa(hexadecimal), e se quiser você pode alterar essas cores, vou mostrar onde muda cores de determinados efeitos, mas estão incompletos, sem os códigos de cores.

background:# é para o fundo, você pode alterar o código hexa, porém, nesse caso, após ele precisa deixar um espaço em branco.

border:solid 4px # você pode alterar a cor da borda, eu usei a mesma cor que o fundo, se você colocar uma cor levemente mais clara pode dar um efeito 3d, mas teria que alterar a borda de baixo e talvez retirar border-top:0px;

border-bottom:solid 3px # é para borda da base, eu optei por uma cor parecida com o fundo do número do dia para dar outro efeito...

color:# é para cor de fonte, ela vale para toda a data, se você quiser uma cor diferente para o dia, nesse caso terá que adicionar logo depois de .date-outer h2:first-line{ color:#cccccc;

text-shadow:# coloca uma sombra nas letras e números, usado para dar um efeito de relevo ou 2D.

Para que a data fique ao lado do título do post, eu adicionei esse trecho de código abaixo:.date-posts{display:inline;margin-left:9px;}Esse provavelmente servirá a outros leitores, como a Lore, que usam um JavaScript para fazer a data do post ficar abreviada e ao lado do post.

Acho que era isso, no navegador Internet Explorer os cantos não ficam arredondados.

• Mudar lugar do menu páginas e seus links no blogger
• Colocar e mudar estilo da data da postagem do BlogSpot
• Postagens lado a lado na Página Inicial do BlogSpot