Testes para Blogs

27 abril 2014

Posted at 12:30 | in

Data dos Posts em Forma de Calendário

Antes de tudo...
- Faça um backup do seu template.
- Vá em Configurações - Idioma e Formatação - Formato da Data e deixe assim:

- Em seu Modelo - Editar HTML - marque "Expandir Modelos de Widgets".
Vamos começar, lembrando que uso o tutorial no Modelo Travel editado pelo Designer do Blogger...
1. No seu template, adicione isso acima de ]]></b:skin>:

01#fecha {

02  background: #fee;

03  box-shadow: 2px 3px 5px #fcc;

04  border-radius: 50px;

05  border: 3px solid #fcc;

06  width:50px;

07  height:60px;

08  float:left;

09  text-align: center;

10  list-style:none;

11  display: block;

12  font-family: 'Kavoon';

13  font-weight: bold;

14  color:#FF9FA5;

15  margin: 5px 2px 0 -70px; /* Altere -70px por 0px se quiser que a data apareça dentro da postagem ou para posicionar */

16  padding: 0 0 8px 0px;

17}

18.fecha_dia {

19  display:block;

20  font-size:20px;

21  line-height:30px;

22  padding:12px 0 0 0;

23}

24.fecha_mes {

25text-transform: uppercase;

26  font-size:18px;

27  color: #f0b6d6;

28  line-height:8px;

29  display:block;

30}

2. Abaixo de </head> cole isso:

1<script>

2function remplaza_fecha(d){

3var da = d.split(&#39; &#39;);

4dia = &quot;<div class='fecha_dia'>&quot;+da[0]+&quot;</div>&quot;;

5mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;

6document.write(dia+mes);

7}

8</script>

3. Encontre...

Nessa parte tem que tomar cuidado. Pode ser que apareça mais de 1 vez; nas 2 primeiras vezes troque por:

1<div id='fecha'>

2<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>

3<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>

4</div>

5<b:else/>

6<div id='fecha'>

7<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>

8<script>remplaza_fecha(ultimaFecha);</script>

9</div>

Como vocês viram, tem uma fonte chamada Kavoon para deixar o texto personalizado. Adicione-a em seu HTML, abaixo de <head>:

E por fim você irá obter um resultado mais ou menos assim:

Áreas personalizáveis:

background: #fee; = cor de fundo da data; para adicionar uma imagem troque por: background: url(URL DA IMAGEM) no-repeat;
box-shadow: 2px 3px 5px #fcc; = sombreamento.
border-radius: 50px; = arredondar.
border: 3px solid #fcc; = cor e estilo da borda.
width:50px; e height:60px; = largura e altura.
float:left; = aparecer a esquerda do post; se quiser a direita troque por float:right;
text-align: center; = alinhamento do texto no centro.
font-family: 'Kavoon'; = tipo da fonte.
font-weight: bold; = fonte em negrito.
color:#FF9FA5; = cor do número do dia.
padding: 0 0 8px 0px; = posicionamento.
font-size:20px; = tamanho do texto do dia.
padding:12px 0 0 0; = posicionamento do dia.
text-transform: uppercase; = deixa tudo maiúsculo no texto do mês.
font-size:18px; = tamanho do texto do mês.
color: #f0b6d6; = cor do texto do mês.

E é isso. Os créditos já estão lá no início do post. Apenas mudei as cores e uma coisinha aqui e ali :3

Essa foi a forma que fiz. Visualize e se não tiver dado certo dessa maneira, pode tentar dessa aqui do Mundo Blogger:

Exibir data em todas as postagens no designer de modelo

Data dos posts em formato de calendário no designer de modelo

http://reinokawaii.blogspot.com.br/2013/01/data-dos-posts-em-forma-de-calendario.html

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.