Codes css pour menu avec boutons

By
Advertisement

Après avoir choisi la marque de bouton que vous voulez afficher sur votre blog, Il vous faudra aussi héberger les fichiers des boutons dans votre compte Google page creator. Vous verrez par exemple dans le code css fournis ci-dessous l'adresse suivante : http://betabloggerfordummies.googlepages.com/tableftE.gif qui montre que le fichier gif pour le Boutons E a été hébergé sur le compte Google page creator de Vin.

Les différents fichiers gif pour les boutons sont téléchargeables ici (clic droit et enregistrer sous). Après avoir héberger les fichiers sur votre compte Google page creator, vous devrez changer le yourwebsite.com affiché dans le lien des codes css par le lien que vous aurez récuperer.

/*- Menu Tabs A --------------------------- */


#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs D--------------------------- */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}


11 commentaires:

  1. Bonsoir Rodney,
    J'ai sans doute loupé une étape, mais je ne vois pas où placer ce code css sur mon modèle, toutes mes étapes sont prêtes pour afficher des liens avec boutons mais je cale sur celle-ci. J'ai le code avec le lien via mon google page creator, mais je n'ai pas bien compris où le coller. D'avance merci pour ta réponse.

    RépondreSupprimer
  2. Bon, si tu as le code avec le lien google page créator pour l'image du bouton, tu le place juste avant b:skin dans ton modèle.

    Par contre, si c'est le code avec les liens des rubriques de ton blog que tu veux intégrer, va voir "éléments de la page" et ajouté un nouvel élément html/javascript qui comportera le code en question.

    RépondreSupprimer
  3. Bonjour,

    J'ai décidé de me lancer et de tenter la redécoration de mon blog. Grace a tes précieux conseils je suis parvenue a afficher les libellés avec boutons. Par contre sur le premier link apparait "accueille", hors mon blog est en espagnol. Y a-t-il un moyen pour le changer?

    Merci d'avance!
    Constance

    RépondreSupprimer
  4. @ Constance : Tu va sur modifier le code html, tu coche sur développer des modèles de gadget et là, tu fais ctrl+f, tu colle sur la pop-u le mot "acueille", dès que l'ordi te montre où il se trouve, tu le change par un autre puis tu enregistre les modifications.

    RépondreSupprimer
  5. Hello Rodney,

    Je me permets, je pense qu'il y a un souci avec le code TabsA (le A manque je pense dans le code)enfin j'y connais pas grand chose mais en faisant avec le code A cela ne fonctionnait pas et avec le code B c'est nikel.
    Autre point, j'ai cherché où mettre le code CSS et j'ai vu dans un commentaire avant b:skin et en fait c'est après (enfin moi ça fonctionne comme ça).
    Tu confirme ?
    Sinon pour mes autres questions :
    - liste, Anne m'a expliqué comment faire (article avec un sommaire avec lien sur les autres articles) je vais essayer.
    - agenda, j'attends de tes nouvelles.

    Merci bcp Rodney.
    Caroline.

    RépondreSupprimer
  6. @ Caroline Z. : Pour l'agenda je cherche. Pour le code, normalement, c'est à mettre avant /b:skin. Mais, si chez toi ça marche en mettant avant, c'est déjà ça.

    RépondreSupprimer
  7. Ok merci bcp. Je me suis inscrite pour recevoir les news, alors je reste à l'affut.
    En tout cas, j'adore ton blog et je suis très contente de l'avoir trouvé. Beaucoup de choses m'intéressent et j'essaie d'en mettre en pratique...mais t'inquiète pas trop, pas toutes je te rassure. Et puis il me faudra du temps rien que pour voir l'ensemble des astuces de ton blog et ensuite il faudra que je me mette à actualiser mon contenu...
    Merci chef blogger. (si je peux me permettre)
    Caroline

    RépondreSupprimer
  8. bonjour,
    alors moi mon probleme c'est que google page creator n'existe plus :(
    on peut faire autrement?

    RépondreSupprimer
  9. @ Kim Allouche : Utilise fileden.com

    RépondreSupprimer
  10. Hello Rodney,
    J'ai tout suivi a la lettre mais je recois ce message d'erreur lorsque je vuex sauvegarder:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "hl" must end with the ';' delimiter.

    Mes posts sont sauvegardés sous google doc et par example l'onglet contact est celui la http://docs.google.com/a/mahoganies-blog.com/Doc?docid=0AcZmHPxo7CkHZGN0NTI0cXFfMmd2c3Fmd2Ru&hl=en et tout de suite apres j'ai ajouter la fin du code menu tab D: /labeltabs/tabrightK.gif

    Est-ce que je dois ajouter un point virgule quelque part?
    merci d'avance!!

    RépondreSupprimer
  11. Bonjour Rodney,
    J'essaie d'intégrer ta barre de navigation F dans mon blog (comparerlescouts.blogspot.com) sous blogger mais comme j'ai utilisé l'outil de création de modèles, je ne sais pas où mettre le code (j'ai déjà modifié le lien vers les images). J'ai trois pages.
    Peux-tu m'aider?

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT