[Blogger] Transformer le widget tags en un menu à onglets

ATTENTION : Ce truc ne rendra bien que si vous n'avez pas utilisé beaucoup de libellés (pas plus de 10 je pense mais ça dépend de la résolution d'écran que vous utilisez)

ATTENTION 2 : lorsque vous voyez dans le code des passages {b:skin} ou {/b:skin} (skin ou widget ou section...) ou {data:label.name/}, remplacez les symboles par <et>. Vous ne pouvez donc pas copier/coller directement le code tel que je l'ai fourni, désolée.

1) Allez dans le menu de personalisation du blog (Modèle>Modifier le code HTML).

2) Faites une sauvegarde de votre code actuel.

3) Copier le code CSS suivant entre les balises {b:skin}<CDATA>{/b:skin} :

Code:

#onglets{
    position:absolute;
    border : 1px solid transparent !important;/* pour les navigateurs autre que IE*/
    border:none; /*pour IE*/
    padding : 0;
    font : bold 11px Batang, arial, serif;
    list-style-type : none;
    left : 12%;
    margin-top : 0;
    width : 100%;
    min-width:800px;
    max-width:2000px;
}


#onglets li
{  height:21px;
    float : left;
    background-color: #F2EEEE;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 2px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #666;
}

#onglets a
{
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
}
#onglets a:hover
{
    background : #fff;
    text-decoration : underline;
    color: #FE02FC
}
#nav{
    border-bottom : 1px solid #666;
    padding-bottom : 25px;
    margin-bottom:20px;
}

Pour ceux qui ont lu mon autre sujet sur les menus à onglets, vous aurez remarqué que c'est à peu de chose près le code proposé sur le Site du Zéro. Je l'ai juste personnalisé. Ce que vous pouvez faire également en changeant les couleurs par exemple (les trucs avec des #).

4) Juste avant la balise <div id='content-wrapper'>, insérez le code suivant :

Code:

{b:section class='nav' id='nav'}{/b}

Ceci sert à rajouter une section dans le template Blogger. Si vous ne savez pas ce qu'est une section, vous allez comprendre au prochain point :

5) Allez sur la page Modèle>Eléments de la page. Une nouvelle case "Ajouter un élément à la page" doit apparaître entre le header et le reste du template. Cliquez sur cette case. Choisissez l'élément "Libellés". Configurez comme vous le voulez et validez.

6) Retournez sur la page Modèle>Modifiez le code HTML. Cochez la case "Développez les modèles de gadgets". Cherchez le code que vous avez insérez tout à l'heure, c'est-à-dire

Code:

{b:section class='nav' id='nav'}

. Vous devez maintenant avoir à cet endroit quelque chose qui ressemble à ça :

Code:

{b:section class='nav' id='nav'}
{b:widget id='Label2' locked='false' title='Libellés' type='Label'}
{b:includable id='main'}
  {b:if cond='data:title'}
    <h2><data></h2>
  {/b:if}
  <div class='widget-content'>
    <ul>
    {b:loop values='data:labels' var='label'}
      <li>
        {b:if cond='data:blog.url == data:label.url'}
          {data:label.name/}
        {b:else/}
          <a href='data:label.url'>{data:label.name/}</a>
        {/b:if}
        ({data:label.count})
      </li>
    {/b:loop}
    </ul>

    {b:include name='quickedit'}
  </div>
{/b:includable}
{/b:widget}
{/b:section}

7) On va faire quelques modifications au code ci-dessus :

Citation :

{b:section class='nav' id='nav'}
{b:widget id='Label2' locked='false' title='Libellés' type='Label'}
{b includable id='main'}
{b:if cond='data:title'}
<h2><data></h2>
{/b:if}
<div class='widget-content'>
<ul id='onglets'>
{b:loop values='data:labels' var='label'}
<li>
{b:if cond='data:blog.url == data:label.url'}
{data:label:name}
{b:else/}
<a href=label.url'>{data:label.name}</a>
{/b:if}
({data:label.count})
</li>
{/b:loop}
</ul>

{b:include name='quickedit'}
</div>
{/b:includable}
{/b:widget}
{/b:section}

Enregistrez le template et allez jeter un oeil sur votre blog. Et voilà ! Un beau menu en onglets avec tous vos tags.

Facultatif :
- Pour changer l'apparence du menu, changez le code CSS pour les éléments #onglets et/ou #nav. Faites des essais pour voir ce qui va le mieux.
- Pour déplacer le menu vers la gauche ou vers la droite de la page, modifier la valeur du pourcentage pour l'attribut left de #onglets (dans le code CSS)
- Pour rajouter des onglets autre que ceux des libellés, insérez le code suivant avant {b:loop} ou après {/b:loop}

Code:

<li><a href='[i]lien de la page[/i]'> [i]nom de la page[/i] </a></li>