DéveloppementsFichiers CSS

Des onglets dans les articles


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Version Template Version
Onglet, menu, tabulateur, peu importe le nom que l'on peut donner. L'astuce consiste a intégrer cette fonctionnalité pour qu'elle soit opérationnelle dans les articles. Je vous propose différents styles que j'ai spécialement adaptés pour les modèles Blogger 2010 et un style universel pour les autres modèles.
1
1
2
Des onglets dans les articles
Onglet, menu, tabulateur, peu importe le nom que l'on peut donner. L'astuce consiste a intégrer cette fonctionnalité pour qu'elle soit opérationnelle dans les articles.
Je vous propose différents styles que j'ai spécialement adaptés pour les modèles actuels de la bibliothèque Blogger et un style "universel" pour les autres modèles.


Avant de commencer

A savoir que le tabulateur que nous allons utiliser a été conçu par Patrick Fitzgerald.
Sur son site Barelyfitz.com vous y trouverez toute la documentation pour l'adapter à vos besoins.

Les fichiers CSS que vous trouverez ici, sont des adaptations spécifiques aux modèles de la bibliothèque actuelle de Blogger. Un fichier pour un modèle, ne conviendra pas forcément sur un autre modèle.


Haut de page


Étape 1 : ajouter le script

Le fichier JS fourni est hébergé sur Google Site. Si vous avez un domaine blogspot, vous pouvez l'utiliser comme tel dans votre modèle, ou dans le cas contraire, le télécharger et prendre en charge l'hébergement vous-même.

Le script - Web + mobile personnalisée
<script src='https://sites.google.com/site/blogconnexion/js/tabber.js' type='text/javascript'/>

  • Tableau de bord
  • Modèle
  • Modifier le code HTML

Il est à recopier après la balise <head>

Les CSS fournis ci-dessous ne sont pas adaptés pour la version mobile personnalisée. Pour que le script ne soit pas opérationnel dans cette version, ajoutez des balises b:if

Le script - Uniquement dans la version web
<b:if cond='!data:blog.isMobile'>
  <script src='https://sites.google.com/site/blogconnexion/js/tabber.js' type='text/javascript'/>
</b:if>


Haut de page


Étape 2 : Choisir un style

Choisissez ci-dessous le modèle que vous utilisez et recopiez le css correspondant dans l'éditeur HTML de votre modèle à l'emplacement indiqué (très important!!!).
Ces fichiers contiennent des variables Blogger, ils ne peuvent pas être ajoutés via le concepteur de modèles !

  • Tableau de bord
  • Modèle
  • Modifier le code HTML
  • Ouvrir les balises <b:skin></b:skin>

Simple


Le fichier doit être copié avant
/* Accents
---------------------------------------------- */

Le fichier CSS
/* Tabber (Modèle Simple)
----------------------------------------------- */

.tabberlive .tabbertabhide { display:none; }
.tabberlive { margin-top:1em; }

ul.tabbernav {
  margin: 0px 0px !important;
  padding: 0px 0px !important;
  overflow: hidden;
  font: $(tabs.font);
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
  display: block;
}

ul.tabbernav li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 80%;
  display: inline-block;
}

