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>:
03 | box-shadow: 2px 3px 5px #fcc ; |
05 | border : 3px solid #fcc ; |
12 | font-family : 'Kavoon' ; |
15 | margin : 5px 2px 0 -70px ; |
25 | text-transform : uppercase ; |
2. Abaixo de </head> cole isso:
2 | function remplaza_fecha(d){ |
3 | var da = d.split(' '); |
4 | dia = "< div class = 'fecha_dia' >"+da[0]+"</ div >"; |
5 | mes = "< div class = 'fecha_mes' >"+da[1].slice(0,3)+"</ div >"; |
6 | document.write(dia+mes); |
3. Encontre...
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Nessa parte tem que tomar cuidado. Pode ser que apareça mais de 1 vez; nas 2 primeiras vezes troque por:
2 | < script >var ultimaFecha = '< data:post.dateHeader />';</ script > |
3 | < script >remplaza_fecha('< data:post.dateHeader />');</ script > |
7 | < script >remplaza_fecha('< data:post.dateHeader />');</ script > |
8 | < script >remplaza_fecha(ultimaFecha);</ script > |
Como vocês viram, tem uma fonte chamada Kavoon para deixar o texto personalizado. Adicione-a em seu HTML, abaixo de <head>:
<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>
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 :3Essa foi a forma que fiz. Visualize e se não tiver dado certo dessa maneira, pode tentar dessa aqui do Mundo Blogger:
http://reinokawaii.blogspot.com.br/2013/01/data-dos-posts-em-forma-de-calendario.html
0 comentários: