- Tutoriel : pourquoi et comment intégrer automatiquement une liste d'articles dans une page dans Blogger -
- Tutoriel Blogger -
Je vous partage mes Conseils et Astuces pour créer son propre blog avec Blogger. Je suis artiste et autrice freelance autodidacte, j’ai appris à coder au fil de mes expériences professionnelles.
Quand on démarre un blog — que ce soit pour partager son art, ses écrits, ses passions ou son savoir-faire — on cherche souvent des solutions simples, gratuites et personnalisables. C’est pourquoi Blogger reste une excellente plateforme, notamment pour les artistes, auteurs et autodidactes qui veulent créer leur blog eux-mêmes sans passer par un prestataire.
Mais très vite, on se heurte à une limite : comment présenter sur une page précise une liste d’articles sur un même thème ? Par exemple : une page “Illustrations” qui regroupe automatiquement et régulièrement tous les articles portant le label “Illustrations”.
Bien sûr, il existe une méthode manuelle et sans codage : tu peux ajouter un à un chaque article de manière fixe mais il te faudra revenir régulièrement pour mettre à jour ta page avec les dernières publications. Nous allons voir qu’il est possible de créer à l’aide d’un bout de code html une liste de tous tes articles d’un label, qui se mettra à jour automatiquement, sans nécessiter ton intervention. pratique n’est-ce pas !
➤ Ce tutoriel va te montrer comment faire cela facilement, sans plugin, juste avec un peu de code à copier/coller.
Le besoin : regrouper des articles dans une page dédiée
Imaginons que tu publies régulièrement des articles qui font partie d’une même catégorie ou thème (dans Blogger, on appelle cela un label ou libellé).
Tu veux maintenant créer une page fixe sur ton blog, où les visiteurs retrouveront tous les articles de ce thème précis, automatiquement mis à jour.
Exemples :
Une page “Mes nouvelles” pour afficher tous les textes courts publiés avec le label
nouvellesUne page “Illustrations” pour lister tous mes illustrations
Une page “Poèmes” pour afficher tous tes textes étiquetés comme tels
Malheureusement, Blogger ne propose pas cette option nativement. Tu peux afficher les labels dans la barre latérale, mais pas intégrer une vraie liste d’articles dans une page personnalisée.
➡️ C’est là que ce petit bout de code intervient.
Comment intégrer une liste d’articles dans une page Blogger, grâce au label ?
Voici une méthode simple, sans compétences techniques nécessaires. Il suffit de copier un petit morceau de code dans ta page.
📝 Étapes à suivre :
Vérifie que tes articles sont bien étiquetés avec un libellé (ex :
Illustrations,Poèmes,Romans, etc.)Crée une nouvelle page dans ton blog (menu “Pages” dans l’interface de Blogger)
Passe en mode “HTML” dans l’éditeur de la page (important ! pas le mode “Rédiger”)
Colle le code suivant à l’endroit où tu veux voir apparaître la liste (je t’explique en dessous comment et où adapter avec l’adresse de ton site et le label de ton choix):
<div id="liste-illustrations"></div>
<button id="charger-plus" style="margin-top:1em;">Afficher plus</button>
<script>
const label = "Label"; // Remplace par le nom exact de ton label
const blogURL = "https://TONBLOG.blogspot.com"; // Remplace par l’adresse de ton blog
const maxPerPage = 10;
let startIndex = 1;
const container = document.getElementById("liste-coloriages");
const button = document.getElementById("charger-plus");
async function chargerArticles() {
const url = `${blogURL}/feeds/posts/default/-/${label}?alt=json&start-index=${startIndex}&max-results=${maxPerPage}`;
try {
const response = await fetch(url);
const data = await response.json();
const entries = data.feed.entry || [];
if (entries.length === 0) {
button.style.display = "none";
if (startIndex === 1) {
container.innerHTML = "<p>Aucun article trouvé.</p>";
}
return;
}
entries.forEach(entry => {
const title = entry.title.$t;
const link = entry.link.find(l => l.rel === "alternate").href;
const item = document.createElement("div");
item.className = "liste-item";
item.innerHTML = `<a href="${link}" target="_blank">${title}</a>`;
container.appendChild(item);
});
startIndex += maxPerPage;
} catch (err) {
container.innerHTML = "<p>Erreur lors du chargement des articles.</p>";
button.style.display = "none";
console.error(err);
}
}
button.addEventListener("click", chargerArticles);
chargerArticles();
</script>
<style>
#liste-coloriages {
display: flex;
flex-direction: column;
gap: 0.8em;
margin-top: 1em;
}
.liste-item a {
font-size: 1.05em;
text-decoration: none;
color: #004d40;
border-bottom: 1px dashed #ccc;
padding-bottom: 0.3em;
display: inline-block;
}
#charger-plus {
background-color: #004d40;
color: #fff;
border: none;
padding: 0.6em 1.2em;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
}
#charger-plus:hover {
background-color: #00695c;
}
</style>
Quelques conseils :
Remplace
"Label"par le libellé exact de tes articles.N’oublie pas de changer l’adresse de ton blog dans la ligne
const blogURL = ...Ce script affiche 10 articles à la fois, et permet de charger les suivants avec un bouton.
Résultat attendu
Ta page affichera automatiquement une liste cliquable de tes articles, et elle se mettra à jour à chaque nouvelle publication contenant le label choisi. Un bouton “Afficher plus” permet de continuer à explorer les anciens contenus, sans recharger la page.
N’hésites pas à me contacter pour plus d’aide
Conclusion
Créer un blog soi-même quand on est artiste, auteur ou autodidacte, c’est possible — et gratifiant, surtout en début de carrière.
Blogger est une plateforme accessible et gratuite, mais elle demande parfois de mettre les mains dans un peu de code pour obtenir le résultat souhaité. Ce genre d’astuce permet d’ajouter des fonctions avancées, sans perdre en simplicité.
➤ Je compte partager d’autres tutoriels de ce type dans une nouvelle rubrique dédiée à la création de blog avec Blogger, spécialement pour les créatifs. Si tu as besoin d’aide ou une question, n’hésite pas à me contacter.
Audrey D. Janvier
Mon travail vous plait ? Vos partages sont précieux pour le faire découvrir à plus de personnes encore, merci 