ul.tabbernav li a {
  display: inline-block;
  text-decoration: none;
  padding: .6em 1em !important;
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

ul.tabbernav li a:link {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:visited {
  color: $(tabs.selected.text.color) !important;
}

ul.tabbernav li a:hover {
  color: $(tabs.selected.text.color) !important;
  background-color: $(tabs.selected.background.color);
}

ul.tabbernav li.tabberactive a {
  color: $(tabs.selected.text.color) !important;
  background-color: $(tabs.selected.background.color);
}

ul.tabbernav li.tabberactive a:hover {
  color: $(tabs.selected.text.color) !important;
  background-color: $(tabs.selected.background.color);
}

ul.tabbernav li:first-child a {
  border-$startSide: none;
}

.tabberlive .tabbertab {
  padding: 5px;
  border: $(tabs.border.width) solid $(tabs.border.color);
  border-top: 0;
  font-size: 80%;
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3, .tabberlive .tabbertab h4 {
  display:none;
}

Picture Window


Le fichier doit être copié avant
/* Widgets
---------------------------------------------- */

Le fichier CSS
/* Tabber (Modèle Picture Window)
----------------------------------------------- */

.tabberlive .tabbertabhide { display:none; }
.tabberlive { margin-top:1em; }

ul.tabbernav {
  margin: .5em $(tabs.margin.sides) .5em !important;
  padding: 0px 0px !important;
  overflow: hidden;
  font: $(tabs.font);
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;
  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
  display: block;
}

ul.tabbernav li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 80%;
  display: inline-block;
  border: none;
}

ul.tabbernav li a {
  display: inline-block;
  text-decoration: none;
  padding: .5em 1em !important;
  margin-$endSide: $(tabs.spacing);
  background: $(tab.background) !important;
  -moz-border-radius: $(tab.border.radius);
  -webkit-border-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius);
  border-radius: $(tab.border.radius);
  border-$endSide: 1px solid $(tabs.separator.color);
}

ul.tabbernav li a:link {
  color: $(tabs.text.color) !important;
  background: $(tab.background) !important;
}

ul.tabbernav li a:visited {
  color: $(tabs.text.color) !important;
  background: $(tab.background) !important;
}

ul.tabbernav li a:hover {
  position: relative;
  z-index: 1;
  color: $(tabs.selected.text.color) !important;
  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom !important;
}

ul.tabbernav li.tabberactive a {
  color: $(tabs.selected.text.color) !important;
  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom !important;
}

ul.tabbernav li.tabberactive a:hover {
  color: $(tabs.selected.text.color) !important;
  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom !important;
}

ul.tabbernav li:first-child a {
  padding-$startSide: 1.25em;
  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tab.first.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tab.first.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tab.first.border.radius);
}

.tabberlive .tabbertab {
  padding: 10px;
  font-size: 80%;
  background-color: $(post.background.color);
  border: solid 1px $(post.border.color);
  -moz-border-radius: $(post.border.radius);
  -webkit-border-radius: $(post.border.radius);
  border-radius: $(post.border.radius);
  -goog-ms-border-radius: $(post.border.radius);
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3, .tabberlive .tabbertab h4 {
  display: none;
}

Awesome Inc


Le fichier doit être copié avant
/* Footer
---------------------------------------------- */

Le fichier CSS
/* Tabber (Modèle Awesome Inc)
----------------------------------------------- */

.tabberlive .tabbertabhide { display: none; }
.tabberlive { margin-top: 1em; }

ul.tabbernav {
  margin: 0 0 !important;
  padding: 0px 0px !important;
  overflow: hidden;
  font: $(tabs.font);
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
  border-top: 1px solid $(tabs.border.color);
  border-right: 1px solid $(tabs.border.color);
  display: block;
}

ul.tabbernav li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 80%;
  display: inline-block;
  border: none;
}

ul.tabbernav li a {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: .6em 0.8em !important;
  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
  border-$startSide: 1px solid $(tabs.border.color);
}

ul.tabbernav li a:link {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:visited {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:hover {
  position: relative;
  z-index: 1;
  color: $(tabs.selected.text.color) !important;
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
}

ul.tabbernav li.tabberactive a {
  color: $(tabs.selected.text.color) !important;
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
}

ul.tabbernav li.tabberactive a:hover {
  color: $(tabs.selected.text.color) !important;
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
}

ul.tabbernav li:last-child a {
  border-$endSide: 1px solid $(tabs.border.color);
}

.tabberlive .tabbertab {
  padding: 10px;
  font-size: 80%;
  background-color: $(post.background.color);
  border: solid 1px $(tabs.border.color);
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3, .tabberlive .tabbertab h4 {
  display:none;
}

Watermark


Le fichier doit être copié avant
/* Widgets
---------------------------------------------- */

Le fichier CSS
/* Tabber (Modèle Watermark)
----------------------------------------------- */

.tabberlive .tabbertabhide { display: none; }
.tabberlive { margin-top: 1em; }

ul.tabbernav {
  margin: 0 0 !important;
  padding: 0px 0px !important;
  overflow: hidden;
  font: $(tabs.font);
  background: transparent $(tabs.background.inner) no-repeat scroll left;
  display: block;
}

ul.tabbernav li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 80%;
  display: inline-block;
  border: none;
}

ul.tabbernav li a {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: .25em 1em !important;
  border-$endSide: 1px solid $(tabs.separator.color);
}

ul.tabbernav li a:link {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:visited {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:hover {
  position: relative;
  z-index: 1;
  color: $(tabs.selected.text.color) !important;
}

ul.tabbernav li.tabberactive a {
  color: $(tabs.selected.text.color) !important;
}

ul.tabbernav li.tabberactive a:hover {
  color: $(tabs.selected.text.color) !important;
}

ul.tabbernav li:first-child a {
  border-$startSide: 1px solid $(tabs.separator.color);
}

.tabberlive .tabbertab {
  padding: 10px;
  font-size: 80%;
  background-color: $(post.background.color);
  border: solid 1px $(tabs.separator.color);
  border-top: none;
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3, .tabberlive .tabbertab h4 {
  display: none;
}

Ethereal


Le fichier doit être copié avant
/* Footer
---------------------------------------------- */

Le fichier CSS
/* Tabber (Modèle Ethereal)
----------------------------------------------- */

.tabberlive .tabbertabhide { display: none; }
.tabberlive { margin-top: 1em; }

ul.tabbernav {
  margin: 0 0 !important;
  padding: 0px 0px !important;
  overflow: hidden;
  font: $(tabs.font);
  display: block;
}

ul.tabbernav li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 80%;
  display: inline-block;
  border: none;
}

ul.tabbernav li a {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  margin-right: 1px;
  padding: .65em 1.5em !important;
  color: $(tabs.text.color);
  background-color: $(tabs.background.color);
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -goog-ms-border-top-left-radius: 5px;
  -goog-ms-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

ul.tabbernav li a:link {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:visited {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) none ;
  color: $(tabs.selected.text.color);
}

ul.tabbernav li.tabberactive a {
  background: $(tabs.selected.background.color) none ;
  color: $(tabs.selected.text.color);
}

ul.tabbernav li.tabberactive a:hover {
  background: $(tabs.selected.background.color) none ;
  color: $(tabs.selected.text.color);
}

.tabberlive .tabbertab {
  padding: 10px;
  font-size: 80%;
  border: 1px solid $(tabs.selected.background.color);
  -moz-border-radius: 5px;
  -moz-border-radius-topleft: 0px;
  -webkit-border-radius: 5px;
  -webkit-border-top-left-radius: 0px;
  -goog-ms-border-radius: 5px;
  -goog-ms-border-top-left-radius: 0px;
  border-radius: 5px;
  border-top-left-radius: 0px;
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3, .tabberlive .tabbertab h4 {
  display: none;
}

Travel


Le fichier doit être copié avant
/* Widgets
---------------------------------------------- */

Le fichier CSS
/* Tabber (Modèle Travel)
----------------------------------------------- */

.tabberlive .tabbertabhide { display: none; }
.tabberlive { margin-top: 1em; }

ul.tabbernav {
  margin: 0 0 !important;
  padding: 0px 0px !important;
  overflow: hidden;
  font: $(tabs.font);
  display: block;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

ul.tabbernav li {
  list-style: none;
  margin: 0 !important;
  font-size: 80%;
  display: inline-block;
  border: none;
}

ul.tabbernav li a {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 1em 1.5em !important;
  color: $(tabs.text.color);
  display: block;
}

ul.tabbernav li a:link {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:visited {
  color: $(tabs.text.color) !important;
}

ul.tabbernav li a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center !important;
  color: $(tabs.selected.text.color) !important;
}

ul.tabbernav li.tabberactive a {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center !important;
  color: $(tabs.selected.text.color) !important;
}

ul.tabbernav li.tabberactive a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center !important;
  color: $(tabs.selected.text.color) !important;
}

.tabberlive .tabbertab {
  padding: 10px;
  font-size: 80%;
  border: 1px solid $(tabs.selected.background.color);
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3, .tabberlive .tabbertab h4 {
  display: none;
}

Autres modèles

Si vous utilisez un modèle qui n'est pas distribué par Blogger, utilisez cette feuille de styles.
Ajoutez-là directement dans le concepteur de modèles :

  • Tableau de bord
  • Personnaliser
  • Avancé
  • Ajouter fichier CSS

Le fichier CSS
/* Tabber (UNIVERSEL)
----------------------------------------------- */

.tabberlive .tabbertabhide { display: none; }
.tabber { }

.tabberlive {
  margin-top: 1em;
}

ul.tabbernav {
  margin: 0 0 !important;
  padding: 0 0 !important;
  border-bottom: 1px solid #778;
  font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li {
  list-style: none;
  margin: 0 !important;
  margin-bottom: 0px !important;
  display: inline-block;
}

ul.tabbernav li a {
  display: inline-block;
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover {
  color: #000;
  background: #AAE;
  border-color: #227;
}

ul.tabbernav li.tabberactive a {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover {
  color: #000;
  background: white;
  border-bottom: 1px solid white;
}

.tabberlive .tabbertab {
  padding: 5px;
  border: 1px solid #aaa;
  border-top: 0;
}

.tabberlive .tabbertab h2, .tabberlive .tabbertab h3, .tabberlive .tabbertab h4 {
  display: none;
}


Haut de page


Étape 3 : Les onglets dans un article

Lorsque vous écrirez un nouvel article, vous devez :
  1. Sélectionnez le mode HTML dans l'éditeur et ne plus basculer en mode rédaction (au risque d'avoir quelques complications ;) ).
  2. Réglez le paramètre des sauts de ligne en sélectionnant Utiliser des balises <br/> (dans les options en-dessous à gauche de l'éditeur).
  3. Écrivez les balises <br/> dans votre texte pour chaque article à la ligne !

Le code HTML type
<div class="tabber">

  <!-- ONGLET 1 -->
  <div class="tabbertab"><h4>Titre de l'onglet 1</h4>

    <!-- LE CONTENU DE L'ONGLET 1 -->

  </div>

  <!-- ONGLET 2 -->
  <div class="tabbertab"><h4>Titre de l'onglet 2</h4>

    <!-- LE CONTENU DE L'ONGLET 2 -->

  </div>

  <!-- ONGLET 3 -->
  <div class="tabbertab"><h4>Titre de l'onglet 3</h4>

    <!-- LE CONTENU DE L'ONGLET 3 -->

  </div>

  <!-- ONGLET 4 -->
  <div class="tabbertab"><h4>Titre de l'onglet 4</h4>

    <!-- LE CONTENU DE L'ONGLET 4 -->

  </div>

</div>

Ce code type contient 4 onglets.
Pour en ajouter ou en retirer, vous dupliquez ou effacez l'une des 4 sections encadrées.

Pour le reste, il suffit de compléter :
  • Le titre de l'onglet, entre les balises <h4></h4>
  • Le contenu de l'onglet, juste après le titre de l'onglet.
Dans le contenu de l'onglet, vous pouvez ajouter tout ce que Blogger autorise. (images, vidéos, lien, balises HTML).
Seules les balises titres <h2>, <h3> et <h4> ne s'afficheront pas !

Preview Des onglets dans les articles

TIPS : Le script étant installé dans le modèle, vous pouvez aisément utiliser les onglets dans un gadget HTML/JS, dans une page autonome, ou encore, directement dans l'éditeur HTML du modèle.

MOBILE : Pour faire fonctionner les onglets dans la version mobile, vous devez utiliser un modèle mobile personnalisé.


Haut de page


Mises en oeuvres appliquées

Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
DéveloppementsMulti-versions
Facebook : Bouton partager [Share button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire