Quelques Blogs affichent le début du message suivi de l'indication Lire la suite... (Read more...) sous la forme d'un lien. En cliquant sur le lien, le message complet s'affiche.
Ce que voit le lecteur
Le début du message ...
Lire la suite...
Ce que l'auteur du blog doit saisir
Il faut utiliser Modifier le code HTML pour enregistrer les 2 tags <span>
Le début du message ...<span class="fullpost">
la fin du message</span>
Le tag <span class="fullpost"> joue le rôle d'un marqueur qui délimite la première partie du message, celle qui va figurer sur la page du Blog. Le nom de classe CSS fullpost (message complet) peut être choisi librement, mais j'ai choisi de conserver ce nom proposé par Blogger.
Definir le style du lien Lire la suite...
En utilisant les pseudo-classes du CSS il est possible de créer un style spécifique pour le lien qui encapsule le texte Lire la suite...
Les styles doivent figurer entre les balises <head> et </head> du blog (Mise en page / Modifier le code HTML). Nous pouvons définir la classe fullpost ainsi que les styles associées au lien Lire la suite... en utilisant la classe cl_suite. Les pseudos-classes doivent être saisies dans l'ordre link, visited, hover et active (en anglais, mnémotechniquement LoVe-HAte). Un exemple ci-dessous (les pseudo-classes peuvent être modifiées) :
<style type="text/css">
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
.cl_suite a:link
{color: #000000; text-decoration: none;}
.cl_suite a:visited
{color: #00ff00; text-decoration: none;}
.cl_suite a:hover
{color: #00ff00; background: #ffff00;}
{color: #00ff00; background: #ffff00;}
.cl_suite a:active
{color: #ff0000;}
{color: #ff0000;}
.cl_suite a:focus
{color: #ff0000;}
</style>
</style>
Modifier la structure du Blog
Il ne reste plus qu'à modifier la structure du Blog (Mise en page / Modifier le code HTML / cocher développer le modèle de widget). Rechercher le code :
<p><data:post.body/></p>
et insérer après <data:post.body/> et avant </p> :
<b:if cond='data:blog.pageType != "item"'>
<span class='cl_suite'><a expr:href='data:post.url' target='_blank'>
Lire la suite...</a></span>
</b:if>
Enlever target='_blank' pour afficher le message complet dans la même fenêtre.
Limitation
Attention si votre blog comporte beaucoup de messages, lors de l'introduction de cette modification, tous les messages comporteront Lire la suite... en fin de chaque message.
Exemple
Mon blog de test : chappuis.blogspot.com
Mise à jour
Blogger intègre depuis le 9 septembre 2009, cette facilité de saut (lien vers la page de message). Consultez l'article Lire la Suite... suite
Articles
