Seguidores

Pesquisar este blog

sábado, 9 de junho de 2012

0

Mudar aparência da data do título da postagem do Blogger.


Ola queridos, mostrarei hoje 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 >Design(quem usa nova interface, 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='http://fonts.googleapis.com/css?family=Share' rel='stylesheet' type='text/css'>

3 - 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 no blogger códigos Css devem ser adicionados exatamente antes(acima) desse trecho ]]></b:skin>

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.

Data na cor Cinza

data do post, dezembro
 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(//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, junho
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(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;}

Nenhum comentário:

LinkWithin

Related Posts Plugin for WordPress, Blogger...