Avez-vous déjà vu des blogs où les billets populaires, les top commentateurs, ou encore les blogroll sont dans des onglets ? Ces blogs et le mien utilisent DOMtabs.

DOMtabs est un script gratuit et en utilisant le guide ci-dessous, c’est très rapide à installer. J’ai aussi créé une simple feuille de style que vous pouvez utiliser pour votre DOMtabs facilement.

DOMtabs vous pouvez le voir en action dans la barre latérale ici sur Le Web de Nos jours. Il est très simple d’utilisation et un excellent moyen d’économiser de l’espace sur la page.

Enfin, ce guide est écrit pour WordPress, mais le script peut être utilisé n’importe où dans un autre script de blog. Si vous êtes sur une autre plate-forme, essayez d’appliquer les mesures propres à votre plate-forme, ou bien lire l’aide sur le site, ou de commenter ici pour de l’aide si vous en avez besoin.

Les 5 Etapes du Guide de l’installation DOMtabs

1. Téléchargez le script sur le site officiel, et décompressez-le sur votre ordinateur.
2. Uploadez le fichier domtab.js dans le dossier de votre thème WordPress.
3. Télécharger domtab.css (clic droit, “enregistrer la cible sous” ou “Enregistrer le lien sous”), et transférer ce fichier toujours dans la même dossier.
4. Dans header.php, collez le texte suivant au-dessus </head>:

<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/domtab.js”></script> <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_directory’); ?>/domtab.css” media=”screen” />

5. Dans sidebar.php, ou dans un widget si vous utilisez les widgets, collez le texte suivant l’endroit où vous désirez placer votre DOMtabs:

<div class=”domtab”>
<ul class=”domtabs”>
<li><a href=”#t1″>Tab 1</a></li>
<li><a href=”#t2″>Tab 2</a></li>
<li><a href=”#t3″>Tab 3</a></li>
</ul>
<div>
<a name=”t1″ id=”t1″></a>
<p>Insérer le contenu du première onglet ici, par exemple, le code d’un plugin.</p>
</div>
<div>
<a name=”t2″ id=”t2″></a>
<p>Insérer <p> le contenu du deuxième onglet ici.</p>
</div>
<div>
<a name=”t3″ id=”t3″></a>
<p>Insérer le contenu du troisième onglet Ici. </p>
</div>
</div>

Et c’est fait. Si vous souhaitez ajouter un autre onglet, il suffit de faire une copie d’une des sections. Il n’y a pas de limites sur le nombre que vous pouvez ajouter.

Vous pouvez personnaliser les couleurs et l’apparence en éditant le fichier domtab.css.

Si vous avez des problèmes, il suffit de commenter ci-dessous et je vous aiderais.