Création d'un aperçu d'article dans Blogger - Tuto Inside

Mettre en place un aperçu des articles sous Blogger

Nouvel article enfin sur le blogging. Il y a longtemps que je n'en avais pas fait un.

Aujourd'hui, suite à une demande de Jessica, chroniqueuse littéraire sur Livres Addict, je vous explique, sous forme de tutoriel, comment mettre en place pour votre blog des "aperçus d'article" et modifier le lien "plus d'info" par une image.

Il y a aussi la possibilité de donner une forme differente à ce lien (couleur, encadré etc) mais dans un premier temps je n'aborderai pas ce chapitre. N'hésitez pas à me demander si besoin.

Je vais donc aider Jessica à le mettre en place sur son blog. Pour chaque partie je mets une photo c'est toujours plus parlant que de longues explications.

Première étape :

Cette étape est la plus simple. Pour chaque article créé (ancien ou nouvel article), il suffit de positionner votre curseur à l'endroit où vous souhaitez qu'il soit coupé en 2
Puis de cliquer sur cette icone "insérer un marqueur d'expansion".

Cela ajoute une ligne en pointillé qui représente donc le scindage de l'article. Vous pouvez supprimer la ligne d'espace au dessus, ou en dessous si vous estimez que c'est nécessaire.

Si vous vous etes trompé d'emplacement, pas d'inquiétude, un clic "retour en arrière" en se positionnant sous la ligne et elle disparait.

Voici ce que vous obtenez sur votre blog : un lien sur lequel on peut cliquer pour voir l'article complet. Il est positionner sur la gauche "plus d'infos". Il remplit parfaitement son rôle, il est discret peut etre un peu trop.
C'est lui que je vous propose de modifier.

Vous pouvez faire une modification basique déjà en vous rendant sur votre interface de Blogger et modifier l'article :

Vous pouvez modifier le texte. Dans mon exemple le "plus d'infos" devient "Lire la suite".

Voilà la premère étape est terminée et comme je vous l'avais annoncé, elle est très simple à mettre en oeuvre.

Deuxième étape :

Etape que je ne vais pas développer sauf si j'en reçois la demande, donc n'hésitez pas à me le notifier en commentaire. L'aperçu de ce lien peut être totalement modifiable :

- sa position
- ses couleurs
- sa forme...

Pour cela, il faut se rendre dans l'interface de Blogger

- Thème
- Faire une sauvegarde de votre thème
- Puis modifier le code HTML en y insérant un code.

Voici en image un exemple de modification que j'avais appliqué au départ sur mon blog : Un encadré de couleur, une couleur de fond, un style de police et centrée en bas de mon article. Au survol de la souris il changeait de couleur.

♥ Si vous avez des questions ou que vous souhaitez que cette étape soit développée laissez un petit commentaire ♥

Troisième étape :

Modification du lien par une image.

Jessica souhaitait l'intitulé "Mon avis" en image une plume et le tout aux couleurs de son blog. Elle désirait aussi une position droite en bas de l'article.

J'ai donc créer une image complète comprenant ces deux paramètres.
Pour cela vous avez le choix, soit un logiciel image en ligne, soit l'utilisation de Paint ou Photoshop par exemple.

Voici les propositions que je lui ai faites pour exemple :

La coder au format PNG avec un fond transparent dès le départ, plutot qu'un fond blanc c'est mieux si par la suite vous souhaitez changer le fond de vos articles, l'image apparaitra toujours seule et nette. Les blogs et nos envies ont tendance à évoluer donc il vaut mieux prévoir.

Attention de bien choisir le format taille de votre image. Il ne faut pas que ce soit trop imposant en bas de l'article dans un soucis d'esthétisme.

Vous revenez ensuite sur l'interface Blogger dans la section Article.
Sur un article vierge où vous ouvrez votre article dédié à la gestion d'image. Vous y insérez l'image que vous avez créé pour en obtenir le lien.

Vous obtenez un lien qui ressemble à ceci :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImGv1hwooqrF5hGmhyphenhyphenh7t_BaFsM_3Igr7f7P0Ba6iTMirBOeL-DIwzJhh50l4-OmNqpOs340pFVt7GL5-lwMy1YzWIzhEZXdira5ah2HZO2vasVh6fD7fDQYETSyGu2c3kcCenWZMdl4B/s1600/mon+avis+plume+2.png

Copiez le dans le bloc note par exemple en attente.

Maintenant vous vous rendez dans l'interface de Blogger.

- Thème
- avant toute chose, faites une sauvegarde de votre thème.
- Puis nous allons modifier le code HTML

Faire une recherche de la balise <b:skin>...</b:skin>, dérouler.

Refaire une recherche cette fois de la balise : <data:post.jumpText/>

et la remplacer par ceci avec votre code image :

<img src="CODE IMAGE" alt="Lire la suite" />

Il ne reste plus qu'à positionner l'image du coté droit en bas de l'article. Toujours dans le thème, modification du code HTML, rechercher la balise : .jump-link { }

et ajouter entre les { } ce code :

text-align: right;

Si par hasard vous ne trouviez pas cette balise dans votre thème comme ce fut le cas pour celui de Jessica, il suffit de l'ajouter tout simplement dans la section <b:skin>...</b:skin>

C'est terminé, et voici ce que cela donne pour notre exemple :