Dans ce nouveau tutoriel, je vais vous expliquer comment ajouter une nouvelle zone de gadgets sur votre blog !
Si vous avez lu mon tutoriel sur la page d'accueil statique, vous allez reconnaître le code pour créer cette zone de gadgets. En effet, nous avons créé une zone de gadgets pour créer la page d'accueil statique.
Dans ce tutoriel, je vais vous expliquer comment créer n'importe qu'elle zone de gadget, et vous donner les emplacements clés de votre thème pour l'ajouter où vous le souhaitez ;)
Sommaire
- Faire une sauvegarde de son blog
- Les codes pour créer les zones de gadgets
- Zone de gadgets avec 1 seule colonne
- Zone de gadgets avec 2 colonnes
- Zone de gadgets avec 3 colonnes
- Où coller les codes des nouvelles zones ?
- Avant l'en-tête du blog
- Après l'en-tête du blog
- Après la zone du menu (entre le menu et le corps du blog)
- Avant le flux d'articles
- Après le flux d'articles
- Avant le pied de page
- Après le pied de page
- Exemple : Ajout d'une zone de gadgets entre le menu et le corps du blog
- Rectifier l'espacement autour de la nouvelle zone de gadgets
Faire une sauvegarde de son blog
Vous connaissez la chanson, comme d'habitude faites une sauvegarde de votre thème avant d'y apporter une modification ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.
Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.
Les codes pour créer les zones de gadgets
Maintenant que vous avez bien fait une sauvegarde de votre thème, nous allons pouvoir entrer dans le vif du sujet : les codes !Je vous propose 3 styles de zones de gadgets :
- Avec 1 seule colonne
- Avec 2 colonnes
- Avec 3 colonnes
Dans un premier temps je vais vous donner les codes, puis vous expliquer comment les utiliser ;)
Zone de gadgets avec 1 seule colonne
<b:section id='nouvelle-zone' name='Zone de Gadgets' showaddelement='yes'></b:section>Zone de gadgets avec 2 colonnes
<table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-2-colonnes'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section id='colonne-gauche' showaddelement='yes' name='Colonne de Gauche'>
</b:section>
</td>
<td class='columns-cell'>
<b:section id='colonne-droite' showaddelement='yes' name='Colonne de Droite'>
</b:section>
</td>
</tr>
</tbody>
</table>Zone de gadgets avec 3 colonnes
<table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-3-colonnes'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section id='colonne-gauche' showaddelement='yes' name='Colonne de Gauche'>
</b:section>
</td>
<td class='columns-cell'>
<b:section id='colonne-centre' showaddelement='yes' name='Colonne du Centre'>
</b:section>
</td>
<td class='columns-cell'>
<b:section id='colonne-droite' showaddelement='yes' name='Colonne de Droite'>
</b:section>
</td>
</tr>
</tbody>
</table>Où coller les codes des nouvelles zones ?
Bon, maintenant que nous avons les codes, où faut-il les coller dans notre thème ? Et bien cela va dépendre de l'emplacement souhaité !Imaginez votre blog comme un ensemble de blocs. Chaque bloc porte un nom plus ou moins unique pour pouvoir le retrouver et le différencier des autres. Il faut donc trouver le nom du bloc après (ou avant) lequel vous souhaitez ajouter la nouvelle zone de gadgets.
Ci-dessous quelques indications pour les thèmes Blogger Simple.
Pour chercher un code, allez dans Modèle à partir de votre tableau de bord Blogger, puis cliquez sur Modifier le code HTML. Cliquez n'importe où à l'intérieur de la boîte de code, puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac).
Un champ de recherche doit apparaître en haut à droite à l'intérieur de la boîte de code. S'il apparaît en haut de la page web, recommencez en cliquant bien à l'intérieur de la boîte de code avant de faire Ctrl + F.
Dans la boîte de recherche collez un des codes donnés ci-dessous, et appuyez sur Entrer.
Avant l'en-tête du blog
Le code qui détermine le début de l'en-tête du blog est :
<header>Après l'en-tête du blog
Le code qui détermine la fin de l'en-tête du blog est :
</header>Après la zone du menu (entre le menu et le corps du blog)
Pour ajouter une zone de gadgets entre le menu et le corps du blog, collez le code de la zone de votre choix AVANT la ligne :
<div class='main-outer'>Avant le flux d'articles
Pour ajouter une zone de gadgets avant le flux d'articles, mais sans que cette zone s'étende au-dessus de la barre latérale, collez le code de la zone de votre choix APRES la ligne :
<div class='column-center-inner'>Après le flux d'articles
Pour ajouter une zone de gadgets après le flux d'articles, mais sans que cette zone s'étende en-dessous de la barre latérale, repérez les codes suivants de votre thème :
<div class='column-right-outer'></div>
</div></div>
</div>
<div class='column-right-outer'></div>
<! -- Collez le code de la zone de votre choix ICI -->
</div>
<div class='column-right-outer'>Avant le pied de page
Pour ajouter une zone de gadgets avant le pied de page, collez le code de la zone de votre choix AVANT la ligne suivante :
<footer>Après le pied de page
Pour ajouter une zone de gadgets après le pied de page, collez le code de la zone de votre choix APRES la ligne suivante :
</footer>Voilà pour les codes des principales parties des thèmes Simples sur Blogger.
Attention à bien coller les codes des zones AVANT ou APRES les codes donnés, comme précisé ! Si vous inversez, alors vous n'obtiendrez pas le résultat souhaité ;)
Exemple : Ajout d'une zone de gadgets entre le menu et le corps du blog
Dans cet exemple nous allons ajouter une zone de gadgets sur 3 colonnes entre la zone de menu et le corps du blog
Le code que nous allons utiliser pour la zone de gadgets sur 3 colonnes est :
<table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-3-colonnes'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section id='colonne-gauche' showaddelement='yes' name='Colonne de Gauche'>
</b:section>
</td>
<td class='columns-cell'>
<b:section id='colonne-centre' showaddelement='yes' name='Colonne du Centre'>
</b:section>
</td>
<td class='columns-cell'>
<b:section id='colonne-droite' showaddelement='yes' name='Colonne de Droite'>
</b:section>
</td>
</tr>
</tbody>
</table><div class='main-outer'><table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-3-colonnes'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section id='colonne-gauche' name='Colonne de Gauche' showaddelement='yes'>
</b:section>
</td>
<td class='columns-cell'>
<b:section id='colonne-centre' name='Colonne du Centre' showaddelement='yes'>
</b:section>
</td>
<td class='columns-cell'>
<b:section id='colonne-droite' name='Colonne de Droite' showaddelement='yes'>
</b:section>
</td>
</tr>
</tbody>
</table>
<div class='main-outer'>
Sauvegardez votre thème en cliquant sur le bouton Enregistrer le modèle en haut de la page.
Maintenant, si vous allez sur Mise en page à partir de votre tableau de bord, vous trouverez 3 nouvelles zones de gadgets :
Vous pouvez ajouter les gadgets de votre choix dans ces zones en cliquant sur Ajouter un gadget : Images, listes de liens, un article mis en avant, etc.
Rectifier l'espacement autour de la nouvelle zone de gadgets
Il se peut que vous ayez besoin de rectifier les espaces autour de votre nouvelle zone de gadgets. Pour cela il faut utiliser le code CSS ci-dessous qui va correspondre à votre zone de gadget :Zone avec 1 seule colonne
/* --- Apparence de la nouvelle zone de gadgets --- */
#nouvelle-zone {
margin-top: 0px; /* Espace au-dessus de la zone */
margin-bottom: 0px; /* Espace sous la zone */
margin-left: 0px; /* Espace à gauche de la zone */
margin-right: 0px; /* Espace à droite de la zone */
}0px par celles qui vous plaisent.
Zone avec 2 colonnes
/* --- Apparence de la zone de gadgets à 2 colonnes --- */
table.zone-2-colonnes {
margin-top: 0px; /* Espace au-dessus de la zone */
margin-bottom: 0px; /* Espace sous la zone */
margin-left: 0px; /* Espace à gauche de la zone */
margin-right: 0px; /* Espace à droite de la zone */
}0px par celles qui vous plaisent.
Zone avec 3 colonnes
/* --- Apparence de la zone de gadgets à 3 colonnes --- */
table.zone-3-colonnes {
margin-top: 0px; /* Espace au-dessus de la zone */
margin-bottom: 0px; /* Espace sous la zone */
margin-left: 0px; /* Espace à gauche de la zone */
margin-right: 0px; /* Espace à droite de la zone */
}0px par celles qui vous plaisent.
Vous pouvez également vous amuser à modifier la couleur de fond du gadget, la bordure, l'espace entre le bord du gadget et le contenu, etc. Vous pouvez vous inspirer de mes précédents tutoriels ;)
Dans un prochain tutoriel je vous expliquerai comment personnaliser n'importe quel gadget de votre blog !
