Novo Blogger Postagens Vanessa S.
Data dos posts em formato calendário no Designer de Modelo
[alerta] Este tutorial serve apenas para quem usa os templates Designer de Modelo.
Se você usa template mínima, ou persoanlizado, leia este artigo: Personalizar a data do post em forma de calendário[/alerta]
Eu já publiquei um artigo onde eu ensino a Personalizar a data do post em forma de calendário, só que aquele tutorial não se aplica aos templates novos do Blogger, o Designer de modelo.
Depois do lançamento dos novos templates Designer de Modelo, alguns dos hacks que já publicamos não funcionam nestes modelos.
Este mês resolvi dar uma especial atenção a este modelos de templates e, assim, fazer diversos testes, aplicando alguns dos tutoriais que publiquei, a fim de verificar possíveis mudanças, erros etc.
Se você está usando os novos templates Designer de Modelo do Blogger,o método postado anteriormente para personalizar a data em forma de calendário não funcionará.
Veja a seguir como proceder para personalizá-la no Designer de Modelo.
[becape]É sempre bom lembrar que, antes de realizar qualquer edição no html do seu template, é altamente recomendável fazer um backup.[/becape]
Configurar a data dos posts em formato calendário
1º passo: alterar o formato da data, no menu “configuração” no painel do blogger, e para isso você deve Clicar em “Configurações » Idioma e Formatação » Formato da data” e escolha o formato: 19 janeiro 2013, conforme imagem demonstrativa abaixo:
2º passo: incluir o script para o bom funcionamento deste hack.
No painel do blogger, acesse o menu “modelo » Editar HTML” e localize a linha: </head>
Cole ABAIXO dela o seguinte código:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>Salve as modificações.
3º passo: colocar a data ao lado do título do post e fazer com que ela fique no formato vertical.
Volte no menu “modelo » Editar HTML” e clique “Expandir modelos de widgets” e Localize as seguintes linhas:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
((Veja imagem))
SUBSTITUA a linha:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Por esta:
<div id='fecha'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>
4º passo: Para acrescentar estilos ao bloco da data você deve acrescentar códigos css.
Localize a tag: ]]></b:skin> e cole logo ACIMA dela:
/* Data
------------------------- */
#fecha {
color: #464646; /*---Edite a cor da data---*/
padding: 8px; /*--- margens internas da data---*/
margin-right:10px; /*---Margem externa direita---*/
background: #eee; /*--- cor do fundo---*/
border: 4px solid #ccc; /*---cor da borda---*/
float:left;
text-align:center;
list-style:none;
display: block;
-moz-border-radius:80px;
-webkit-border-radius:80px;
border-radius: 80px;
width: 30px ;
height: 30px;
}
.fecha_dia {
display:block;
font-size:20px; /*---Tamanho da fonte---*/
line-height:16px; /*---Altura da Linha---*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*---Tamanho da fonte---*/
line-height:9px; /*---Altura da Linha---*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*---Tamanho da fonte---*/
line-height:8px; /*---Altura da Linha---*/
display:block;
}
Se quiser incluir uma imagem na data, modifique estas linhas a seguir dentro do bloco de código em: #fecha
Substitua:
background: #eee; por:
background: url(URL DE SUA IMAGEM) no-repeat;
Em width: 30px e height: 30px substitua 30px pelo tamanho da largura e da altura da sua imagem.
Vanessa S.
Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.
Funcionou mas não ficou do lado titulo 🙁 ficou acima do titulo.
Show de bola deu certo aqui, quebrei a cabeça mais consegui.
Oi Vanessa, obrigado por compartilhar, usei e deu super certo.
Só gostaria que a data aparecesse em apenas na primeira postagem do dia. Qual a linha do código que tenho que apagar para que fique essa configuração? Se puder me ajudar, agradeço imensamente.
bjs
Leticia
Oi
eu fiz tudo direitinho no meu blog, mas so apareceu a data e nao o circulo. O que fiz de errado???
Obrigada
Lamento, mas não há como eu saber o que vc fez de errado. Não tenho como te ajudar.
Oie:) Adorei o tutorial, já tinha visto varios e sempre sem sucesso, o seu foi o unico que consegui fazer!! Parabéns!!
Olá vanessa! Olhe, estou com dificuldades de com o passo 3 neste post. Não consigo expandir widget na nova aparência do HTML. Pode me ajudar?
tentei localizar as linhas do terceiro passo e nao consigo 🙁
Pode me ajudar. Comecei a personalizar blogs com a plataforma do minima. Mas quando fui trocar o template do meu blog que estava na modelo viagem a data em forma de calendário sumir, o leia mais não aparece personalizado, a fonte do texto dos posts não tá a que coloquei e o titulo não tá centralizado.
Pode me informar como resolver isso?
Infelizmente não tem como resolver. A única coisa é que vc terá que instalar todos esses recursos no novo template, pois qdo trocamos de template, os recursos não o acompanham. Lembre-se que os recurso sempre ficam instalado no template e não no blog.
menina , vc é uma linda! obrigado pela dica funcionou direitinn…
tem como alterar a cor do circulo que envolve a data??? tá cinza, qqueria outra cor
Olá Vanessa, usei esse tutorial no meu blog e deu certo, obrigada por compartilhar.
BjoBjo;)
Celina Alves
Loja Luxos e Luxos
Blog Luxos e Luxos
Vanessa, Tem como trocar a opção do footer ” 3 comentários” por uma imagen ? Tem um tutoriail aqui no blog ? Eu não achei..
Muitos web designers fazem isso, e eu queria fazer no meu blog !!
Teria um modelo especifico ?
Obrigado …
Dá uma olhada nesse artigo pra ver se te ajuda:
Como personalizar o Rodapé dos Posts no Blogger
Deu certo quase tudo , o que não deu certo foi que a data não ficou do lado do titulo da postagem.
Vanessa
Na Página inicial funcionou perfeitamente, já nas páginas que criei (contato) não apareceu a data, apenas circulo.
é que na página estática não aparece a data mesmo. Vc vai ter que ocultar a id referente a data que é o
#fechausando condicional. Dá uma lida neste tutorial: Aplicar estilos as páginas estáticas no BloggerVanessa tem algum link com sugestão de calendário?
Obrigado!
No meu BLOG deu certinho, só prestar atenção no 3º PASSO, ao procurar , o meu encontrou 3 linhas iguais a essa, ae é só observar como na imagem do tutorial o que vem abaixo do codigo, se estiver igual é essa.
Vanessa no BLOGGER ao invés de comentar com o login do GOOGLE ou ANONIMO teria como apenas com nome e e-mail?
No blogger não.
Ótima dica, vou ver se coloco no meu blog. Valeu!
Valeu Vanessa!
Segui as instruções direitinho, pelo modelo Window, nativo do novo Blogger e deu certinho. Continue com seu trabalho em prol de ajudar os leigos em customização de blogs.
Efetuei todas alteracoes mas nao deu certo. Sugestoes??
Obrigado
Deve ser algo relacionado ao seu modelo.
Desculpe ter enviado mais de 1 comentario, masé que deu erro ao enviar e pensei que nao tinha ido.
Mas enfim, pode me ajudar em algo?
Como vc pode verificar, isso não aconteceu no blog de testes que eu usei para aplicar este recurso (veja blog Demo). O modelo que utilizei para testes é o Modelo Travel, do designer de modelo.Porém, alguns recursos podem variar de template para template.
Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.
Oi Vanessa,
Tentei aplicar o tutorial no meu blog, mas não consigo fazer algumas alterações, como cor, direção da data. Ela ficou no formato vertical, mas está localizada acima do texto e não consigo mudá-la.
Todas as alterações que faço no 4º passo parece não serem “computadas”. Você sabe o que pode ser?!
Abraços,
Jaqueline
PS: Seus tutoriais são ótimos. Tenho usado vários para personalizar meu blog. Obrigada!
Certifique-se se colou os códigos css do passo 4 corretamente, principalmente se colou ACIMA da tag “b:skin”
Boa noite. Com o intuito de agradecer aos serviços prestados, e de não desmerecer esse “metablog” conceituado, cujo qual já utilizei inúmeras vezes, reservei no meu blog um espaço para agradecer vocês. Podem conferir no endereço: http://uontem.blogspot.com.br/p/agradecemos-prezadamente-ao-mundo.html
Não quero desperdiçar seu tempo, então em último, desejo que continuem sempre atendendo as pessoas – as que merecem – com dinamismo e respeito. Parabéns, e até mais.
To tentando editar esse template aqui e queria saber se vc pode ensinar a tirar o resumo de postagem, queria que aparecesse a postagem toda sem ”leia mais” , pode ajuda ?
O meu ta dando erro tb (Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The element type “div” must be terminated by the matching end-tag “”.
Error 500). Uso o travel do design de modelo. O que pode está dando errado?
O 3º passo não existe no designer do travel. O que fazer? :/
Existe sim Ana, eu testei no Travel. Veja a imagem com atenção que ela irá te auxiliar a identificar o código que vc deve localizar.
Olá Vanessa.
Gostei muito do artigo, estava precisando disso para um blog meu, vou tentar adicionar e depois venho mostrar o resultado aqui.
Abraços!
Uso um template personalizado que não tem data
Esse tutorial serve no meu caso?
Não sei te informar, pq depende muito do modelo do seu template. Este tutorial se aplica apenas nos modelos DESIGNER DE MODELO.
Boa tarde!
Ao tentar fazer os passos, à partir do 3º começa a dar este erro no blogger: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The element type “div” must be terminated by the matching end-tag “”.
Error 500
Sendo que segui exatamente todos os passos descritos no post. Pode me ajudar?
Este tutorial serve apenas para quem usa os templates Designer de Modelo.
Se você usa template mínima, ou persoanlizado, leia este artigo: Personalizar a data do post em forma de calendário
Hum na substituição no 3º Passo esta dando erro. Dizendo que a formatação esta inadequada. Já refiz varias vezes mas continua no erro.:/
Uso o template Mínima. O que será que esta acontecendo?
Este tutorial serve apenas para quem usa os templates Designer de Modelo. No inicio do post eu explico isso, e tem um link do artigo para quem usa template minima.
Acho que deve ser um erro, eu não posso aplicá-la, repeti os passos várias vezes. De qualquer forma, aproveitar a oportunidade para agradecer por tudo que você traz.
O segundo passo falta a linha e o código.
Ops..Eu havia esquecido de “parsear” o código. Já corrigi.Obrigada por avisar.
Vanessa, você não colocou o 2º passo. Falta a linha e o código.
ficou confuso o passo 2 e passo 3, ” e localize a linha:” mas não tem nada…
Já corrigi o post. Obrigada por avisar.