lundi 1 avril 2013

Comment déplacer la date en-dessous du titre du message sur Blogger ?


Vous publiez régulièrement des articles sur la plateforme Blogger. Afin d'améliorer leur lisibilité, je vous propose de changer la position de la date en la déplaçant en dessous du titre du message. Voici comment procéder en modifiant le code HTML de votre blog.

Comment deplacer date en dessous titre message Blogger
En premier lieu, il est important de sauvegarder le modéle de votre blog. Pour cela, il suffit d'aller dans l'interface administration de Blogger, puis de cliquer sur le lien "Sauvegarde/Restauration" situé en haut à droite de la page. Une fois l'opération terminée, voici les différentes opérations à réaliser :

- cliquer sur "Modèle" puis sur "Modifier le code HTML".
- cliquer ensuite sur le bouton "Traiter pour accéder au code HTML" de votre blog.
- cocher la case "Développer des modèles de gadgets".
- repérer la partie de code HTML suivante : 

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

- Sélectionner cette partie de code, la couper-coller dans un éditeur de texte quelconque (bloc-notes, 
WordPad ...).
- Ensuite rechercher la partie de code HTML suivante :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

- Ajouter à la suite cette partie de code, le code HTML que vous avez coller dans l'éditeur de texte, ce qui donne comme résultat globale : 

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>

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

- Cliquer sur le bouton "Aperçu" pour vérifier le résultat.
- Si la position de la date est correcte, il suffit d’enregistrer les modifications en cliquant sur le bouton 
"Enregistrer le modèle".

Aucun commentaire:

Enregistrer un commentaire