Dates des messages : aspect d'un calendrier journalier

obtenir ces boutons

Donner aux dates des articles
l'aspect d'un calendrier journalier

Consulter également : afficher la date du jour sur un blog.

* * * * *
On peut donner aux dates des messages l'aspect d'un calendrier journalier comme dans l'exemple à gauche et sur la page accessible ici, qui est réalisée avec un template standard ("simple" de Blogger 2010).

Il suffit d'ajouter un gadget HTML/JavaScript et d'effectuer une légère correction du template.

* * * * *
Un code doit être ajouté dans un gadget HTML/JavaScript. Ce gadget sera obligatoirement placé AVANT LES MESSAGES, juste au-dessus de "Messages du blog". Il faut en effet que le code soit lu avant l'affichage des messages.

Le code à ajouter dans le gadget HTML/JavaScript est le suivant :

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function datecalendrier(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
jour = "<style class='aff_2'>"+da[1]+"</style>";
mois = "<style class='aff_1'>"+da[2].slice(0,4)+"</style>";
annee = "<style class='aff_3'>"+da[3]+"</style>";
document.write(mois+jour+annee);
DateCalendar = d;
}
//]]>
</script>

<style type='text/css'>
#Date {
background:#f7f7f7;
display: block;
width:45px;
height:58px;
float: left;
margin:3px 2px 0 -66px;
padding: 0 0 0px 0px;
text-transform: uppercase;
border:1px #bbb solid;
}
.aff_1 {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* couleur de la 1° partie */
background:#D03647; /* couleur de fond rouge */
margin:0px;
padding:0px;
padding-top:4px;
line-height:15px;
}
.aff_2 {
display: block;
font-size: 28px;
font-weight:bold;
text-align:center;
color:#282828; /* couleur de la 2° partie */
margin:0px;
padding:0px;
padding-top:3px;
line-height:25px;
}
.aff_3 {
display: block;
font-size: 10px;
text-align:center;
color:#282828; /* couleur de la 3° partie */
margin:0px;
padding:0px;
line-height:12px;
}
</style>

Rappel : Comment créer un gadget HTML/JavaScript.

Toutes les couleurs des caractères et des fonds peuvent être changées facilement : aucune image n'est utilisée.

* * * * *
Le format de date utilisé sur le blog doit être le suivant :
dimanche 2 décembre 2012

Sans cela les éléments risquent de pas être dans le bon ordre (mois-jour-année).

Si ce n'est pas le cas, corriger le format de la date : "Tableau de bord" - "Mise en page" - "Messages du blog" - "Modifier".

* * * * *
La correction (obligatoire) à apporter au template est la suivante :

1) Dans le "Tableau de bord", il faut cliquer sur "Mise en page", "Modèle", "Modifier le code HTML".

2) Remplacer (2 fois) :
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

par :
<b:if cond='data:post.dateHeader'>
<div id='Date'>
<script>datecalendrier('<data:post.dateHeader/>');</script>
</div>
</b:if>

3) Enregistrer.

* * * * *
Pour afficher à l'arrière-plan une dernière feuille qui se détache comme dans l'exemple ci-dessus, il faut faire deux choses :

1) Remplacer :
#Date {
background:#f7f7f7;
par:
#Date {
background:#f7f7f7 url(http://3.bp.blogspot.com/-LjBCSiRZuVQ/ULuIIT3IqII/AAAAAAAABcI/WzlO2pDmM3Y/s200/date-calendrier-fond-2.PNG) bottom right;

2) Dans le même paragraphe, remplacer :
height:58px;
par :
height:62px;

* * * * *
On peut aussi vouloir une présentation avec l'année au-dessus et le mois en dessous, comme dans l'exemple à gauche.

Dans ce cas, le code à ajouter dans le gadget HTML/JavaScript est le suivant :

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function datecalendrier(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
jour = "<style class='aff_2'>"+da[1]+"</style>";
annee = "<style class='aff_1'>"+da[3].slice(0,4)+"</style>";
mois = "<style class='aff_3'>"+da[2].slice(0,4)+"</style>";
document.write(annee+jour+mois);
DateCalendar = d;
}
//]]>
</script>

<style type='text/css'>
#Date {
background:#f7f7f7 url(http://3.bp.blogspot.com/-LjBCSiRZuVQ/ULuIIT3IqII/AAAAAAAABcI/WzlO2pDmM3Y/s200/date-calendrier-fond-2.PNG) bottom right;
display: block;
width:45px;
height:58px;
float: left;
margin:3px 2px 0 -66px;
padding: 0 0 0px 0px;
text-transform: uppercase;
border:1px #bbb solid;
}
.aff_1 {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* couleur partie 1 */
background:#D03647; /* couleur de fond rouge */
margin:0px;
padding:0px;
padding-top:1px;
line-height:14px;
}
.aff_2 {
display: block;
font-size: 28px;
font-weight:bold;
text-align:center;
color:#282828; /* couleur partie 2 */
margin:0px;
padding:0px;
padding-top:3px;
line-height:25px;
}
.aff_3 {
display: block;
font-size: 10px;
text-align:center;
color:#282828; /* couleur partie 3 */
margin:0px;
padding:0px;
line-height:12px;
}
</style>

* * * * *
Consulter également : Ajouter la date du jour sur un blog

19 commentaires:

Claude Heitz a dit…

Bonjour,
J'ai suivi la procédure comme indiqué dans un template "simple", le calendrier s'affiche bien mais il n'y a aucune date dedans.
L'adresse du blog: http://lettredalsace.blogspot.fr/

Meiser a dit…


Bonjour.

Pouvez-vous déplacer le gadget en-dessous du titre ou au-dessus des messages ?


Claude Heitz a dit…

Bonjour,

J'ai glissé le gadget sous le titre, et ça marche. Super!

Merci Meiser

Jeff Melclalex a dit…

bonjour,

Je suis déçu car ça ne fonctionne pas avec le template de mon blog.

http://www.perdre-la-raison.com/

quel dommage !

Si vous avez un tuyau pour m'aider je suis preneur.

merci

Meiser a dit…


Bonjour.

1) Avez-vous installé le gadget ?

2) L'avez-vous bien installé en-dessous du titre ?


Jeff Melclalex a dit…

oui je l'ai installé sous le titre et modifié le code comme indiqué mais rien ne se passe :)

Meiser a dit…

Bonjour.

Avez-vous corrigé le template ?

Voir ci-dessus le paragraphe commençant par la phrase (en rouge) : "La correction (obligatoire) à apporter au template est la suivante :"


Jeff Melclalex a dit…

bonjour,

Oui tout est fait et modifié mais ça ne fonctionne pas

Meiser a dit…

Bonjour.

C'est pourtant à ce niveau qu'il y a un problème :

Je vois sur la page :

<span class='meta_date'>dimanche, décembre 23, 2012</span>

C'est donc l'image de fond du template qui s'affiche.


Jeff Melclalex a dit…

j'ai enlevé cette ligne de code et donc la date ne s'affichait plus sous le titre des messages mais pour autant je n'avais pas non plus votre super widget.

Bon je vais laisser tomber et supprimer le widget et re modifier mon code comme il était.

Dommage.

Merci tout de même de votre aide.

bonnes fêtes de fin année

Meiser a dit…

Bonjour.

Il faut voir si votre template contient ce code :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Si "data:post.dateHeader" est remplacé par un autre nom, il faudra également le remplacer dans :

<b:if cond='data:post.dateHeader'>
<div id='Date'>
<script>datecalendrier('<data:post.dateHeader/>');</script>
</div>
</b:if>


Aimy Vallée Mascart a dit…

Bonjour
Merci pour votre code, c'est très joli.
Par contre j'ai un soucis, la date ne s'affiche pas en face du bon article. Par exemple sur mon blog http://laviedaimy.blogspot.fr/ l'article "Cadeaux de Noël" devrait afficher le 6/01 et pas le 5/01, il y a un décalage, la date affichée est celle du message précédent...
Merci de votre aide

Meiser a dit…

Bonjour.

Avec le nouveau code, on ne change avec certitude que la présentation.

L'affichage des dates était-il correct avant d'installer ce gadget ?


Aimy Vallée Mascart a dit…

non je n'avais aucune date avant, et c'est en cherchant comment la faire afficher que j'ai trouver votre code.

je débute avec Blogger, j'aime beaucoup ce template, mais il a des problèmes : la date ne s'affiche pas et je n'ai pas les boutons "messages précedents et suivants"

merci

Meiser a dit…

Bonjour.

Dans le template, supprimer :

display: none;

dans :

h2.date-header {
margin: 1.5em 0 .5em;
display: none;
}


Aimy Vallée Mascart a dit…

Merci, maintenant la date s'affiche bie !

Mais quand je veux remettre votre code pour faire afficher le calendrier, l'erreur se reproduit : un décalage sur la date.

Meiser a dit…

Bonjour.

C'est un bon début.

Vous êtes dépanné puisque la date s'affiche désormais correctement.

Je n'ai pas encore trouvé pourquoi il y a un problème entre ce template et le gadget.


Marietouzazim' a dit…
Ce commentaire a été supprimé par l'auteur.
Mamzelle a dit…

Pour une raison que je ne m'explique pas, ça ne fonctionne pas... J'ai tout essayé mais rien à faire. Une piste de solution???

http://www.mamzelle66.blogspot.com

Merci à l'avance