30 août 2010

(Blogger) Créer un menu horizontal à onglets

Sur Blogger, la conception d'un tel menu est très facile :


Dans Présentation > Eléments de la page, dans une colonne vous cliquez sur Ajouter un gadget et choisissez Liste des liens :

Vous complétez en ajoutant les liens qui mènent à l'Accueil de votre blog, aux tags importants ...
Avec les petites flèches à côté de Modifier-Supprimer, vous les classez.
Vous enregistrez et, ensuite, vous positionnez ce widget (module) tout en bas de l'entête : les liens se mettront sur une ligne horizontale.

Ensuite, si vous désirez que votre menu ait le même design que celui en photo ci-dessus, vous allez dans Présentation > Modifier l'HTML et vous rajoutez après la partie concernant l'entête
/* Header ----------------------------------------------- */
ce bloc
/* --Menu Horizontal-- */
.tabs-inner {margin: .5em 20px 0;padding: 0;}
.tabs-inner .section {margin: 0;}
.tabs-inner .widget ul {padding: 0;background: transparent none repeat scroll bottom; -moz-border-radius: 0;-webkit-border-radius: 0;-goog-ms-border-radius: 0;border-radius: 0;}
.tabs-inner .widget li {border: none;}
.tabs-inner .widget li a {display: inline-block;padding: .5em 1em;margin-right: .25em;color: #ffffff; font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;-moz-border-radius: 10px 10px 0 0;-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;-goog-ms-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;border-right: 1px solid transparent;}
.tabs-inner .widget li:first-child a {padding-left: 1.25em;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomleft: 0;-webkit-border-top-left-radius: 10px;-webkit-border-bottom-left-radius: 0;-goog-ms-border-top-left-radius: 10px;-goog-ms-border-bottom-left-radius: 0;border-top-left-radius: 10px;border-bottom-left-radius: 0;}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {position: relative;z-index: 1;
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;color: #336699;-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);-goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);}
.tabs-inner .widget li span {color:white!important;font-size:150%;margin-left:10px;margin-right:10px;}

6 commentaires:

  1. Bonjour,
    je me suis servi de votre astuce pour créer mon menu horizontal à onglets mais ce dernier donne l'intégralité des articles alors que j'ai mis sur la page d'accueil la fonction résumée et "lire la suite "... Comment pourrais je faire pour l'avoir dans le menu ?

    RépondreSupprimer
  2. bonjour,
    se serai pour savoir si je pourai avoir le code HTML pour pouvoir mettre plusieurs articles ayant le meme libélé dans un meme onglet. Comme sur votre blog. Merci d'avance Amandia

    RépondreSupprimer
  3. BONJOUR ANNAK,
    C'est eencore moi (voir mon com d'hier à propos des commentaires - réglé).
    Là j'ai un autre problème. Je suis arrivée à installer le menu horizontal, mais peux tu me dire comment supprimer le message suivant :
    "Affichage des messages dont le libellé est HISTOIRE. Afficher tous les messages" qui apparaît lorsque je clique sur un onglet (dans l'exemple sur HISTOIRE).
    Je te remercie sincèrement par avance.
    Janine

    RépondreSupprimer
  4. Bonjour,
    Ma barre de menu disparait dès lors que je clique sur l'un des onglet de celle-ci.
    Comment-faire pour que la barre menu reste sur chaque page lorsque je navigue dans mon blog ?
    Merci bcp !!

    RépondreSupprimer
  5. Bonjour, je voudrais suivre ce tuto mais je ne trouve pas "Présentation > Eléments de la page" ...
    Merci

    RépondreSupprimer
  6. Bonjour Anna,
    Je teste Blogger pour quitter Overblog. J'ai créé le gadget Liste des Liens pour le Menu mais dans la configuration je ne peux pas accéder à la case Ajouter un lien
    blog test : clagie.blogspot.fr

    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)