Installer un bouton de contact statique

29 avril 2013 : 2 nouveaux boutons "Newsletter" et "Rechercher" en ligne

31 mars 2013 : 3 nouveaux boutons à votre disposition : "Page précédente", "Commentaires" et "Facebook" (en attendant un tutoriel pour avoir des icônes vers les réseaux sociaux comme sur ce site.) 

28 août 2012 : de nouveaux boutons ont fait leur apparition ("La boutique", "Le blog", etc ) ! J'ai ajouté un chapitre expliquant comment mettre deux boutons l'un au-dessus de l'autre sur votre site.

On va voir dans ce tutoriel comment installer un bouton de contact statique dans Jimdo. L'avantage de ce genre de bouton est qu'il reste "accroché" sur un des côtés de l'écran quand on fait défiler la page, de sorte que vos visiteurs ne peuvent pas le manquer. Ainsi, quand on est à la fin de la page, tandis que le menu de navigation resté en haut n'est plus accessible, le bouton de contact reste, lui, à portée de clic et vos visiteurs peuvent vous contacter aisément.

 

Aperçu du résultat

Cette image vous montre l'intérêt de ce bouton :

Bouton feedback statique pratique
  • Vous avez un aperçu du résultat ici-même, sur la gauche.
  • Une autre démonstration avec des couleurs plus foncées est visible sur Mediaformations. En effet, c'est sur un article de ce site que j'ai trouvé le code du bouton, auquel j'ai apporté quelques modifications de détails.

Insérer la feuille de style dans votre site Jimdo

On commence par insérer la feuille de style qui va donner au bouton ses couleurs et déterminer son emplacement sur la page. 

Où ça se passe ?

En mode Admin, cliquez sur Paramètres > Insérer dans le header. C'est dans la fenêtre de saisie que vous copierez-collerez le code CSS.

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

Le code CSS

Code n°1 : un bouton simple

Ce code permet d'afficher un bouton de contact simple. Rien de spécial ne se passe quand on passe le pointeur sur le bouton.

<style type="text/css">

/* Bouton statique de contact simple */

#feedback a {
display: block;
position: fixed;
top: 200px;   /* Emplacement du bouton en hauteur : remplacer 200 par 350 pour le descendre */
left: 0px;    /* Pour placer le bouton à droite, remplacer "left" par "right" */
background: #6DC7F7;   /* Pour changer la couleur du bouton, remplacer #6DC7F7 */
padding: 7px 5px;
border: 1px solid #61B3DE;  /* Couleur de la bordure plus foncée que celle du bouton. Pour la changer, remplacer #61B3DE */
border-left-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton  */
border-top-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton */
}

</style>

Code n°2 : un bouton avec un effet au survol du pointeur

Ce code permet d'afficher un bouton de contact un peu plus élaboré : il change de couleur quand le pointeur est dessus.

<style type="text/css">

/* Bouton de contact statique avec effet au survol du pointeur */

#feedback a {
display: block;
position: fixed;
top: 200px;   /* Emplacement du bouton en hauteur : remplacer 200 par 300 pour le descendre */
left: 0px;    /* Pour placer le bouton à droite, remplacer "left" par "right" */
background: #6DC7F7;   /* Pour changer la couleur du bouton, remplacer #6DC7F7 */
padding: 7px 5px;
border: 1px solid #61B3DE;  /* Couleur de la bordure plus foncée que celle du bouton. Pour la changer, remplacer #61B3DE */
border-left-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton  */
border-top-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton */
}

#feedback a:hover {
background: #009FE4;   /* Couleur du bouton au survol de la souris : pour la changer, remplacer #6DC7F7 */
border: 1px solid #009FE4;   /* Cette couleur doit être identique à la précédente */
}

</style>

Personnaliser le code

J'ai indiqué dans les commentaires des deux codes (entre /* et */) comment les modifier. D'une part, vous pouvez préciser l'emplacement de votre bouton sur la page : plus haut ou plus bas, à droite ou à gauche de la page. Par ailleurs, vous pouvez adapter les couleurs à celles de votre site, en modifiant les couleurs du bouton au repos et au survol de la souris, ainsi que les couleurs des bordures.

Choisir les couleurs

Pour sélectionner vos couleurs, utilisez ce sélecteur, qui vous donnera le code hexadécimal des couleurs à utiliser (par exemple, #efefef est un gris très clair) :

Quand vous en avez fini avec la personnalisation de votre code, appuyez sur le bouton Enregistrer pour valider vos changements et passer à l'insertion du code.

Flèche vers le haut

Insérer le code du bouton

Maintenant que vous avez déterminé l'apparence de votre bouton, il vous reste à le faire apparaître sur votre page. Pour cela, ajoutez un élément + Widget/HTML dans la colonne latérale de votre site et collez-y un des codes ci-dessous, selon le texte que vous voulez afficher sur le bouton. Après que vous aurez enregistré et rafraîchi la page, votre bouton apparaîtra à vos couleurs, avec le texte que vous aurez choisi.

Bouton "Feedback"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Contactez-moi">
    <img src="http://img411.imageshack.us/img411/5823/feedbackt.png" alt="Feedback"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Contact"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Contactez-moi">
    <img src="http://img849.imageshack.us/img849/4198/contact2.png" alt="Contact"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Contactez-moi"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Contactez-moi">
    <img src="http://img850.imageshack.us/img850/5724/contactezmoi.png" alt="Contactez-moi"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Contactez-nous"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Contactez-nous">
    <img src="http://img692.imageshack.us/img692/9663/contacteznous.png" alt="Contactez-nous"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Me contacter"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Me contacter">
    <img src="http://img577.imageshack.us/img577/2974/mecontacter.png" alt="Me contacter"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Nous contacter"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Nous contacter">
    <img src="http://img29.imageshack.us/img29/9162/nouscontacter.png" alt="Nous contacter"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Ecrivez-moi"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Ecrivez-moi">
    <img src="http://img703.imageshack.us/img703/5809/ecrivezmoi.png" alt="Ecrivez-moi"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Ecrivez-nous"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Ecrivez-nous">
    <img src="http://img863.imageshack.us/img863/2017/ecriveznous.png" alt="Ecrivez-nous"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Me joindre"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Me joindre">
    <img src="http://img191.imageshack.us/img191/4984/mejoindre.png" alt="Me joindre"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

Bouton "Nous joindre"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/contact/" title="Nous joindre">
    <img src="http://img508.imageshack.us/img508/8143/nousjoindre.png" alt="Nous joindre"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse de votre site à l'endroit indiqué dans le code !

 

En réponse aux commentaires du site et à quelques messages reçus par mail, j'ajoute une dizaine de nouveaux intitulés pour le bouton qui ne sert plus qu'à "contacter"... du coup ;)

 

Bouton "Accueil"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/accueil/" title="Retourner à la page d'accueil du site">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/accueil.png" alt="Accueil"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Actualités"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/votre-page/" title="L'actualité du site">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/actualites.png" alt="Actualités"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Blog"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/blog/" title="Voir le blog">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/blog.png" alt="Blog"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Boutique"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/shop/" title="Visiter la boutique">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/boutique.png" alt="Boutique"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "La boutique"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/shop/" title="Visiter notre boutique">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/la-boutique.png" alt="La boutique"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Notre e-shop"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/shop/" title="Ma boutique en ligne">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/notre-e-shop.png" alt="Notre e-shop"/>
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Forum"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/forum/" title="Aller sur le forum">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/forum.png" alt="Forum" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Le forum"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/forum/" title="Aller sur le forum">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/le-forum.png" alt="Le forum" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Les news"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/news/" title="Lire les news">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/les-news.png" alt="Les news" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Commentaires"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/commentaires/" title="Voir les commentaires">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/commentaires.png" alt="Les commentaires" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Facebook"

<div id="feedback">
    <a href="http://www.facebook.com/realiajimdo" title="Notre page sur Facebook">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/facebook.png" alt="Facebook" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Page précédente"

<div id="feedback">
    <a href="javascript:history.back()" title="Page précédente">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/page-precedente.png" alt="Page précédente" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Newsletter"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/newsletter" title="Notre newsletter">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/newsletter.png" alt="Neswletter" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Bouton "Rechercher"

<div id="feedback">
    <a href="http://votre-site.jimdo.com/rechercher" title="Rechercher sur le site">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/rechercher.png" alt="Rechercher" />
    </a>
</div>

N'oubliez pas d'inscrire l'adresse exacte de votre page dans le code !

Flèche vers le haut

Comment insérer deux boutons ?

On me demande dans l'oreillette : "Et si je veux insérer deux boutons, l'un au-dessus de l'autre ?" C'est possible ; voyons comment.

Insertion de la feuille de style du second bouton

En mode Admin, rendez-vous dans Paramètres > Modifier le head et copiez-collez l'un des deux codes suivants suivant l'aspect que vous voulez donner à votre bouton.

Code n°1 : un second bouton simple

Ce code permet d'afficher un second bouton simple. Rien de spécial ne se passe quand on passe le pointeur sur le bouton.

<style type="text/css">

/* Second bouton statique simple */

#feedbackbis a {
display: block;
position: fixed;
top: 350px;   /* Emplacement du bouton en hauteur : remplacer 350 par 370 pour le descendre */
left: 0px;    /* Pour placer le bouton à droite, remplacer "left" par "right" */
background: #6DC7F7;   /* Pour changer la couleur du bouton, remplacer #6DC7F7 */
padding: 7px 5px;
border: 1px solid #61B3DE;  /* Couleur de la bordure plus foncée que celle du bouton. Pour la changer, remplacer #61B3DE */
border-left-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton  */
border-top-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton */
}

</style>

Code n°2 : un second bouton avec un effet au survol du pointeur

Ce code permet d'afficher un second bouton un peu plus élaboré : il change de couleur quand le pointeur est dessus.

<style type="text/css">

/* Second bouton statique avec effet au survol du pointeur */

#feedbackbis a {
display: block;
position: fixed;
top: 350px;   /* Emplacement du bouton en hauteur : remplacer 350 par 380 pour le descendre */
left: 0px;    /* Pour placer le bouton à droite, remplacer "left" par "right" */
background: #6DC7F7;   /* Pour changer la couleur du bouton, remplacer #6DC7F7 */
padding: 7px 5px;
border: 1px solid #61B3DE;  /* Couleur de la bordure plus foncée que celle du bouton. Pour la changer, remplacer #61B3DE */
border-left-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton  */
border-top-color: #6DC7F7;  /* Cette couleur doit être la même que celle du bouton */
}

#feedbackbis a:hover {
background: #009FE4;   /* Couleur du bouton au survol de la souris : pour la changer, remplacer #6DC7F7 */
border: 1px solid #009FE4;   /* Cette couleur doit être identique à la précédente */
}

</style>

N'oubliez pas d'enregistrer la page pour valider les changements. Ne vous préoccupez pas du petit message d'information vert qui surgit (une histoire de code "épuré"... ) ; c'est normal.

Insertion du code HTML du second bouton

Procédez comme pour le premier bouton : dans la barre latérale de votre site, à partir de n'importe quelle page, ajoutez un élément +Widget/HTML. Dans le cadre de saisie, copiez-collez le code du bouton qui vous intéresse parmi tous ceux présentés plus haut.

Dans le code, remplacez juste le mot "feedback" par "feedbackbis" pour obtenir ceci par exemple : 

<div id="feedbackbis">
    <a href="http://votre-site.jimdo.com/shop/" title="Ma boutique en ligne">
    <img src="http://sd-1.archive-host.com/membres/images/3347790973941088/notre-e-shop.png" alt="Notre e-shop"/>
    </a>
</div>

Validez en cliquant sur le bouton "Enregistrer", repassez en mode "Aperçu" et vos deux boutons apparaissent, l'un au-dessus de l'autre :

Deux boutons
Deux boutons

Les problèmes qui peuvent se poser

Suivant la taille des boutons, il se peut que le second bouton vous semble trop éloigné du premier ou, inversement, que les deux boutons se touchent voire se chevauchent. Pour ajuster l'espacement entre les deux boutons, il faut modifier cette partie du code du second bouton (ne touchez pas au code du premier bouton) :

top: 350px;   /* Emplacement du bouton en hauteur : remplacer 350 par 380 pour le descendre */

Cette ligne représente la distance (en pixels) qu'il y a entre le haut de la page et le bouton, donc :

  • pour descendre le bouton, il faut augmenter la valeur (passer à 380px par exemple)
  • pour remonter le bouton, il faut réduire la valeur (passer à 310px par exemple)

Il va falloir essayer plusieurs valeurs et procéder par tâtonnements pour trouver la valeur exacte. 

Flèche vers le haut

Besoin d'un autre intitulé pour votre bouton ?

Je sais maintenant "fabriquer" le texte du bouton et je peux donc, à partir de la matrice que j'ai faite, en produire d'autres. N'hésitez pas à poster dans les commentaires vos idées d'intitulés. Dès que j'aurai le temps, je les produirai et les mettrai en ligne sur cette page.

Vous avez installé le bouton ? Dites-le !

Écrire commentaire

Commentaires : 100
  • #1

    jocartoon (vendredi, 25 février 2011 19:30)

    Est il possible d' utiliser ce bouton pour retourner en haut de page ? (comme avec la fléche haut de l'ascenceur que je n' utilise pas parce qu'elle ne fonctionne pas sur mon site.

  • #2

    Isabelle (vendredi, 25 février 2011 20:29)

    Bonsoir !
    J'ai fait des recherches aujourd'hui sur les raisons pour lesquelles l'ascenseur ne fonctionnait pas sur certains sites. J'ai trouve pourquoi : Jimdo a changé sa façon de nommer les éléments des templates. Pouvez-vous faire un essai en utilisant ce code :

    <!-- code flèche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#cc-tp-footer" title="Atteindre le bas de la page">
    <img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt="Flèche bas" />
    </a>
    <!-- code flèche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#cc-tp-top" title="Remonter">
    <img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut" />
    </a>

    Je suis pratiquement sûre que cela va marcher !
    Pour ce qui est du script de défilement doux, il ne fonctionne pas si l'adresse de la page contient des accents. Je ne sais pas ce qu'il faut changer dans le script pour qu'il fonctionne même avec les accents, hélas...

    Tenez-moi au courant ! Si cela fonctionne, je pourrai mettre à jour le tutoriel !

  • #3

    jocartoon (vendredi, 25 février 2011 21:48)

    Merci! Ca marche! J'ai juste changé l'adresse des images par les miennes! Et ca fonctionne aussi! Tu est GENIALE! Ton site est MAGNIFIQUE! J'aprécie énormement tout le travail que tu fait! (Et aussi le commentaire que tu as laissé sur mon livre d'or!)

  • #4

    Pfister Caroline (mercredi, 09 mars 2011 17:57)

    Installation réussie sur mon site
    Merci !

  • #5

    machines2jeux (lundi, 14 mars 2011 21:09)

    Parfait, installation terminée, merci bien !

  • #6

    Artdeos (lundi, 21 mars 2011 15:35)

    Ca marche !!!
    ;-)

  • #7

    jardinhostalavista (dimanche, 10 avril 2011 07:01)

    Bonjour,
    Merci pour tout ces trucs. J'aimerais savoir si pour ce bouton on peut changer "feedback" pour un mot français" admettons "Me joindre?

  • #8

    Isabelle (dimanche, 10 avril 2011 10:37)

    Bonjour ! Oui, on peut changer le mot "feedback" par "contact" ; il suffit de remplacer l'image "feedback" par l'image "contact" correspondante. J'ai cherché looooongtemps l'équivalent français, mais en vain. N'ayant aucun talent de graphiste, j'ai gardé l'anglais, mais si un jimdonaute maîtrise assez Photoshop pour faire un bouton "contact" (en s'inspirant de cette image : http://img411.imageshack.us/img411/5823/feedbackt.png), je suis preneuse ! ;-)

    Cordialement,

    Isabelle

  • #9

    jardinhostalavista (dimanche, 10 avril 2011 14:10)

    Bonjour,
    Merci pour ta réponse alors attendons une âme charitable qui saura le faire. En passant merci pour ton site c'est un incontournable.
    Françoise

  • #10

    jardinhostalavistatest (dimanche, 10 avril 2011 17:24)

    Bonjour,

    Je n'ai pas le temps ce matin de faire un bouton mais il y a ce lien : http://www.bannieres-en-ligne.fr/interface.php#null
    par contre il faut payé des frais pour avoir un code. Moi je l'ai utilisé pour faire ma bannière sur ma page d'entrée sur mon site. On a 24 heures pour en faire le nombre que l'on veut alors peut-être que ça marcherait pour un bouton car on peut en faire et choisir celui que l'on veut et écrire ce que l'on veut aussi.
    à suivre
    Françoise

  • #11

    Le président (jeudi, 21 avril 2011 20:31)

    bonsoir,

    Ca me demande de mettre le nom du site et ca me l'affiche en lien dans le bouton c'est moche ou est l'erreur dans le code ?

  • #12

    auré (vendredi, 22 avril 2011 11:03)

    Moi j'ai le même problème que 'Le président' !

  • #13

    Isabelle (vendredi, 22 avril 2011 14:55)

    Au "président" : votre code est erroné. Le voici, corrigé :

    <div id="feedback">
    <a href="http://www.ploumadouro.com/contacts/" title="Contactez-moi"><img src="http://img411.imageshack.us/img411/5823/feedbackt.png" alt="Feedback"/></a>
    </div>

    A Auré : n'ayant pas l'adresse de votre site, je ne peux pas vous aider à réparer le problème...

    Cordialement,

    Isa

  • #14

    Véronique Dumont (samedi, 23 avril 2011 23:48)

    Je l'ai essayé et je trouve que le tout très esthétique en plus d'être pratique. Merci Isabelle !

  • #15

    jardinhostalavista (dimanche, 24 avril 2011 03:33)

    Oui merci beaucoup c'est très apprécié. Par contre une autre demande, pourrais-je changer la couleur et la grosseur du texte pour harmoniser avec mon site sur la sidebar.? J'ai essayé de le faire sans succès. Je ne suis pas très bonne en HTLM.

  • #16

    Isabelle (dimanche, 24 avril 2011 11:46)

    Bonjour ! Pour changer la couleur du bouton, il faut modifier le code de la CSS (voir les commentaires et le colorpicker pour choisir la couleur qui va bien). Pour un texte plus gros et d'une autre couleur, il faut modifier l'image en elle-même du texte "Contactez-moi". Je peux essayer de fabriquer une nouvelle image si vous me donnez la valeur hexadécimale de la couleur souhaitée, la taille que vous voulez et l'intitulé du texte. (Cela dit, j'ai essayé de produire des textes foncés et le rendu n'était pas terrible... j'ignore pourquoi ?)

  • #17

    jardinhostalavista (dimanche, 24 avril 2011 18:10)

    Pour changer la couleur du bouton pas de problème ça c'est fait. Je pensais qu'en modifiant le code dans le CSS comme pour la couleur du bouton, on aurait pu faire la même chose pour la couleur et la grosseur du texte. C'est très bien comme il est dans le moment. Je ne veux pas que du travail supplémentaire soit fait. Ce n'est que mon côté perfectionniste qui voulait ce changement alors je lui ai dit de se taire hihihihihiih.
    Merci beaucoup.
    Françoise

  • #18

    JP (lundi, 25 avril 2011 04:39)

    chez moi aussi installation réussie! merci beaucoup cette fois encore!!!!

  • #19

    Le président (jeudi, 28 avril 2011 01:16)

    Merci isabelle
    Code correct

    j'essai de créer un bouton contact,à voir ce que cela peut donner ?
    Et comment l'inserer !

    A bientôt et encore merçi !

    Le président

  • #20

    arretsurimage (jeudi, 05 mai 2011 16:43)

    Bonjour Isabelle
    Merci beaucoup pour cette explication!! tout fonctionne.!!!..c'est génial.
    Amitiés du net.

  • #21

    agnesescriva (jeudi, 02 juin 2011 18:18)

    J'ai copié ce code :
    <!-- code flèche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#cc-tp-footer" title="Atteindre le bas de la page">
    <img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt="Flèche bas" />
    </a>
    <!-- code flèche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#cc-tp-top" title="Remonter">
    <img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut" />
    </a>

    Le bouton pour descendre fonctionne bien mais pas celui pour remonter...
    Que faire ?
    Merci

  • #22

    Isa (admin) (jeudi, 02 juin 2011 18:48)

    Bonjour Agnès,
    Essayez avec ce code ; cela devrait fonctionner :

    <!-- code flèche bas -->
    <a style="display:scroll; position: fixed; bottom: 5px; right: 5px;" href="#cc-tp-footer" title="Atteindre le bas de la page">
    <img src="http://img411.imageshack.us/img411/5653/arrowdown.gif" alt="Flèche bas" />
    </a>
    <!-- code flèche haut -->
    <a style="display:scroll; position: fixed; bottom: 25px; right: 5px;" href="#cc-tp-container" title="Remonter">
    <img src="http://img208.imageshack.us/img208/5130/arrowup.gif" alt="Flèche haut" />
    </a>

  • #23

    agnesescriva (vendredi, 03 juin 2011 16:58)

    Merci Isa,
    ça fonctionne, en effet mon bloc s'appelle cc-tp-container...

  • #24

    chezmarienoelle (mercredi, 08 juin 2011 15:15)

    Je n'ai qu'un mot : MERCI !!!! tout simplement géniaux tes tutos !! Je viens d'installer le bouton contact, modifié à ma sauce !! je viens de découvrir ton site je le mets dans mes favoris !! thanks again ;-)

  • #25

    Erasus (mercredi, 08 juin 2011 18:43)

    Je vous remercie pour ces superbes tutoriaux ! J'ai bien progressé grâce à vous :)

  • #26

    anisetsouleou (jeudi, 23 juin 2011 03:53)

    Isabelle, votre site est une mine precieuse d' informations.
    Installation reussie dans mon prototype.
    je n' ai que quelques mots a dire :

    MERCI MERCI MERCI !!!!!

  • #27

    sz-cuisine (lundi, 04 juillet 2011 14:51)

    Bonjour,
    Comme mes camarades merci pour ce site qui m'aide à bien appréhender l'univeers Jimdo.... Je m'éclate.
    J'ai essayé d'insérer le bouton "Me contacter", il est bien là où il faut et de la couleur qu'il faut mais quand je clique dessus j'ai ce message qui apparait: La page n'a pas été trouvée

    "La page souhaitée n'existe malheureusement pas (ou plus), ou une faute de frappe empêche la page de s'ouvrir.Retour à la page d'accueil"
    Je suppose que j'ai oublié quelque chose, mais quoi?...
    Merci d'avance pour votre aide!

  • #28

    sz-cuisine (lundi, 04 juillet 2011 15:00)

    Ayé j'ai compris toute seule...
    Il faut dire que tu nous expliques bien les choses. J'avais oublié de remplacé le /contact par /me-contacter
    Merci

  • #29

    Isa (admin) (lundi, 04 juillet 2011 15:02)

    Bonjour Sandrine,
    Je viens de regarder votre site et tout m'a l'air en ordre ;)
    Merci à tous pour les petits messages !
    Isa

  • #30

    Richoult (mardi, 19 juillet 2011 18:19)

    Salutation, déjà merci pour ce bouton.
    Mais j'aimerais pousser un peu plus et avoir un second bouton "Forum" en dessous du premier bouton "Me contacter".
    Comment faire ?

  • #31

    rhuysmultiservices (mercredi, 27 juillet 2011 17:52)

    merci !!!! excellent ce site !

  • #32

    Jean Louis DARRIÈRE (jeudi, 27 octobre 2011 16:36)

    Merci ! Merci !
    Grâce à toutes ces astuces, je vais finir par mourir par tout à fait idiot…

  • #33

    Jean Louis DARRIÈRE (jeudi, 27 octobre 2011 17:49)

    Et même arriver à positionner une petite image "bricolée" comme je l'ai fait ici :
    http://www.latoqueantillaise.com
    Merci encore

  • #34

    Lau (mardi, 29 novembre 2011 20:36)

    J'ai essayé...ça marche!
    J'ai changé les couleurs...ça me plait!
    UN GRAND MERCI!!!

  • #35

    appli (mercredi, 15 février 2012 00:05)

    sa marche pas avec moi

  • #36

    appli (mercredi, 15 février 2012 00:14)

    a si sa marche merci beaucoup

  • #37

    pokemimi (mercredi, 29 février 2012 19:20)

    Bonjour, je voudrais pour mon site remplacer le texte par "Accueil" pour que même quand on est en bas de page on puisse retourner à l'accueil, Comment faire?

    Merci d'avance!

  • #38

    Baeveghems (dimanche, 04 mars 2012 21:29)

    Bonsoir..

    J'aimerai installé un bouton.. Commander le livre

    Pourriez-vous me le faire svp.
    Si pas, je me débrouillerai.. ^^

    Je vous donne le liens du site pour vous donner une idée..

    Http://www.narcolepsie-livre.be

    Bonne soirée

  • #39

    manga-one (samedi, 31 mars 2012 19:26)

    Salut, j'ai testé le bouton "contact"; je voudrais savoir si on pouvait avoir deux bouton sur la même page. J'aimerais avoir un bouton " Recherche " si c'est possible !

  • #40

    Adeline (mercredi, 23 mai 2012 18:31)

    Bonjour, j'ai installé un bouton de contact statique et comme je ne le voyais pas, j'en ai malheureusement installés 2, qui se superposent et cela se voit légèrement et c'est très moche ! Comment puis-je modifier ou supprimer ces boutons, car je ne peux plus rien faire ?

    d'autre part, le contact ne se fait pas, cela donne page introuvable

  • #41

    Sorcier Apokalyps (samedi, 23 juin 2012 19:27)

    Merci pour ce tuto, ça fonctionne très bien.

  • #42

    magalidphotos (vendredi, 05 octobre 2012 18:36)

    Bonjour,
    j'ai installer un bouton "me contacter" sur mon site, cela marche parfaitement,

    par contre est il possible de le supprimer uniquement sur le site mobile ?
    en effet celui-ci gêne considérablement la lecture sur un mobile.
    merci

  • #43

    shabiller-sans-se-ruiner1 (mardi, 11 décembre 2012 14:23)

    Bonjour!
    Super tutoriel,
    Esce qu'on pourrait avoir un bouton "Facebook" qui permettrai d'envoyer les gens sur la page FB ?

  • #44

    cheminee-christian (samedi, 15 décembre 2012 08:56)

    Bonjour,

    super tuto, par contre, comment peut-on le supprimé après coup?

    Cordialement.

  • #45

    GOYARD (dimanche, 24 février 2013 18:56)

    Bonjour,
    Merci beaucoup pour ce super tutorial. J'ai une question : ou sont stockées les images des boutons, sont-elles sur le site, si oui où ? ou bien sont-elles enregistrées ailleurs, si oui où ?

    Merci de votre réponse.
    Dans l'attente
    Hervé

  • #46

    favoris (dimanche, 24 février 2013 19:31)

    @magalidphotos : je ne crois pas que ce soit possible, car on n'a pas la main sur la CSS qui régit l'affichage mobile du site. Si vous trouvez, faites-moi signe ;)
    @shabiller : un bouton Facebook, c'est une bonne idée en effet ! Je l'ajoute à la to-do list.
    @cheminee-christian : pour le supprimer, supprimez le widhet-HTML qui contient le code que vous avez copié-collé (attention c'est très fin comme élément ! passez la souris sur la colonne latérale de votre site et soyez patient... )
    @Goyard : les images sont stockées sur un de mes espaces de stockage (archive-host pour le citer)

  • #47

    Isa (dimanche, 24 février 2013 21:16)

    @magalidphotos : après une recherche, si c'est possible de cacher le bouton dans la version mobile du site en ajoutant la classe "onlymobile" dans le code. Cela donne :
    <div id="feedback" class="onlymobile">
    (...)
    </div>
    Merci de m'avoir fait chercher et découvrir cette classe bien utile !!!

  • #48

    asruc-sectionsportetudiant (mercredi, 13 mars 2013 11:33)

    Bonjour Isa,

    Tout d'abord merci pour ces tuto qui sont super.
    Ensuite je viens demander conseil pour un petit problème,
    Alors voilà, j'ai fait sur mon site des bouton dans le même style que "me contacter" sauf que je les ai placé en haut avec top. (je travail sur un Eee PC) Après avoir réglé la position avec left pour que mes 3 boutons soient centrés, je me suis rendu compte avec un grand écran et donc pas la même résolution que mes boutons ne sont plus centrés (ce qui est normal : par exemple pour le premier j'ai mis left: 80px et donc sur une plus grande résolution ça fait une grande différence.)
    Alors ma question c'est : est il possible que quelque soit la résolution mes 3 boutons soient centrés?

    C'est que sur la page compétition que je les ai mis:

    [http://asruc-sectionsportetudiant.jimdo.com/comp%C3%A9tition/les-licences-comp%C3%A9titions-%C3%A9toiles/]

  • #49

    asruc-sectionsportetudiant (mercredi, 13 mars 2013 11:36)

    <a href="http://asruc-sectionsportetudiant.jimdo.com/comp%C3%A9tition/les-licences-comp%C3%A9titions-%C3%A9toiles/" target="_blank">site</a>


    merci d'avance

  • #50

    Isa (admin) (mercredi, 13 mars 2013 11:50)

    Bonjour ! Oui, je pense qu'un centrage est possible. Pour cela, il faudrait :
    - sauvegarder le code que tu utilises pour pouvoir le réutiliser au cas où ;)
    - enlever la mention "left" de tous tes codes (ne pas mettre 0, mais enlever la ligne "left: xxx px;")
    - mettre tes boutons dans des divs que tu empiles dans un seul Widget/HTML, sans utiliser l'élément "colonnes comme tu l'as fait.
    Tiens-moi au courant !
    Isa

  • #51

    asruc-sectionsportetudiant (mercredi, 13 mars 2013 12:20)

    Merci beaucoup pour cette réponse rapide ;)
    J'ai déjà les 3 dans le même widget /html et j'ai enlevé les left.
    résultat, ils sont empilés les un sur les autres mais au moins que cela soit sur le petit écran ou le grand écran, ils sont placé au même endroit (page résultats sportifs)

  • #52

    favoris (mercredi, 13 mars 2013 16:08)

    Après quelques essais, voici ce que j'ai trouvé :

    Le code CSS
    ---------------

    <style type="text/css">
    /*<![CDATA[*/

    #blocktop {
    display: block;
    position: fixed;
    margin: auto;
    width: 800px;
    top: 0px;
    }

    /* second bouton de contact statique avec effet au survol du pointeur */

    #feedbackbis a {
    display: inline-block;
    float: left;
    background: #000000; /* Pour changer la couleur du bouton, remplacer #000000 */
    border: 1px solid #000000; /* Couleur de la bordure plus foncée que celle du bouton. Pour la changer, remplacer #61B3DE */
    border-left-color: #000000; /* Cette couleur doit être la même que celle du bouton */
    border-top-color: #000000; /* Cette couleur doit être la même que celle du bouton */
    }

    /*3me Bouton de contact statique avec effet au survol du pointeur */

    #feedbacktierce a {
    display: inline-block;
    float: left;
    background: #000000; /* Pour changer la couleur du bouton, remplacer #000000 */
    border: 1px solid #000000; /* Couleur de la bordure plus foncée que celle du bouton. Pour la changer, remplacer #61B3DE */
    border-left-color: #000000; /* Cette couleur doit être la même que celle du bouton */
    border-top-color: #000000; /* Cette couleur doit être la même que celle du bouton */
    }

    /* 4me Bouton de contact statique avec effet au survol du pointeur */

    #feedbackquator a {
    display: inline-block;
    float: left;
    background: #000000; /* Pour changer la couleur du bouton, remplacer #000000 */
    border: 1px solid #000000; /* Couleur de la bordure plus foncée que celle du bouton. Pour la changer, remplacer #61B3DE */
    border-left-color: #000000; /* Cette couleur doit être la même que celle du bouton */
    border-top-color: #000000; /* Cette couleur doit être la même que celle du bouton */
    }

    /*]]>*/
    </style>

    Le code HTML (dans un widget)
    -------------------------------------

    <div id="blocktop">
    <div id="feedbackbis">
    <a href="http://asruc-sectionsportetudiant.jimdo.com/comp%C3%A9tition/calendrier-des-comp%C3%A9titions/" title="Calendrier compétitions"><img src=
    "http://imageshack.us/a/img841/8497/ongletcomptition.png" alt="" /></a>
    </div>

    <div id="feedbacktierce">
    <a href="http://asruc-sectionsportetudiant.jimdo.com/comp%C3%A9tition/r%C3%A9sultats-spotifs/"><img src="http://imageshack.us/a/img542/3532/ongletresultats.png" alt="" /></a>
    </div>

    <div id="feedbackquator">
    <a href="http://asruc-sectionsportetudiant.jimdo.com/comp%C3%A9tition/les-licences-comp%C3%A9titions-%C3%A9toiles/" title="licences"><img src=
    "http://imageshack.us/a/img594/2588/ongletlicences.png" alt="" /></a>
    </div>
    </div>

    (Vos DIVS étaient mal fermées)

    Ce code est visible sur http://customize.jimdo.com.

  • #53

    realia-demo (mercredi, 13 mars 2013 16:24)

    Au temps pour moi, j'ai bloqué mon mot de passe... La démo est donc visible ici : http://realia-demo.jimdo.com/test/ La barre n'est pas complètement centrée. Dans le code, il faut tâtonner avec un margin-left pour centrer :

    #blocktop {
    display: block;
    position: fixed;
    margin: auto;
    width: 800px;
    margin-left: 45px;
    top: 0px;
    }

  • #54

    asruc-sectionsportetudiant (jeudi, 14 mars 2013 09:16)

    Merci beaucoup pour ce travail, c'est vraiment sympa, je vais essayer de le faire tout à l'heure mais merci encore ;)

  • #55

    asruc-sectionsportetudiant (jeudi, 14 mars 2013 11:19)

    Voilà j'ai réussi à l'appliquer en touchant à margin-left et en le mettant à -50px.
    Par contre j'ai lu quelque part qu'il valait mieux éviter les "-" dans les codes. ça ne risque pas de poser des problèmes par la suite?
    En tout les cas merci beaucoup, vous êtes géniale ;)

  • #56

    favoris (jeudi, 14 mars 2013 11:58)

    Bonjour ! Contente que ça ait marché ;) Je ne pense pas que cette marge négative soit problématique, puisqu'on est en positionnement fixe sur cette DIV. Il faudrait tester le rendu sur plusieurs navigateurs (notamment cette cochonnerie d'IE... ) pour s'en assurer. En tout cas, c'est bon sur Mac avec Opera, FF, Chrome et Safari...

  • #57

    les-cesars (vendredi, 15 mars 2013 13:58)

    Bonjour et merci pour ce tuto très utile :) j'aimerai savoir si tu peux me faire un bouton avec l'intitulé "Page précédente" ce serait vraiment sympa :D
    merci beaucoup

  • #58

    Administrateur (lundi, 18 mars 2013 16:26)

    Bnjour, je n'arrive pas à insérer un objet dans la barre latéral

    D: Aidez moi ! D:

  • #59

    Administrateur (lundi, 18 mars 2013 16:27)

    Désolé je rectifie, j'y arrive très bien désolé ^^'

  • #60

    Administrateur (lundi, 18 mars 2013 16:30)

    Mais par contre le bouton n'apparaît pas à l’endroit souhaiter.. J'ais pourtant bien mis right et de plus le bouton n'est pas collé a la marge du site D:

  • #61

    Happlay (dimanche, 31 mars 2013 12:20)

    Tu pourais créé un bouton "commentaire"s'il te plait, merci pour tout !

  • #62

    Isa (dimanche, 31 mars 2013 17:27)

    @Happlay : c'est fait ;)
    @Administrateur : ça a l'air réglé ce problème ?
    @les-cesars : c'est fait également !

  • #63

    gael1980 (jeudi, 11 avril 2013 09:31)

    Bonjour,
    Bravo pour votre site.
    Serait il possible de créer un bouton "Rechercher"?
    Merci d'avance
    Gaël

  • #64

    aloeverasante (lundi, 15 avril 2013 15:59)

    Bonjour Isabelle,

    je viens de passer mon site en pro et le "nous contacter" se retrouve a horizontal au lieu de la vertical collé à la fenêtre.... :(

    et je n'ai pas trouvé l'astuce, j'ai bien remis le nouveau nom de domaine: aloeverasante.net dans la barre latéral
    merci

  • #65

    aloeverasante (lundi, 15 avril 2013 16:06)

    et ce qui est étrange c'est que le 2e bouton statique "blog", lui n'a pas bouger très étrange, et je n'ai pas vu d'astuce dans les commentaire ici,
    dommage
    vis une belle journée

  • #66

    Isabelle (lundi, 15 avril 2013 18:43)

    Bonsoir,
    Je viens de regarder ton code. C'est tout bête : l'adresse de l'image est erronée. C'est pour cela qu'elle ne s'affiche pas. Reprends les codes donnés dans le tutoriel et tout rentrera dans l'ordre ;)
    Belle soirée !
    Isa

  • #67

    aloeverasante (mardi, 16 avril 2013 09:16)

    Merci Isabelle,
    après 5 tentatives ... et essaie avec un autre bouton , cela a marché, étrange tout de même

  • #68

    aloeverasante (mardi, 16 avril 2013 09:18)

    et je viens de voir qu'en passant en pro de nombreux widgets ne fonctionnent plus, ou ont perdus leur image, comme les retours fleches vers le haut ...
    merci jimdo pour la version pro!

  • #69

    Nathalie Démaret-Portelli (lundi, 29 avril 2013 11:19)

    Bonjour,

    Merci pour vos boutons, c'est une super idée ! Je souhaite en créer un second intitulé "Newsletter" mais je n'arrive pas à l'installer. Le bouton fonctionne mais je ne peux pas changer le texte. Enfin, lorsque je copie et colle l'un de vos ex (Me contacter, facebook, forum...) et que je modifie le texte en le remplaçant par Newsletter, le bouton change de sens et le titre n'apparaît pas. Par contre, le lien fonctionne.
    Si quelqu'un pouvait m'aider, se serait très sympa ;-)
    Merci d'avance.
    Nathalie

  • #70

    Isabelle (lundi, 29 avril 2013 15:39)

    Bonjour Nathalie ! C'est normal que vous ne puissiez pas changer le texte : les textes sont faits en images. ll faut donc que j'aie fait l'image pour que vous puissiez l'intégrer ;) Je m'en occupe dans l'après-midi et je le mettrai en ligne dans le tutoriel dans la foulée avec le code qui va bien :)
    A bientôt !
    Isa

  • #71

    Nathalie Démaret-Portelli (lundi, 29 avril 2013 21:12)

    Merci Isa, je voulais faire ça toute seule dans mon coin sans vous ennuyez. Je pensais qu'il suffisait juste de changer les textes et donc d'en créer (à ma guise ;-) Donc effectivement du coup, je comprends mieux. Merci pour votre aide.
    A bientôt.
    Nath

  • #72

    OVA Saint Lo (lundi, 06 mai 2013 15:36)

    Merci pour le bouton "Rechercher"

  • #73

    Nizu Gost (jeudi, 09 mai 2013 21:37)

    Bonsoir, Isa Je suis fan des vos astuces, j'en suis vraiment reconnaissant, et je suis entrain de les appliquer depuis tout à l'heure.. mais j'ai constaté une petite problématique, chaque fois que je rajoute un nouveau script au Head de mon site, je découvre que l'application précédente que j'ai installé a disparue ! par exp j'ai ajouté au début le pied de page, et puis j'ai ajouté ce bouton de contact alors ça a fonctionné mais le pied de page a disparue ! :( comment remédier à ça svp? merci bie, :)

  • #74

    Nathalie Démaret-Portelli (mardi, 14 mai 2013 10:29)

    Bonjour Isa,
    Merci pour votre bouton Newsletter. Je l'ai intégré dans mon site mais voila que je n'arrive pas à espacer les 2 boutons. Pourtant j'ai suivi les indications le 1er est bien à 200 et le 2ème je suis allée jusqu'à 480 mais rien à faire, il empiète toujours sur le 1er. Petite info, j'ai créée 2 Widgets à 2 endroits différents, j'espère que c'est bien ce qu'il fallait faire.
    Merci pour votre aide.
    A bientôt.
    Nath

  • #75

    Isabelle (mardi, 14 mai 2013 14:55)

    Bonjour Nathalie !
    Pas de souci pour insérer les Widgets à eux endroits. Le problème est que vous n'avez pas utilisé de code correct pour insérer votre 2e bouton, donc il se superpose au 1er. Vous l'avez mis dans une <div id="feedback"> alors qu'il faudrait l'insérer une <div id="feedbackbis"> par exemple, en tout cas dans une autre DIV. Et là il se décalera vraiment (voir la fin de mon tuto pour les codes).
    Bon courage !
    Isa

  • #76

    Nathalie Démaret-Portelli (mardi, 14 mai 2013 16:21)

    Merci Isa,
    Je n'avais effectivement pas compris qu'il fallait modifier "feedkack en feedbackbis dans le widget. Je pensais que c'était uniquement dans le Head.
    A bientôt.
    Nath

  • #77

    evabambou (samedi, 25 mai 2013 00:32)

    Bonsoir,
    Un grand merci pour ces conseils si utiles et pratiques qui nous aident à améliorer le design de nos sites et nous conduisent à nous former à l'HTML. On bataille, et ça fonctionne au bout du compte. Enfin, la plupart du temps. Grâce à vous, on trouve sur ces pages de jolies astuces.

  • #78

    Richoult (mardi, 28 mai 2013 12:31)

    Que faire pour que le bouton reste en haut, ne suit pas le déplacement du cadre ?

  • #79

    EDP (samedi, 22 juin 2013 09:14)

    Merci pour tous ces conseils

  • #80

    leboutdeselle (jeudi, 04 juillet 2013 15:53)

    Bonjour, Isabelle..
    J'ai un souci avec le bouton flottant "me joindre". :/ J'ai suivi les indications pas à pas, mais... lorsque je tente de le tester (en cliquant dessus) (que je sois connectée ou pas), j'ai ce message : "La page n'a pas été trouvée.
    La page souhaitée n'existe malheureusement pas (ou plus), ou une faute de frappe empêche la page de s'ouvrir.Retour à la page d'accueil".
    Où est-ce que ça peut bien coincer ?... Merci de votre aide, et bonne journée !
    Lily

  • #81

    Isabelle (jeudi, 04 juillet 2013 17:19)

    @Richoult : oui, c'est possible d'utiliser une position "absolute", de façon à ne pas fixer le bouton, mais pour cela il faut être en design personnalisé de manière à insérer le code dans le conteneur le plus large. Je vais voir s'il y a un autre moyen, mais mes tests avaient été peu concluants quand j'avais pondu le tuto, donc...

    @leboutdeselle : vous devez créer une page "contact" dans votre menu de navigation. Comme la page n'a pas été créée, c'est normal que le lien pointe sur du vide. Vous pouvez créer une page intitulée autrement, mais dans ce cas, modifiez le code comme indiqué dans le tutoriel (lien et texte).

  • #82

    leboutdeselle (vendredi, 05 juillet 2013 00:17)

    Merci beaucoup ! Ça marche très bien désormais. ;)
    (et comme dans le menu de navigation, on peu masquer la page, le bouton "Me Joindre" est le seul à ouvrir le formulaire de contact) (Classe !).
    Merci encore.

  • #83

    aloeverasante (mercredi, 17 juillet 2013 13:38)

    Bonjour
    cela fais 2 fois en 6 mois que j'ai un bug sur le bouton "contactez moi" il se met a l'horizontal, je ne sais pas pourquoi....

    je vais le réinstaller! j'espère que cela va aller ;)

    belle journée a tutti

  • #84

    actionsucces (jeudi, 18 juillet 2013 21:21)

    Bonjour

    étonnamment j'ai un de mes deux boutons de contact et blog qui a changé de position depuis ce matin, je ne sais pourquoi?
    Je vais chercher

  • #85

    Adrien Bouteloup (jeudi, 18 juillet 2013 23:44)

    Bonjour
    Super tuto qui m'a permis de placer un bouton flottant "contactez-moi" sur la gauche de mon site, mais ... depuis 3-4 jours, sans avoir fait de modifs il n'apparaît plus même si le lien marche toujours. Je pense que l'image hébergé sur imageshack a dû être supprimé ou modifié.
    Pouvez-vous me renseigner ? et d'avance merci pour vos tutos qui sont très intéressant pour un novice en code comme moi.
    Adrien

  • #86

    Isabelle (vendredi, 19 juillet 2013 13:53)

    @actionsuccess, @adrien, @aloeverasante : je viens de vérifier les boutons sur chacun de vos sites et je ne vois aucun souci. Ils sont en place et fonctionnels. Ce qi peut s'être passé ces derniers jours, c'est qu'il y a eu beauuuuucoup de maintenance sur Jimdo (j'en sais quelque chose, je travaille sur un template et cela a cafouillé plus d'une fois depuis une semaine !). En effet, le code des sites Jimdo est passé en HTML5 (cf. la dernière news publiée sur Jimdo.fr). Cela a pu posé des soucis sur les éléments "Widgets/HTML" déjà existants et peut expliquer les récents "cahots". Par ailleurs, les images utilisées sont hébergées sur Imageshack ou Archive-host, donc si l'un de ces serveurs a un coup de mou, cela peut arriver que l'image "merdouille" un peu... J'en suis désolée ;(

  • #87

    adrien (vendredi, 19 juillet 2013 23:12)

    en effet, c'est revenu !
    bonne continuation et merci encore pour votre contribution à la communauté !

  • #88

    Dorothée (mardi, 01 octobre 2013 16:01)

    Bonjour Isabelle et Bravo!! J'aurais voulu créer moi même mes icones... Crois tu que c'est possible? Quelles sont les spécifications des visuels? Merci! Dorothée.

  • #89

    Isabelle (vendredi, 04 octobre 2013 21:28)

    @Dorothée : bien sûr, tu peux créer toi-même les images. Aucune spécification particulière à suivre, mais il faudra peut-être adapter la CSS ensuite (margin, padding et emplacement).
    Bon courage !

  • #90

    Isabelle (vendredi, 04 octobre 2013 21:44)

    @Dorothée : je vois sur ton site que tu y es arrivée depuis ;) J'aime beaucoup le concept de Happybulle !!!

  • #91

    dofuswizy (vendredi, 08 novembre 2013 13:28)

    Merci

  • #92

    wicatomy (vendredi, 15 novembre 2013 22:02)

    Bonjour tu pourrai me faire un bouton "Mon compte" et "Créer son compte".
    Pourrai tu faire un tuto pour montrer comment on change le texte.
    Merci.

  • #93

    nourisport (mercredi, 20 novembre 2013 18:50)

    Bonjour et merci pour ce tuto très utile. j'aimerai savoir si tu peux me faire un bouton avec l'intitulé "Devis" ce serait vraiment sympa trés sympa
    merci beaucoup

  • #94

    efa29 (lundi, 16 décembre 2013 21:54)

    Bonjour Isabelle, J'ai créé un bouton "Nous contacter" (top, super contente, merci !!). Puis, j'ai voulu ajouter un 2ème bouton "Accueil". Ca fonctionne, mais les 2 boutons n'ont pas la même largeur. S'agit-il d'un problème de code ou d'image ?? Merci ! Katell

  • #95

    Isabelle (lundi, 20 janvier 2014 14:48)

    @efa29 : c'est un problème de padding à régler. Utilisez ce code pour le bouton "Accueil" :

    #feedbackbis a {
    display: block;
    position: fixed;
    top: 300px;
    left: 0px;
    background: #6A94E3;
    padding: 7px 8px; /* J'ai modifié le padding pour qu'il soit plus épais */
    border: 1px solid #61B3DE;
    border-left-color: #6A94E3;
    border-top-color: #6A94E3;
    }

  • #96

    Cécile Chalon-Chevrault (vendredi, 24 janvier 2014 21:46)

    Merci pour ce tuto, j'y suis arrivée.

  • #97

    efa29 (jeudi, 13 février 2014 09:55)

    Merci beaucoup, c'est nickel ! Katell

  • #98

    riendutout102 (jeudi, 13 février 2014 11:41)

    Bonjour,
    Je suis étudiante et on nous fait tester jimdo. Je dois insérer un bouton "Réservez" donc j'ai essayez grâce à vos tutos mais j'ai fait n'importe quoi ! Maintenant j'ai deux boutons l'un sur l'autre ! Pouvez -vous me dire comment les supprimer ? et comment insérer un bouton "Réservez" ?
    Je vous remercie par avance !

  • #99

    Isabelle (jeudi, 13 février 2014 17:35)

    @riendutout102 : pour effacer les codes, passez en mode sans échec (voir ce tutoriel : http://realia.jimdo.com/2013/07/05/utiliser-le-mode-sans-%C3%A9chec-de-jimdo/) Malheureusement, le bouton "Réservez" n'existe pas encore, mais c'est une bonne idée que j'ajoute à la liste des todos pour plus tard ;)
    Bon courage dans vos études !

  • #100

    riendutout102 (vendredi, 14 février 2014 09:10)

    Merci Isabelle ! C'est bon j'ai réussi à les supprimer ouf ^^ D'accord je vais suivre vos tutos alors ! bonne journée !

Ruban