mercredi 1 mai 2013

Afficher la date d'un message d'une manière plus agréable

Faites toujours une sauvegarde de votre blog avant de le bricoler!

Blogger affiche une date par défaut pour chaque message publié, mais ce format est très limité. Avec cette méthode, vous pourrez indiquer la date d'une manière plus agréable et avoir un contrôle total dessus. Traduit et adapté de blog.btemplates.com.


  • Tout d'abord, vous devrez peut-être changer le format des date. Allez dans mise en page puis cliquez sur "modifier" le bloc des messages et dans "Options de la page de messages" changez le format de date en Mercredi 1 Mai 2013. Vous pouvez essayer avec d'autres formats (voir en bas pourquoi).
  • Allez dans "Modèles" puis "Modifier le code HTML"
  • Faites Ctrl+a pour tout sélectionner, Ctrl+c pour copier et Ctrl+v pour tout recoller dans la même fenêtre (une astuce pour tout développer le code).
  • Recherchez (Ctrl+f) <head et collez juste avant le code suivant:

Une partie du code est en Espagnol, mais ce n'est pas grave...

<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;&lt;strong class='fecha_dia'&gt;&quot;+da[0]+&quot;&lt;/strong&gt;&quot;;
mes = &quot;&lt;strong class='fecha_mes'&gt;&quot;+da[1].slice(0,3)+&quot;&lt;/strong&gt;&quot;;
anio = &quot;&lt;strong class='fecha_anio'&gt;&quot;+da[2]+&quot;&lt;/strong&gt;&quot;;
  document.write(dia+mes+anio);
}
</script>

  • Ensuite, recherchez <data:post.dateHeader/>. Je l'ai trouvé 3 fois dans mon code. 
  • Remplacez donc <data:post.dateHeader/> (donc 3 fois) par ce code: 
<div id='fecha'><script>remplaza_fecha('<data:post.dateHeader/>');</script></div>

  • Maintenant, recherchons le bien connu ]]></b:skin>
  • Juste devant ]]></b:skin> collez ce code:
#fecha {
display: block;
margin:0 20px;
float:left;
padding: 10px;
color: #464646;
background: #67E2FA;
border:#FFFFFF 5px solid;
text-transform:capitalize;
}

.fecha_dia {
display: block;
font-size: 10px;
font-weight:bold;
text-align:center;
}


.fecha_mes {
display: block;
font-size: 16px;
text-align:center;
}

.fecha_anio {
display: block;
font-size: 10px;
text-align:center;
}


Note: l'année ne s'affiche pas sur mon mini-blog nbbc-met.blogspot.fr quand je choisis le format "Mercredi 1 Mai". Si vous voulez que l'année s'affiche, choisissez dans les options le format "1 mai 2013". J'ai adapté le CSS à mes besoins car la couleur d'origine était vraiment d... Vous aussi pouvez changer certaines choses dans le CSS, ce n'est vraiment pas "sorcier", par exemple la bordure que j'ai mis en blanc (sur fond blanc) pour le positionner "aux petits oignons". J'ai aussi rajouté text-align:center; à chaque rubrique.

Aucun commentaire:

Enregistrer un commentaire