Tutoriel de A à Z • Débutantes bienvenues • Bouton ENTRER
Dans ce tutoriel, nous allons afficher un message de bienvenue automatiquement quand quelqu’un ouvre l’adresse principale de votre blog. Le bouton ENTRER permettra ensuite de consulter vos articles.
Blog1 et un bloc b:includable id="main". Les thèmes récents ou personnalisés peuvent être différents.- Ouvrez Blogger et sélectionnez le bon blog.
- Dans le menu de gauche, cliquez sur Thème.
- Ouvrez le menu (petite flèche à côté de Personnaliser, selon votre interface).
- Choisissez Sauvegarder ou Créer une sauvegarde, puis téléchargez le fichier .xml.
- Gardez ce fichier dans un dossier facile à retrouver, par exemple « Sauvegarde Blogger ».
L’éditeur Blogger, c’est l’endroit où vous écrivez vos articles ou vos pages. C’est une grande zone de rédaction, un peu comme dans un traitement de texte. Vous pouvez y taper votre message, le centrer, choisir une couleur et ajouter des images.
Éditeur de page : Pages → Nouvelle page. Il sert à préparer le message de bienvenue.
Éditeur du thème : Thème → Modifier le code HTML. Il sert à installer la bienvenue automatique. Ce ne sont pas les mêmes éditeurs !
- Si vous souhaitez préparer votre propre présentation dès maintenant, ouvrez Pages → Nouvelle page. Vous pouvez aussi sauter cette étape et utiliser le modèle prêt à l’emploi de l’étape 8.
- Dans la grande zone blanche (l’éditeur), écrivez votre message : « Bienvenue dans mon univers… ».
- Utilisez les outils de mise en forme pour centrer le texte, changer la couleur ou insérer une image.
- Dans l’éditeur, trouvez le bouton permettant de passer de Rédiger à Affichage HTML (souvent sous une icône en forme de crayon ou dans un menu).
- Copiez le fragment HTML de votre message et collez-le temporairement dans le Bloc-notes.
- Donnez un titre facile à retrouver, comme Ma bienvenue — brouillon, puis gardez cette page en brouillon : il n’est pas nécessaire de la publier. Vous pourrez la rouvrir plus tard dans Pages.
<html>, <head>, <body>) dans le bloc de bienvenue : utilisez uniquement le contenu du message.Nous allons faire pointer le bouton vers /search, qui affiche la liste des articles du blog. Ce lien fonctionne depuis votre propre blog, sans écrire son adresse complète.
/search /search?max-results=5 /search?max-results=7 /search?max-results=10
Le nombre après max-results= indique combien d’articles vous souhaitez afficher par page. Sans ce paramètre, Blogger utilise son comportement habituel.
Vous n’avez pas d’image de bouton ? Utilisez simplement ce code. Sa décoration sera définie à l’étape 9 :
<a class='sc-bouton-entrer' href='/search'>✦ ENTRER ✦</a>
Vous pouvez remplacer les mots ✦ ENTRER ✦ par Bienvenue, entrez ! ou un autre texte.
Si vous avez créé une image de bouton, mettez-la en ligne (par exemple dans un brouillon Blogger), puis récupérez son adresse directe. Une adresse d’image se termine souvent par .png, .jpg ou .webp, mais pas toujours.
À la place du bouton de l’option A, utilisez :
<a href='/search' title='Découvrir le blog'> <img src='ADRESSE-DE-VOTRE-IMAGE' alt='Entrer dans le blog'/> </a>
Remplacez uniquement ADRESSE-DE-VOTRE-IMAGE par l’adresse de votre image. Gardez le lien href='/search' : c’est lui qui ouvre les articles.
Pourquoi chercher Blog1 ? C’est le widget qui affiche normalement les articles. Nous allons repérer sa partie principale pour demander à Blogger d’afficher notre message de bienvenue à l’adresse d’accueil, tout en conservant les articles sur les autres pages. Blog1 n’est pas le nom de votre blog.
- Vérifiez que vous avez bien sauvegardé votre thème au format XML.
- Dans Blogger, ouvrez Thème → Modifier le code HTML.
- Méthode facile : en haut à droite de l'éditeur HTML, cliquez sur le petit bouton qui affiche la liste des widgets (montré par la flèche rouge sur la capture ci-dessous).
- Dans cette liste, cliquez sur Blog1. Blogger vous conduit à la partie du code correspondant au widget des articles.
- Dans ce widget, repérez ensuite le bloc
<b:includable id='main'>. Selon le thème, cette balise peut contenir d'autres attributs, par exemplevar='top'.
Cliquez sur le bouton indiqué par la flèche rouge, puis sélectionnez Blog1 dans le menu. Cliquez sur l'image pour l'agrandir.
Blog1.Si la recherche Blogger ne donne aucun résultat, copiez le code dans le Bloc-notes de Windows et recherchez
Blog1 avec Ctrl + F. Cela sert seulement à vérifier que le widget existe : ne modifiez pas votre thème dans le Bloc-notes. Retournez ensuite dans l’éditeur Blogger et utilisez la liste des widgets pour atteindre Blog1.Selon le thème, le widget peut porter un autre identifiant, comme
Blog2. Ne remplacez pas automatiquement les noms dans le tutoriel. Si vous ne trouvez pas le bon widget ou son bloc main, arrêtez-vous et demandez de l'aide avant de modifier le thème.Le message ci-dessous est seulement un modèle de départ. Il permet de tester la bienvenue automatique. Vous pourrez changer les mots, ajouter des images et embellir votre présentation maintenant ou plus tard. Le code de fonctionnement, lui, doit rester en place.
Juste après la balise <b:includable id='main' ...> du widget Blog1, collez ce code :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sc-bienvenue'>
<h2>Bienvenue dans mon univers !</h2>
<p>Je suis heureuse de vous accueillir sur mon blog.</p>
<a class='sc-bouton-entrer' href='/search'>✦ ENTRER ✦</a>
</div>
<b:else/>
Très important : le code existant du thème doit rester entièrement à sa place après <b:else/>. Ne l’effacez pas !
Ensuite, trouvez le </b:includable> qui ferme précisément ce même bloc main (il peut y avoir de nombreux autres blocs et fermetures). Insérez cette ligne immédiatement avant cette fermeture :
</b:if>
Voici un schéma pour comprendre la position des éléments. La ligne avec les points de suspension est seulement une explication : ne la copiez pas dans votre thème.
<b:includable id='main' var='top'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sc-bienvenue'>
<h2>Bienvenue dans mon univers !</h2>
<p>Mon message de bienvenue...</p>
<a class='sc-bouton-entrer' href='/search'>✦ ENTRER ✦</a>
</div>
<b:else/>
... ICI, TOUT LE CODE D'ORIGINE DU WIDGET Blog1 ...
</b:if>
</b:includable>
<b:else/> et </b:if> est indispensable pour afficher les articles, les pages et les autres vues. Si vous ne savez pas identifier la bonne fermeture </b:includable>, ne poursuivez pas seule.Les phrases « Bienvenue dans mon univers ! » et « Je suis heureuse de vous accueillir sur mon blog. » sont des exemples. Vous pouvez les garder pour essayer le système, ou les remplacer par votre propre présentation. Vous pourrez aussi la modifier à tout moment.
Pour changer seulement quelques mots : dans Thème → Modifier le code HTML, retrouvez Blog1 et le bloc sc-bienvenue, puis remplacez les phrases d’exemple sans toucher aux autres balises.
Pour préparer une jolie présentation avec l’éditeur Blogger :
- Ouvrez Blogger → Pages, puis votre brouillon de bienvenue préparé à l’étape 3. Pas besoin de créer une nouvelle page !
- Dans l’éditeur, modifiez votre texte, ajoutez des images et choisissez vos couleurs. Gardez le brouillon pour pouvoir y revenir plus tard.
- Passez de Rédiger à Affichage HTML, puis copiez uniquement le HTML de votre présentation.
- Ouvrez Thème → Modifier le code HTML. Dans
Blog1, retrouvez le bloc<div class='sc-bienvenue'>installé à cette étape. - Remplacez uniquement les lignes du titre et du message d’exemple par votre présentation copiée. Conservez le
<div class='sc-bienvenue'>, son</div>, le bouton ENTRER et les balisesb:ifetb:else. - Enregistrez le thème et ouvrez l’adresse principale de votre blog pour vérifier le résultat.
Vous n’aviez pas créé de brouillon à l’étape 3 ? Dans ce cas seulement, créez une page dans Pages → Nouvelle page pour préparer votre présentation et gardez-la en brouillon.
À retenir : modifier le brouillon dans Pages ne met pas automatiquement à jour l’accueil. Pour voir les changements, il faut copier le nouveau HTML dans le thème. Avant chaque modification du thème, conservez une sauvegarde XML.
Toujours dans l’éditeur HTML du thème, recherchez la ligne ]]></b:skin>. Collez le CSS suivant juste avant cette ligne, puis laissez la ligne de fermeture en place :
/* Décoration de la bienvenue : à coller AVANT ]]></b:skin> */
.sc-bienvenue {
box-sizing: border-box;
max-width: 850px;
margin: 25px auto;
padding: 35px 24px;
text-align: center;
color: #fbe9f7;
background: #25152e;
border: 3px ridge #b989d3;
border-radius: 22px;
box-shadow: inset 0 0 20px rgba(185,137,211,.15);
}
.sc-bienvenue h2 { color: #f4c7f1; }
.sc-bienvenue a.sc-bouton-entrer {
display: inline-block;
margin-top: 18px;
padding: 13px 34px;
color: #fff !important;
background: linear-gradient(#9459ad, #563071);
border: 2px solid #e7b9e9;
border-radius: 25px;
font-weight: bold;
text-decoration: none !important;
box-shadow: 0 3px 0 #281333;
}
.sc-bienvenue a.sc-bouton-entrer:hover {
background: linear-gradient(#b27ccc, #70428e);
}
.sc-bienvenue img { max-width: 100%; height: auto; border: 0; }
Cette décoration donne un fond violet foncé, une bordure arrondie, des titres clairs et un bouton mauve. Vous pouvez adapter les couleurs plus tard.
- Cliquez sur Enregistrer dans l’éditeur du thème. Si Blogger signale une erreur XML, n’effacez pas des lignes au hasard : vérifiez vos balises et utilisez votre sauvegarde si nécessaire.
- Ouvrez l’adresse principale de votre blog : vous devez voir le message de bienvenue et le bouton ENTRER.
- Cliquez sur ENTRER : vous devez arriver sur la liste des articles.
- Ouvrez ensuite un article individuel : il doit toujours être visible.
- Testez également une page statique, puis le blog sur un téléphone ou en affichage mobile.
- Vérifiez que votre bannière, vos colonnes et vos gadgets sont toujours présents.
Vous avez appris à préparer votre texte dans l’éditeur Blogger, à choisir un bouton ENTRER en image ou en HTML, et à installer une vraie bienvenue automatique dans le thème.
- Un visiteur ouvre l’adresse principale de votre blog.
- Il voit votre message de bienvenue.
- Il clique sur ENTRER.
- Il découvre vos articles.
Rappel : l’éditeur de page sert à préparer le message . C’est la modification du thème qui rend la bienvenue automatique. Et une sauvegarde du thème reste votre meilleure sécurité !
Les noms comme sc-bienvenue et sc-bouton-entrer servent uniquement à faire fonctionner la décoration. Vous n'avez pas besoin de les modifier, même si votre blog porte un autre nom.
Vous pouvez personnaliser les couleurs, les images et votre message de bienvenue. 💜
✦ Résultat sur mon blog d'essai ✦
Voici deux captures d'écran pour vous montrer le résultat obtenu après l'installation. Remarquez le changement d'adresse entre la page de bienvenue et les articles.
Lorsqu'un visiteur ouvre l'adresse principale du blog, il découvre automatiquement la page de bienvenue avec le bouton ENTRER.
Après avoir cliqué sur le bouton
ENTRER,
le visiteur accède aux articles du blog.
Remarquez que l'adresse du blog a changé :
elle contient maintenant
/search.
C'est tout à fait normal !
L'adresse principale affiche notre page
de bienvenue, tandis que le bouton ENTRER
permet de découvrir les articles.
✦ Cliquez sur les captures pour les agrandir ✦
Aucun commentaire:
Publier un commentaire