Postagens | Dicas blog, Imagem, Pc Windows

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

Como personalizar estilo da data do titulo das postagens no blogger[imagem ilustrativa]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
data do post, dezembroh2.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(//4.bp.blogspot.com/-NrTaoc2bjxg/Tz6O-MPraaI/AAAAAAAAF_s/5SjkntaGVcU/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(http://4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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(//4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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
data de postagem personalizada, verde, junhoh2.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(http://4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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(//4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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(//4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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(//4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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
aparencia da data amarela, janeiroh2.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(//2.bp.blogspot.com/-fxlVh_N-1Eo/T0xtY1ZsGWI/AAAAAAAAGB0/siIiOf4nawQ/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
estilo para data de post do blogger, cores verde claro, maioh2.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(//2.bp.blogspot.com/-fxlVh_N-1Eo/T0xtY1ZsGWI/AAAAAAAAGB0/siIiOf4nawQ/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(//4.bp.blogspot.com/-NrTaoc2bjxg/Tz6O-MPraaI/AAAAAAAAF_s/5SjkntaGVcU/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
estilo de data azul marinho, outubro[ilustração]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(//4.bp.blogspot.com/-NrTaoc2bjxg/Tz6O-MPraaI/AAAAAAAAF_s/5SjkntaGVcU/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(//4.bp.blogspot.com/-NrTaoc2bjxg/Tz6O-MPraaI/AAAAAAAAF_s/5SjkntaGVcU/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(//2.bp.blogspot.com/-fxlVh_N-1Eo/T0xtY1ZsGWI/AAAAAAAAGB0/siIiOf4nawQ/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(//4.bp.blogspot.com/-NrTaoc2bjxg/Tz6O-MPraaI/AAAAAAAAF_s/5SjkntaGVcU/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(//2.bp.blogspot.com/-fxlVh_N-1Eo/T0xtY1ZsGWI/AAAAAAAAGB0/siIiOf4nawQ/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(//4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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
data na cor cinza escurah2.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(//4.bp.blogspot.com/-hOQOHNOL-gY/Tz6PLGeLqpI/AAAAAAAAF_4/bv2avhEt9MY/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.

11 comentários:

  1. Oi, tudo bem???

    no blog que estou fazendo que é este: http://www.kuryportarquitetura.blogspot.com/

    a sidebar não fica fixa, por exemplo quando posta laguma coisa ela desce... e nas outras páginas ela desce e sobe conforme o que tem postado.. (retirei das outras páginas por isso) como faço para arrumar?

    Muitooooo obrigada!

    ResponderExcluir
    Respostas
    1. Você diz que em umas postagens fica normal e outras a lateral fica bem abaixo do post, geralmente acontece por uma div não fechada ou um fechamento a mais, mas, não é o seu caso.

      O que parece que acontece é que no seu Css #sidebar-wrapper não tem uma largura específica, sendo assim ela compete e não cabe com aquela que está no lado dela, tente colocar uma largura de 300px ou menos, olhe no seu código e encontre #sidebar-wrapper { e adicione largura assim width:300px; e altere o valor de margin: -1250px -36px 0 0px; para um outro, pois quando você especificar uma largura a div sidebar vai subir para o normal e essa margem de topo que é -1250px vai levá-la ao 'infinito'.

      Uma dica que você pode fazer para perceber onde começa e termina uma div é, temporariamente colocar uma borda com cor forte como vermelho, verde ou azul nelas, nesse caso a borda vai se destacar e você poderá observar as larguras da div #main-wrapper, #outer-wrapper e também #sidebar-wrapper

      Excluir
    2. Ok, muitissimooooo obrigada!

      Excluir
  2. esse é meu blog... http://naofoirevelado.blogspot.com.br/

    ResponderExcluir
  3. Não consegui, tá dando o seguinte erro: Erro ao analisar XML, linha 473, coluna 96: The element type "link" must be terminated by the matching end-tag

    e também não consegui encontrar o ".date-header span" para alterar... :\

    ResponderExcluir
    Respostas
    1. Fiz uma alteração no código que "puxa(baixa)" a fonte para a data do post, agora tem dois códigos é no passo 2, o código extra para tentar colocar só tem a mais o caractere / e esse código é mais provável que o blogger aceite, você só deverá usar um deles que der certo, acho provável que ele estivesse dando erro.

      Quanto ao ".date-header span", como descrevi anteriormente, nem todos modelos tem essa parte, se seu modelo não tiver aí não tem o que alterar nesse passo 3.

      Alterei o passo 4 também. Leia com atenção e calma, e, sempre que fizer coisas complicadas experimente em um blog de teste antes, desculpe a demora em responder.

      Excluir
  4. Oii adoreii e já tô usando mas a data tá muito pra cima, como faço para baixa-lá???

    ResponderExcluir
    Respostas
    1. Se a data fica muito acima, seu modelo talvez não seja um dos padronizados do blogger, nesse caso, você pode tentar ver onde você adicionou o código Css, e localizar onde diz:
      h2.date-header{
      e logo após esse caractere de abre-chaves { precisará acrescentar esse trecho:
      margin-top:10px!important;
      Isso vai "forçar" uma margem de topo da data e ela descerá, talvez você precisará aumentar o número 10 para um maior para que ela desça mais, muita atenção que todo caractere é importante, não acrescente nem um a mais e nem apague um, qualquer coisinha pode dar erro.
      Caso não lembre onde adicionou o seu código Css, você pode aí então acrescentar Css novamente, mas aí, na parte mais baixa de seu Css, acrescentar esse código que faz a mesma coisa que aquele acima, apenas ele está diferente, veja abaixo:
      h2.date-header{margin-top:10px!important;}
      Atenção, antes baixe uma cópia de seu modelo e salve em seu computador.

      Excluir
    2. Funcionou. Muiitoo obrigado mesmo! *----------*

      Excluir
  5. o meu blog n tem date-header o q eu faço

    ResponderExcluir
    Respostas
    1. Se a data estiver aparecendo no seu blog, na parte do topo e mesmo assim não tiver date-header no Html de seu blog, aí é por você usar um modelo personalizado da web ou modelo 'Visualizações dinâmicas' e não tem o que fazer.
      Se não estiver aparecendo a data da postagem próximo ao título, precisa ativar ele, pode ir em Layout e no quadro que diz 'main' clique em >Editar e, na janela que abrir observe se as datas estão marcadas, a primeira data que aparecer é do topo, precisaria deixar marcada e Salvar

      Excluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares