Comment mettre un tabview/tabber sur blogger ?

Suite à la demande de Basto, voici un tuto pour créer un tableau très facilement, le tabview ou encore le tabber. Le tableau en question est celui qui se situe dans ma sidebar à droite (Profils, 10 Billets, 10 Commentaires et Nuage de tags).
Il est aisé à mettre en place mais cela demande un minimum de connaissance en CSS/HTML et au niveau de la structure des wigets blogger. J'ai essayé de le rendre le plus simple possible, le tout en 3 étapes.
Allez dans votre Tableau de bord > Mise en page > Modifier le code HTML. Il n'est pas nécessaire de cocher sur "Développer des modèles de gadget".
1. Tout d'abord, nous avons besoin d'inclure un fichier javascript nommé tabber.js de Patrick Fitzgerald (pour en savoir plus...). Pour cela, cherchez (CTRL-F)
<b:skin><![CDATA[
Copier et coller juste avant:
<script src='http://toinou.awardspace.com/tabber.js' type='text/javascript'/>
2. Maintenant, insérons la partie CSS, le style du tableau. Cette partie sera à modifier en fonction du style de votre template (couleur, taille, liens, liste etc...). Pour cela, cherchez (CTRL-F)
]]></b:skin>
Copier et coller juste avant:
/* DEBUT STYLE TABBER */
.tabber { width:332px; background:#fff; padding:5px; font-size:11px;}
.tabberlive .tabbertabhide { display:none;}
.tabberlive {}
ul.tabbernav { padding: 3px 0;}
ul.tabbernav li{ list-style: none; display: inline;}
ul.tabbernav li a{ padding: 3px 0.5em; margin-right: 3px; border-bottom: none; text-decoration: none;}
ul.tabbernav li a:link {}
ul.tabbernav li a:visited {}
ul.tabbernav li a:hover{ color: #000; background: #DAEBF3;}
ul.tabbernav li.tabberactive a { background: #DAEBF3;}
ul.tabbernav li.tabberactive a:hover{ color: #333; background: #DAEBF3;}
/* Ajouter un style à .tabbertab seulement après .tabberlive */
.tabberlive .tabbertab { padding:5px; border-top:0; background: #DAEBF3;
/* Pour fixer la hauteur des tabs */
/* height:200px; */
/* Si la hauteur est fixée alors il faut activer l'overflow */
/* overflow:auto; */
}
/* cache les titres des tabs */
.tabberlive .tabbertab h2 { display:none;}
.tabberlive .tabbertab h3 { display:none;}
/* style personnalisé de chaque tabs */
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab3 .tabbertab { height:200px; overflow:auto;}
.tabberlive#tab4 .tabbertab { height:200px; overflow:auto;}
/* style à l'intérieur des tabs */
.tabbertab p { padding-bottom:10px; line-height:140%; }
.tabbertab ul { padding:0; margin:0;}
.tabbertab ul li { padding:5px 0 6px 0; }
.tabbertab ul li { background:url(http://i37.tinypic.com/2mhzt54.gif) no-repeat 0 5px; padding-left:18px;}
/* FIN STYLE TABBER */
3. Passons à la partie la plus délicate. En effet, il va falloir placer le code HTML au bon endroit. Pour l'exemple, j'ai pris comme modèle un template par défaut de blogger. Mais chaque blog est différent. Ainsi, je vous demande de faire une sauvegarde totale de votre template avant de continuer ! Si vous ne savez pas comment faire alors poster un commentaire. Mais surtout ne continuez pas sans l'avoir sauvegardé, ce message s'adresse au débutant.
Cherchez (CTRL-F)
<div id='sidebar'>
Copier et coller juste après:
<div class='tabber'>
<div class='tabbertab'>
<b:section id='tab1' showaddelement='yes'>
<b:widget id='HTML10' locked='false' title='HTML' type='HTML'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section id='tab2' showaddelement='yes'>
<b:widget id='HTML20' locked='false' title='HTML' type='HTML'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section id='tab3' showaddelement='yes'>
<b:widget id='HTML30' locked='false' title='HTML' type='HTML'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section id='tab4' showaddelement='yes'>
<b:widget id='HTML40' locked='false' title='HTML' type='HTML'/>
</b:section>
</div>
</div>
Cliquez sur Enregistrer le modèle pour terminer.
Le code que nous allons insérer va créer 4 tableaux dans le tabber. Chaque tableau est un gadget/widget blogger de type HTML vide (HTML10, HTML20, HTML30 et HTML40). Bein entendu, on pourra modifier le type de widget.
Allons faire un tour pour voir les éléments de la page cliquez donc sur Éléments de la page.
Nous avons 4 chiffres, chaque chiffre correspond à un tableau dans l'ordre (dans le code HTML, noté par les ID: tab1, tab2, tab3 et tab4). Cliquez sur 1 et ensuite Ajouter un gadget (idem pour 2, 3 et 4). Choisissez le gadget que vous désirez :) Vous remarquez qu'il est possible de mettre plus d'un gadget toutefois, je vous conseil d'en mettre qu'un seul.
Pour conclure, si le résultat sur votre blog n'est identique avec le mien concernant l'apparence. Le problème vient de la partie CSS. En effet, regardez le style de la balise sidebar qui fait office de parent sur le style tabber car on a inclut le code HTML après la sidebar.
Un autre problème peut survenir lors de l'inclusion de la partie HTML qui n'est pas approprié (cela dépend de votre template/modèle), il faut alors faire du cas par cas.
J'espère avoir été assez clair et n'hésitez pas poser des questions si c'est nécessaire.
bLoG: ackorea.blogspot.com bY R^ & tOiN0U