Afficher la date du jour sur un blog

obtenir ces boutons

Ajouter la date du jour sur un blog

Consulter également : ajouter l'heure sur un blog.

Consulter également : donner aux dates des articles l'aspect d'un calendrier journalier.

* * * * *


Pour ajouter la date du jour sur un blog comme ci-dessus (en rouge), il suffit d'ajouter le code qui suit dans un gadget HTML/JavaScript ou la version HTML d'un message :

NOUVEAU CODE AJOUTÉ EN JUIN 2014 :

<div id='Datejour' style="font-weight:bold;color:red;">
<script type='text/javascript'>
var datedujour = new Date();
var jour = datedujour.getDay();
var date = datedujour.getDate();
var mois = datedujour.getMonth();
var an = datedujour.getFullYear();
var joursem = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" );
var nommois = new Array( "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre");
var jour2 = joursem[jour];
var mois2 = nommois[mois];
document.write(jour2+" "+date+" "+mois2+" "+an);
</script>
</div>


Comment ajouter un gadget HTML/JavaScript sur un blog.

On peut changer la présentation de la date (autre couleur, ...) en modifiant : "color:red;" ...

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

Dans ce cas, il faut ajouter le code qui suit dans un gadget HTML/JavaScript. Toutes les couleurs peuvent être modifiées.

NOUVEAU CODE AJOUTÉ EN JUIN 2014 :

<div id='Date2'>
<script type='text/javascript'>
datedujour = new Date();
var date = datedujour.getDate();
var mois = datedujour.getMonth();
var an = datedujour.getFullYear();
var nommois = new Array( "JANV", "FÉVR", "MARS","AVRI", "MAI", "JUIN", "JUIL", "AOÛT", "SEPT", "OCTO", "NOVE", "DÉCE");
var mois1 = nommois[mois];
var annee2 = "<style class='aff_1_2'>"+an+"</style>";
var jour2 = "<style class='aff_2_2'>"+date+"</style>";
var mois2 = "<style class='aff_3_2'>"+mois1+"</style>";
document.write(annee2+jour2+mois2);
</script>
</div>

<style type='text/css'>
#Date2 {
background:#f7f7f7 url(http://3.bp.blogspot.com/-LjBCSiRZuVQ/ULuIIT3IqII/AAAAAAAABcI/WzlO2pDmM3Y/s200/date-calendrier-fond-2.PNG) bottom right;
position:absolute;top:30px;right:50px;
width:45px;
height:60px;
margin:0;
padding: 0;
text-transform: uppercase;
border:1px #bbb solid;
}
.aff_1_2 {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff;
/* couleur partie 1 */
background:#D03647;
margin:0px;
padding:0px;
padding-top:1px;
line-height:14px;
}
.aff_2_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_2 {
display: block;
font-size: 10px;
text-align:center;
color:#282828; /* couleur partie 3 */
margin:0px;
padding:0px;
line-height:12px;
}
</style>

Le code ci-dessus affiche la date en haut à droite de l'écran. Pour éviter cela, il suffit de supprimer les instructions "position:absolute;top:30px;right:50px;".

Avec les instructions "position:absolute;top:30px;right:50px;", le gadget se placera automatiquement en haut à droite du titre. Pour obtenir cela , il faut, avec les "templates" ("modèles") de Blogger de 2010), déplacer le gadget au-dessus du titre (écran "Mise en page"). Et il faut préalablement permettre l'ajout d'éléments au niveau du titre. La méthode est la suivante :

1) Depuis le tableau de bord de Blogger, cliquer sur "Modèle".

2) Cliquer sur "Modifier le code HTML".

3) Changer :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
</b:section>


en :

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
</b:section>


"1" devient "2" et "no" devient "yes".

* * * * *
On peut aussi ajouter le jour de la semaine en-dessous de l'année, comme dans l'exemple à gauche et ci-dessus à droite du titre du site.

Dans ce cas, il faut ajouter le code qui suit dans un gadget HTML/JavaScript. Toutes les couleurs peuvent être modifiées.

NOUVEAU CODE AJOUTÉ EN JUIN 2014 :

<div id='Date2'>
<script type='text/javascript'>
datedujour = new Date();
var jour = datedujour.getDay();
var date = datedujour.getDate();
var mois = datedujour.getMonth();
var an = datedujour.getFullYear();
var nommois = new Array( "JANV", "FÉVR", "MARS","AVRI", "MAI", "JUIN", "JUIL", "AOÛT", "SEPT", "OCTO", "NOVE", "DÉCE");
var joursem = new Array("DIM", "LUN", "MAR", "MER", "JEU", "VEN", "SAM");
var joursem1 = joursem[jour];
var mois1 = nommois[mois];
var annee2 = "<style class='aff_1_2'>"+an+"</style>";
var joursem2 = "<style class='aff_3_2'>"+joursem1+"</style>";
var jour2 = "<style class='aff_2_2'>"+date+"</style>";
var mois2 = "<style class='aff_3_2'>"+mois1+"</style>";
document.write(annee2+joursem2+jour2+mois2);
</script>
</div>

<style type='text/css'>
#Date2 {
background:#f7f7f7 url(http://3.bp.blogspot.com/-LjBCSiRZuVQ/ULuIIT3IqII/AAAAAAAABcI/WzlO2pDmM3Y/s200/date-calendrier-fond-2.PNG) bottom right;
position:absolute;top:50px;right:50px;
width:45px;
height:68px;
margin:0;
padding: 0;
text-transform: uppercase;
border:1px #bbb solid;
}
.aff_1_2 {
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_2 {
display: block;
font-size: 28px;
font-weight:bold;
text-align:center;
color:#282828; /* couleur partie 3 */
margin:0px;
padding:0px;
padding-top:0px;
line-height:25px;
}
.aff_3_2 {
display: block;
font-size: 10px;
text-align:center;
font-weight:normal;
color:#282828; /* couleur parties 2 et 4 */
margin:0px;
padding:0px;
line-height:12px;
}
</style>

Le code ci-dessus affiche la date en haut à droite de l'écran. Pour éviter cela, il suffit de supprimer les instructions "position:absolute;top:50px;right:50px;".

Avec les instructions "position:absolute;top:50px;right:50px;", le gadget se placera automatiquement en haut à droite du titre. Pour obtenir cela , il faut, avec les "templates" ("modèles") de Blogger de 2010), déplacer le gadget au-dessus du titre (écran "Mise en page"). Et il faut préalablement permettre l'ajout d'éléments au niveau du titre. La méthode est la suivante :

1) Depuis le tableau de bord de Blogger, cliquer sur "Modèle".

2) Cliquer sur "Modifier le code HTML".

3) Changer :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
</b:section>


en :

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
</b:section>


"1" devient "2" et "no" devient "yes".

1 commentaire:

Herve Milliere a dit…

Bonsoir,
Je cherche à faire la même chose que le dernier exemple mais en CSS pour l'intégrer dans ce qui correspondrait à
.date-header span
dans mon fichier de personnalisation en CSS, afin de substituer le format de la date des articles existants.

Merci d'avance si vous pouvez m'apporter votre aide.
Cordialement,