29 août 2010

(Blogger) Ajouter une barre de navigation multi-onglets

Pour alléger ma colonne de modules, je cherchais un tableau à onglets. J'ai trouvé mon bonheur chez Dacoolhunter.

Le gadget est tout simple à installer.

Le code Javascript s'installe dans le CSS (Présentation > Modifier le code HTML) et vous le collez avant </head> - que vous trouverez rapidement en faisant Edition > Recherche.

La partie HTML s'installe dans un module (Présentation > Eléments de la page > vous cliquez sur Ajoutez un gadget > vous choisissez HTML/Javascript).
Vous la personnalisez
<div class="tabber">
<div class="tabbertab">
<h2>Titre de l'onglet</h2>
<p>Contenu de l'onglet</p>
</div>
</div>
Et voici un exemple simplifié (laissez-lui le temps de charger):

Bienvenue


Pensez à mettre à jour vos liens et vos favoris

Tags


Sélectionnez le thème qui vous intéresse

Commentaires


Vos questions et réactions

10 commentaires:

  1. Bonjour , merci pour cette astuce , le menu en onglet est plutot pratique léger et esthétique !

    Est-ca la même méthode qui vous a permis de faire votre menu "Accueil - Plan du site -... " ?

    Il est vrai que je trouve ce menu plutôt sympa car il reste sobre.
    Y'a t-il une méthode partciulière pour créer ce menu ? (Et j'aimerais aussi savoir comment "éclaircir" la case au survol de la souris)

    Je vous remercie pour ce site ,qui m'en a beaucoup appris et j'espere que vous prendrez le temps de répondre a mes questions !

    Paul

    RépondreSupprimer
  2. Bonjour Paul :)
    Mon menu à onglets tout en haut est en fait une fonction Blogger.
    Dans Configurer, tu ajoutes un widget Liens dans la colonne de droite. Tu le complètes avec des liens vers des catégories (libellés) d'articles. Puis ce module, tu le fais glisser dans l'entête du blog.
    Pour son design, ça dépend de ce qui a été défini dans ton CSS, mais ça peut se modifier.
    Pour modifier le design d'un lien au survol de la souris, il faut utiliser
    a:hover
    dans le CSS.
    Difficile d'être plus précise pour l'instant. essaye déjà d'installer le widget Liens.
    Pense à mettre des libellés (mots-clés) à tes articles. Voir tout en bas de la zone de rédaction d'un article.

    RépondreSupprimer
  3. Merci beaucoup de cette réponse rapide !

    J'ai réussit a faire ma barre de menu (a seulement 2 entrée , mais mon blog est relativement récent)et je suis plutot content du résultat !

    Mon blog commence être un peu plus fonctionnel ! :)

    Si vous avez le temps de passer faire un petit tour sur mon blog histoire de me dire se qui pourrais être améliorer , j'en serais ravi !

    Merci encore ,
    Paul

    RépondreSupprimer
  4. Bonjour Paul :)
    1/ c'est normal que l'on ne puisse pas laisser de commentaires sur ton blog ? ou un oubli ?
    2/l'ensemble de tes colonnes fait 860px de large, ce serait bien que la bannière soit aussi large.
    3/ pour la centrer, dans ton CSS, complète la ligne
    .header-outer {text-align:center;}

    RépondreSupprimer
  5. Bonjour
    vous parlez de "présentation" mais je ne vois pas ou c'est
    pouvez vous m'aider
    merci car j'aimerai mettre ces onglets
    http://www.relookette.com
    merci

    RépondreSupprimer
  6. Bonjour Relookette :) Ton blog est sur OverBlog et cet article est pour Blogger ;)
    Dans ton cas, comme tu es en Premium, tu peux mettre du javascript.
    Je n'ai pas testé, mais essaye d'installer les 2 codes (javascript+HTML) dans un module Texte Libre en HTML.
    Tu me diras si ça marche ?

    RépondreSupprimer
  7. ah sympa cela faisait un moment que je recherchais cela, a mettre dans mon future configuration de zinfo, donc logiquement en novembre, merci Annak

    RépondreSupprimer
  8. Tu refais le design ou tu changes d'hébergeur ?

    RépondreSupprimer
  9. heelo, le changement d'hébergeur interviendra, je pense, si tout va bien au premier trimestre 2011 avec l'achat d'un nom de domaine et changement aussi d'hébergeur

    par contre j'aimerais sur blogger changer mon template courant ou fin novembre

    merci a toi

    RépondreSupprimer
  10. Bonjour Annak
    J'ai éssayé la méthode mais j'aimerais savoir comment la personaliser(couleur,forme)
    Merci!

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)