Date pour tous les articles de Blogger et sa personnalisation

Avez vous un problème avec la date des articles dans un blog Blogger ? Voulez vous une date qui s'affiche en haut de tous les articles mais en format français ?

Le problème avec le système Blogger c'est qu'on ne peut pas avoir beaucoup de choix : ou on choisie le format des en-têtes de date (<data:post.dateHeader/> mais qui n'apparait que dans le premier article de la journée, ou on choisie le format de date et d'heure (<data:post.timestamp/>) mais le menu offre seulement une date à l'américaine (m/jj/aaaa ou nom de jour, mois jour, an).

Ici, je vous propose une date à la française et pour tous les articles, même pour ceux qui sont écrits au même jour. On le fait avec une modification du code xml et à l'aide d'un script, puis on peut changer son style à un type calendrier ou en rond par exemple.

 
 
 

N'oubliez pas de faire une sauvegarde de votre template avant le changement du codage !
Lisez chaque chapitre du début à la fin avant procéder le changement de votre code original !
Si vous n'êtes pas sûr ce que vous faites, postez votre template entier dans un commentaire entre les balises <code></code>, je vous répondrai !

 

Réglage de la date dans l'admin Blogger

Assurez-vous que vous avez choisi la date appropriée dans le réglage Blogger. Rendez-vous à l'onglet Paramètres → Langue et mise en forme →

  • Langue : Français (France)
  • Format des en-têtes de date : choisissez le format jj mm aaaa !

 

Changement de votre template XML

Changez l'onglet du Paramètres au Modèle, ouvrez le HTML. Ici, la procédure est délicate, soyez prudent !

Tout dépend de la structure de votre template et de ce que vous voulez faire, il faut trouver le code du format de la date pour le changer. Ce code peut être trouvé dans plusieurs endroits et en plusieurs formats (je vous donne de l'indication des endroits possibles après les codes plus bas).

Cherchez ce qui ressemble à celui (je vous donne deux exemples) :

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

Les endroits possibles dans le template :

  • <b:includable id='main'... et/ou
  • <b:includable id='mobile-index-post'... et/ou
  • <b:includable id='mobile-main'... et/ou
  • <b:includable id='mobile-post'... et/ou
  • <b:includable id='post'...

Évidemment, si vous n'utilisez pas la version mobile de Blogger, oubliez déjà les 2e, 3e et 4e endroits, cherchez plutôt dans l'endroit "main" et "post".
Si vous trouvez le code dans plusieurs endroits, vous devez changer le code partout !

Quand vous avez trouvé le code, vérifiez s'il est dans un environnement exact comme celui j'ai indiqué dans mon exemple ci-dessus. Si non, vous devez comprendre le langage xml pour continuer et faire n'importe quel changements ou postez votre template entier dans un commentaire entre les balises <code></code>, je vous aiderai. Si oui, remplacez le avec le code suivant :

<span class='date-header'>
    <b:if cond='data:top.showTimestamp'>
        <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
            <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
                <abbr class='published' expr:title='data:post.timestampISO8601'>
                    <data:post.timestamp/>
                </abbr>
            </a>
        </b:if>
    </b:if>
    <b:if cond='data:post.dateHeader'>
        <div id='Date'>
            <script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
        </div>
    <b:else/>
        <div id='Date'>
            <script>changeDate(&#39;&#39;);</script>
        </div>
    </b:if>
</span>

 

Ajouter le javascript

Collez le script suivant juste après le code ]]></b:skin> :

<script type='text/javascript'>
//<![CDATA[
    var DateCalendar;
    function changeDate(d){
        if (d == "") {
            d = DateCalendar;
        }
        var da = d.split(' ');
        day = "<strong class='date_day'>"+da[0]+"</strong>";
        month = "<strong class='date_month'>"+da[1].slice(0,5)+"</strong>";
        year = "<strong class='date_year'>"+da[2]+"</strong>";
        document.write(day+month+year);
        DateCalendar = d;
    }
//]]>
</script>

Enregistrez le HTML !

 

Changez le style de la date

Si vous regardez votre site web, la date est déjà apparue à chaque article, même les articles écrits au même jour. Normalement le jour, mois et an sont collés de l'un à l'autre. Vous pouvez alors les séparer avec CSS :

.date-header div strong {
    padding: 0 3px;
}

Pour vous donnez une idée, vous pouvez changer le style de la date en plusieurs types. Ici, je donne des codes pour la date circulaire (ou ronde) ou vous pouvez lire un tutoriel en anglais pour faire une date en style calendrier → cliquez ici !

Collez ce code juste après le script précédemment inséré. Le code indique que le style est appliqué à toutes sortes de pages (accueil, archives, etc.) sauf la page statique de l'article.
Si vous voulez que le style s'applique seulement sur la page statique des articles, supprimez le ! avant le = dans la première ligne du code.
Si vous voulez que l'apparence de la date s'applique partout, supprimez les deux premières et les deux dernières lignes du code et insérez les styles dans les balises <b:skin><![CDATA[/* et ]]></b:skin> comme les autres styles en général.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
        /* Style calendrier de la date */
        #Date {
          position:absolute;
          background: #ffffff; /* possible d'insérer une image : url("http://www.mon-site.com/image.png") */
          display: block;
          width:60px; /* si vous changez la taille, n'
oubliez pas de mettre le border-radius plus grand que la moitié de la taille */
          height:60px;
          float: left; /* n'oubliez pas d'utiliser inline-block pour la versions portables au lieu de float ! */
          margin: 0px 2px 0 -60px;
          padding: 0px;
          border: 0;
          text-transform: uppercase;
          -webkit-border-radius: 100px; /* pour les anciennes versions Chrome et pour certaines versions portables */
          -moz-border-radius: 100px; /* pour les anciennes versions FireFox */
          border-radius: 100px; /* pour faire un circle, il faut que le radius soit min. ou plus grand que 50% de la taille */
          -webkit-box-shadow: 2px 1px 7px rgb(102, 102, 102);
          box-shadow: 2px 1px 7px rgb(102, 102, 102);
        }
        /* Jour */
        .date_day {
          display: block;
          color:#333333;
          font-size: 24px;
          font-weight:normal;
          margin-top:-5px;
          text-align:center;
        }
        /* Mois */
        .date_month {
          display: block;
          font-size: 15px;
          font-weight:normal;
          color:#cccccc;
          margin-top:4px;
          text-align:center;
        }
        /* Année */
        .date_year {
          display: block;
          color:#333333;
          font-size: 10px;
          margin-top:-8px;
          text-align:center;
          }
      </style>
    </b:if>

 

Le tutoriel est écrit à la base de l'article : Create a circular date header for blogger posts

 

10 réflexions au sujet de « Date pour tous les articles de Blogger et sa personnalisation »

  1. Bonsoir / Bonjour !

    Je vous remercie pour cet article, mais j'ai un peu peur de faire des bêtises. Je vous explique mon cas : je me sers d'un thème réalisé par quelqu'un d'autre, et je ne comprend pas le système au niveau de la date. Peut être que c'est moi qui ai bouzillé quelque chose hein... Si jamais vous avez la gentillesse d'y jeter un oeil, je vous en serais terriblement reconnaissante, car je me sens comme godzilla détruisant tout sur son passage avec ce template...

    Merci à vous !

  2. Eireen, la date sur votre blog marche ou vous vouliez une autre chose...? Le seul truc que je ferais c'est donner "margin-bottom: 30px" au-dessous de vos articles car comme ça on ne voit pas le début et de la fin.

  3. Bonsoir, a force de triturer les paramètres blogger et le code j'ai fini par trouver !
    Par contre le reste de l'article ne ressemble pas du tout à la démo, et là je sèche complètement... J'ai tenté de mettre une marge en bas et à droite comme sur la démo, mais j'ai l'impression que quelque chose me bloque quelque part...

    Merci pour votre aide et votre patience en tout cas !

  4. Déjà je ne comprends pas où les titres sont disparus... la structure est trop chargé, l'essentiel est emballé dans cent wrappers... maintenant je travaille sur un de mes sites mais si vous m'envoyez la page xml en email via la page de contact, je vais faire un site de démo et je regarde ce que je peux faire. Mais ça sera plusieurs jours.

  5. Oui je ne comprend pas non plus... Mais je ne veux pas non plus vous monopoliser si vous avez beaucoup à faire :s

    Je vous l'envoie si jamais vous avez le temps, je vous remercie en tout cas, n'hésitez pas à me contacter par mail directement si vous voulez : ...

    Je vous remercie chaleureusement !

  6. Eireen : cette page n'est pas tout à fait normale non plus car le titre, malgré que c'est bien affiché, est un lien. Sur la page des articles, normalement les titres ne sont plus un lien vers eux-même mais un simple texte... je n'avais pas encore du temps mais j'ai bien reçu le xml, je vais vous recontacter en email !
    Son Tran : désolé mais je n'ai rien compris... "lors d'un post de son article" ? L'option planifier, c'est où ? Planifier quoi ? Si vous n'expliquez pas votre commentaire, je vais supprimer en le considérant pour spam. Je l'ai laissé cette fois-ci car vous n'avez pas indiqué aucun lien, donc je ne suis pas sure... merci !