vendredi 6 avril 2007

Blogger, comment afficher un résumé des articles

Depuis que j'ai commencé ce blog, je cherchais un moyen d'afficher seulement un résumé de l'article sur la page principale. J'ai fini par trouver ce lien qui explique en détail comment faire.

Merci à l'auteur de Beta Blogger de me permettre d'offrir la traduction en français sur mon blog !

Le sommaire de message est une méthode qui permet d'afficher seulement une partie d'un message en introduction. Le reste du message étant affiché lorsque l'utilisateur clique sur le lien "La suite !" au bas de chaque résumé. Ceci permet d'aérer la page principale du blog et facilite la navigation du lecteur. Il peut donc lire seulement les messages qui l'intéresse.

Plusieurs bloggeurs ayant de la difficuté à suivre les démarches expliquées dans l'aide en ligne d'où la raison de cet article. Il y a trois étapes à suivre pour implémenter les sommaires dans Blogger. Aucune connaissance du language HTML n'est requise puisqu'il s'agit simplement de copier-coller le code à ajouter.

CSS Conditionnel

La première étape consiste à modifier le code html afin d'y insérer le css conditionnel. Ces cette modification qui permet d'afficher un résumé en place du contenu complet d'un message. Premièrement, cliquez sur le lien "Personnaliser" dans la barre de navigation de votre blog, puis sur "Tableau de bord". Cliquez ensuite sur "Mise en page" dans la section "Gerer vos blogs" et enfin sur "Modifier le code HTML". Avant de modifier le code, enregistrez une copie de sauvegarde sur votre ordinateur pour plus de prudence. Donc, cliquez sur "Télécharger le modèle dans son intégralité". Maintenant que c'est fait, chercher dans le code la balise </head> et ajoutez le code suivant juste au dessus de cette balise :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Enregistrez le modèle. NOTE IMPORTANTE : dans le code, juste au dessus de la balise </head>, il y a la balise ]]></b:skin>. Il faut ajouter le code çi-dessus entre ces deux balises. Vous avez maintenant défini une classe "fullpost" qui permet d'ajouter son contenu seulement sur la page du message comme tel et non pas sur la page principale.

Lien pour "La suite !"


La seconde étape permet d'afficher un lien "La suite !" à la fin de chaque résumé d'un message. Cliquez sur la boîte à cocher "Développer des modèles de gadget" située au dessus du cadre incluant le code html, puis chercher dans le code la ligne :

<data:post.body/>

Ajouter le code suivant imédiatement après cette ligne :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>La suite !</a>
</b:if>

Enregistrez le modèle. Ce lien n'apparaitra que sur la page principale et celles archivées. Il redirigera le lecteur vers la page contenant le message complet. IMPORTANT : n'utilisez aucun autre code html sinon vous obtiendrez un message d'erreur.

Modifications des messages

La dernière étape consiste à modifier le formulaire d'ajout de message afin de visualiser les sections qui s'afficherons dans le sommaire et dans le message complet. Cliquez sur "Paramètres" puis sur "Mise en forme" et déroulez la page jusqu'à la section "Modèle de message blog". Collez-y le code çi-dessous :

Ici apparaitra la section sommaire. <span class="fullpost">Et ici celle du message complet.</span>

Cliquez sur "Enregistrer les paramètres" et voilà ! Maintenant affichez votre blog et vous devriez voir à la fin de chaque message le lien "La suite !". Si vous créé un nouveau message, vous devriez voir cette ligne :

Ici apparaitra la section sommaire. Et ici celle du message complet

Pour faire apparaitre les balises, cliquez sur l'onglet "Modifier le code HTML". Vous pouvez utiliser ce mode pour rédiger vos messages mais quant à moi, je préfère le mode enrichi. Écrivez le début de vos messages directement en mode HTML puis, lorsque vos sections sont bien visibles (vous savez exactement où le texte du sommaire et celui du message complet s'afficherons) vous pouvez basculer en mode enrichi. Par contre vous devrez modifier chacun des messages déjà enregistrés afin d'y ajouter un résumé et les balises de sections.

Merci encore à l'auteur du site Dummie Guide To Google Blogger Beta. Thanks Vin.

5 commentaires:

Risbomon a dit...

Super la traduction !! J'avoue que l'effort de traduire mentalement est un peu fatigant, à force !! Même si le site de Beta Blogger est une véritable mine d'or !!!!

Dès que je me lève demain matin sans ma migraine, je m'attaque à cette modification :-D !

Miyano a dit...

Heureux de savoir que cet article a pu (pourra) vous aider. Prompt rétablissement :)

Risbomon a dit...

Bonjour, je suis repassé sur votre blog pour vous faire part d'une "découverte" (si je peux me permettre de l'appeler ainsi ^^) qui est en fait une alternative à la solution proposée par Beta Blogger concernant les résumés d'articles.

Vous trouverez ce tuto ici : http://gpooo.blogspot.com/2007/02/afficher-masquer-une-partie-du-message.html

Cette solution est à mon avis plus élégante, car elle évite l'ouverture de nouvelles pages. Elle permet également d'avoir plusieurs menus déroulants combinés dans un même post. Enfin, un lien peut être placé afin de réduire la partie que l'on a fait déroulé ^^

J'ai donc choisi d'adopter cette méthode pour mes blogs (de plus, l'installation est très simple !). La tâche la plus dure sera juste de rééditer tous mes posts :'( !

Voilà, bonne continuiation, collègue bloggeur ;-) !

INFOXTOUS a dit...

Bonjour,
Sympa votre application pour faire des resumes d article et qui fonctionne. Pour le moment vous etes le seul a me fournir quelque chose qui marche sur mon blogspot infoxtous. Cependant est il normal que cela ne fonctionne pas avec des copier-coller mais seulement avec l ecriture manuelle ?
En tout cas Merci beaucoup.
Par la meme occasion, connaitriez vous le moyen pour integrer une application categories ?
Encore merci
jbaez@hotmail.fr

Hélène a dit...

Merci beaucoup, ça marche super bien.