Installer un "stickyfooter"

6 mars 2013 : ajout dans la CSS pour que le stickyfooter flotte au-dessus de la page.

30 août 2012 : ajout dans la CSS du "stickyfooter" du code qui dessine son ombre. 

Kézako, un "stickyfooter" ?... C'est un pied de page qui reste collé au bas de la fenêtre, quelle que soit votre position sur la page ; le pied de page se superpose au contenu. Ainsi, les visiteurs ont toujours à portée de souris les fonctions du pied de page de Jimdo, à savoir : les mentions légales, la charte de confidentialité, la version imprimable de la page, le plan du site et, éventuellement, le lien de recommandation (si vous avez activé l'option en admin).

Aperçu et démonstration du résultat

Voici d'abord, en images, à quoi peut ressembler un "stickyfooter" :

Le stickyfooter est toujours à portée de clic...
Le stickyfooter est toujours à portée de clic...
... car il suit le défilement de la page...
... car il suit le défilement de la page...
... en toutes circonstances !
... en toutes circonstances !

Vous pouvez d'ailleurs tester en live le rendu et le fonctionnement du "stickyfooter" sur ce site d'essai.

Manipulation préliminaire

Cette manipulation est à faire avant toute chose. Elle va vous permettre de repérer l'identifiant unique associé à votre site pour le lien "Recommander cette page". Commencez par activer le lien de recommandation en admin, si ce n'est pas déjà fait :

En mode admin : on clique sur Paramètres > Recommandation de votre site
En mode admin : on clique sur Paramètres > Recommandation de votre site
On active la recommandation.
On active la recommandation.

Après avoir validé, passez en mode Aperçu et passez le pointeur de votre souris sur le lien "Recommander cette page" qui est apparu dans le pied de page. Ne cliquez pas sur le lien. Regardez dans la barre inférieure de votre navigateur le lien qui s'affiche. Repérez le numéro qui lui est associé et notez-le sur un papier :

On repère le n° unique associé à la fonction de recommandation.
On repère le n° unique associé à la fonction de recommandation.

Vous pouvez maintenant passer à l'insertion de la feuille de style de votre "stickyfooter".

Flèche vers le haut

Etape 1 - Insertion de la feuille de style

Commençons par insérer la feuille de style qui va styler notre "stickyfooter".

Où insérer le code ?

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 à copier-coller

Voilà le code qui style le "stickyfooter" :

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

/* stickyfooter */

#stickyfooter {
display: scroll; 
z-index: 2000;
position: fixed;
bottom: 0px;
left: 0px;
padding: 5px;
width: 100%;
text-align: center;
height: 20px; /* On fixe ici la hauteur du stickyfooter en pixels */
border-top: 2px solid #B4441D; /* Couleur de la bordure supérieure : pour changer, remplacer le code hexadécimal #B4441D par un autre */
background-color: #262626; /* Couleur de fond du stickyfooter ; pour changer, remplacer le code hexadécimal par un autre */ 
font-size: 12px; /* Taille de la police utilisée : vous pouvez en choisir une plus grande (13px) ou plus petite (10px) */
color: #B4441D; /* Couleur des barres de séparation et du texte entré dans le stickyfooter */
/* Les 4 lignes qui suivent forment l'ombre : effacez-les si vous ne voulez pas d'ombre */
-moz-box-shadow: 0px -1px 3px 0px #555;
-webkit-box-shadow: 0px -1px 3px 0px #555;
-o-box-shadow: 0px -1px 3px 0px #555;
box-shadow: 0px -1px 3px 0px #555;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#555, Direction=90, Strength=3);
}

#stickyfooter a {
text-decoration: none !important; /* Ceci enlève le soulignement des liens */
color: #efefef !important; /* Couleur des liens du stickyfooter */
}

/* Avec ce code, on cache la partie gauche du pied de page traditionnel des templates de Jimdo */

div#contentfooter div.leftrow {
display: none; 
}

/*]]>*/
</style>

Notez qu'avec ce code la partie gauche du pied de page de votre site sera cachée afin d'éviter que votre "stickyfooter" ne soit redondant avec votre pied de page traditionnel. Vous pouvez aussi cacher la partie droite du pied de page (Connexion), avec cette astuce.

Comment personnaliser ce code ?

J'ai commenté le code pour vous aider à l'adapter à votre design :

  • Ne touchez pas aux premières lignes (elles ne sont pas commentées volontairement)
  • Attaquez-vous seulement aux lignes commentées (entre /* et */).
  • Effacez les 4 lignes de code indiquées pour éliminer l'ombre.

A vrai dire, l'essentiel de votre personnalisation consistera à adapter les couleurs de fond, du texte et des liens. Utilisez le colorpicker pour ce faire.

Le colorpicker

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 passez à l'insertion du code.

Flèche vers le haut

Etape 2 - Insertion du code HTML

Il nous faut désormais nous occuper de faire apparaître le "stickyfooter" et décider de son contenu.

Où insérer le code ?

Ajoutez dans la barre latérale de votre site, à partir de n'importe quelle page, un Widget/HTML :

Le module Widget/HTML
Le module Widget/HTML

Le code HTML

Dans le cadre de saisie qui apparaît, copiez-collez ce code en le modifiant comme indiqué ci-dessous :

<div id="stickyfooter">

<!-- Code du lien "mentions légales" -->
<a rel="nofollow" href="/about/" title="Lire les mentions légales">Mentions légales</a>
&nbsp;|&nbsp;

<!-- Code du lien "charte de confidentialité" -->
<a rel="nofollow" href="/j/privacy/" title="Lire la charte de confidentialité">Charte de confidentialité</a>
&nbsp;|&nbsp;

<!-- Code du lien "Imprimer la page" -->
<a rel="nofollow" href="javascript:window.print();" title="Version imprimable de la page">Imprimer la page</a>
&nbsp;|&nbsp;

<!-- Code du lien "Plan du site" -->
<a href="/sitemap/" title="Voir le plan du site">Plan du site</a>
&nbsp;|&nbsp;

<!-- Code du lien "Recommander cette page" -->
<a rel="nofollow" href="javascript:tellafriend(VOTRE_NUMERO_ICI);" title="Recommander à un ami">Recommander cette page</a>

</div>

Personnaliser le code

Recommander cette page

Avant toute chose, pensez à insérer (à l'endroit indiqué dans le code du lien "Recommander cette page") le numéro propre à votre site - rappelez-vous, vous l'avez récupéré dans la manipulation préliminaire faite précédemment. Vous obtenez un code de ce type :

<!-- Code du lien "Recommander cette page" -->
<a rel="nofollow" href="javascript:tellafriend(546585994);" title="Recommander à un ami">Recommander cette page</a>

Eliminer des codes

Avec le code que je vous indique, vous aurez 5 liens dans votre "stickyfooter" :

  1. Mentions légales
  2. Charte de confidentialité
  3. Imprimer la page
  4. Plan du site
  5. Recommander cette page

Si vous voulez éliminer l'un des liens, effacez dans le code le bloc qui lui correspond.

Ajouter des liens et du texte

Vous pouvez enlever des liens, en ajouter d'autres de votre crû ou insérer du texte. Voici un exemple :

<div id="stickyfooter">

<!-- J'ajoute ici un lien vers l'accueil -->
<a href="http://votre-site.jimdo.com" title="Retour à l'accueil">Accueil</a>
&nbsp;|&nbsp;

<!-- Code du lien "mentions légales" -->
<a rel="nofollow" href="/about/" title="Lire les mentions légales">Mentions légales</a>
&nbsp;|&nbsp;

<!-- Code du lien "Plan du site" -->
<a href="/sitemap/" title="Voir le plan du site">Plan du site</a>
&nbsp;|&nbsp;

<!-- Code du lien "Recommander cette page" -->
<a rel="nofollow" href="javascript:tellafriend(974351812);" title="Recommander à un ami">Recommander cette page</a>
&nbsp;|&nbsp;

<!-- J'ajoute ici un texte supplémentaire -->
<p>Blablablabla</p>

</div>

Maintenant, amusez-vous bien !

Vous utilisez le "stickyfooter" ?

Écrire commentaire

Commentaires : 22
  • #1

    designanddeco (jeudi, 01 novembre 2012 11:01)

    je m'amuse bien !...
    ce tutoriel est génial et je suis ravie de l'avoir découvert. Merci beaucoup pour cela. toute la communauté Jimdo est décidément très agréablement dynamique !
    Je suis donc en train de tester ce stickyfooter sur mon propre site.
    J'aimerais cependant avoir une précision : est-il-possible de faire dans ce footer des liens externes ? (et comment le préciser)
    en espérant votre réponse,
    cordialement,
    Plume

  • #2

    Alain Pons Photographe (mercredi, 26 décembre 2012 17:30)

    Oui bravo et grand merci, sauf qu'il faut ajouter le code html en bas de chaque rubrique et sous rubrique, tout comme le bouton contact, si on veut que ces "additifs" Contact et Stickyfooter apparaissent en continuité sur toute la lecture d'un site !?
    Alain

  • #3

    Isabelle (jeudi, 27 décembre 2012 12:58)

    Bonjour Alain !
    Le secret, c'est d'insérer les codes fournis (que ce soit pour le bouton de contact ou le "pied de page collant") dans une colonne latérale de votre site. En effet, tous les éléments insérés dans la colonne latérale sont automatiquement dupliqués de page en page. Donc nul besoin de multiplier les codes, une unique insertion suffit ;)
    Bonne installation donc !
    A bientôt !
    Isa

  • #4

    Isabelle (jeudi, 27 décembre 2012 13:04)

    Bonjour Plume !
    Oui, vous pouvez insérer dans le pied de page des liens externes : les pages s'ouvriront dans un nouvel onglet (ou fenêtre). Voici le morceau de code correspondant à un lien externe à glisser dans le code que j'ai fourni plus haut :

    <!-- J'ajoute ici un lien externe qui s'ouvre dans un nouvel onglet -->
    <a href="http://www.votre-lien.com" title="Blablabla" target="_blank">Nom du lien</a>&nbsp;|&nbsp;

    Bon courage !
    Isa

  • #5

    renov-atout (samedi, 19 janvier 2013 21:37)

    bonjour,
    merci pour toutes ces astuces qui font le bonheur des Jimdonautes !
    pour ma part, petit soucis, je ne trouve pas la barre d'"outils" et par conséquent, je ne trouve pas non plus le "recommandation de votre site"... par contre, je peux recommander le site de jimdo ! ;-)
    je suis pourtant en version Pro.

  • #6

    zattara1 (dimanche, 24 février 2013 09:23)

    Bonjour,

    Avant tout et comme a chaque fois merci car c'est un réel plaisir que de lire ces tutos! je souhaiterai savoir comment faire comme sur le site d'essai http://favoris.jimdo.com/ pour obtenir un "bas de page" comme le votre (en gris sur le site) merci beaucoup

  • #7

    favoris (dimanche, 24 février 2013 12:52)

    @renov-atout : la barre d'outils est la barre qui apparaît à droite de l'écran quand vous êtes connecté en tant qu'administrateur de votre site. Elle contient les icônes d'administration du site.

    @zattara1 : ce tutoriel est à venir, je suis en train de faire les tests pour voir comment le mettre en place le plus simplement possible (pour plus d'infos, voir cette news : http://realia.jimdo.com/2013/01/22/nouveaux-tutos-en-finition/)

  • #8

    vero (mercredi, 13 mars 2013 13:32)

    Bonjour,
    pourriez vous s'il vous plait me dire comment relier un menu roulant avec mon panier
    merci

  • #9

    Jean Claude (jeudi, 14 mars 2013 18:10)

    Bonjour Isa,

    Juste une petite observation, dans le cadre de la version mobile proposée par Jimdo avec lecture de la page avec un smartphone, dans ce cas le stichyfooter ne se trouve pas en bas de page, mais vers la partie supérieure , ce qui gène à la lecture de la page.

  • #10

    favoris (jeudi, 14 mars 2013 18:28)

    Bonjour Jean-Claude ! Je viens de tester le site sur lequel j'ai installé ce stickyfooter (http://favoris.jimdo.com) sur l'Iphone. En version mobile, le stickfooter disparaît. En version normale, le stickyfooter reste bien à sa place. Quel est votre mobile ?

  • #11

    Isabelle (jeudi, 14 mars 2013 18:34)

    J'ai trouvé une parade mais mon site est cassé depuis ce midi et je ne peux plus faire de mise à jour... ;( Dommage, il n'y a que pendant les vacances que je peux travailler dessus et Jimdo est en panne ;(

  • #12

    Jean Claude (jeudi, 14 mars 2013 18:43)

    Mon mobile : Samsung Galaxy SII

  • #13

    Jean Claude (jeudi, 14 mars 2013 18:52)

    Oui, Isa c'est bien en mode standard que le problème se pose. Je me suis " planté " dans mon explication .

  • #14

    Parendel (mercredi, 20 mars 2013)

    Bonjour Isabelle et merci,
    ça a marché super, j'ai juste un petit problème esthétique, comment fait on pour voir des barres de séparation dans une couleur et des textes dans une autre ?

  • #15

    Parendel (mercredi, 20 mars 2013 11:31)

    Bouhhh, j'ai crié victoire avant d'avoir tué l'Ours, mon stickyfooter apparait bien en mode administrateur mais disparait quand je passe en afficher.

    Auriez vous la solution a mon problème ?

    Merci d'avance

  • #16

    Isa (admin) (vendredi, 22 mars 2013 18:45)

    @Parendel :
    1) Il faut laisser le code en place pour pouvoir le débugger même (et surtout) quand ça ne marche pas.
    2) Essayez avec ce code :

    <div id="stickyfooter">

    <!-- Code du lien "mentions légales" -->
    <a rel="nofollow" href="/about/" title="Lire les mentions légales">Mentions légales</a>
    <font style="color: red;">&nbsp;|&nbsp;</font>

    <!-- Code du lien "charte de confidentialité" -->
    <a rel="nofollow" href="/j/privacy/" title="Lire la charte de confidentialité">Charte de confidentialité</a>
    &nbsp;|&nbsp;

    <!-- Code du lien "Imprimer la page" -->
    <a rel="nofollow" href="javascript:window.print();" title="Version imprimable de la page">Imprimer la page</a>
    <font style="color: red;">&nbsp;|&nbsp;</font>

    <!-- Code du lien "Plan du site" -->
    <a href="/sitemap/" title="Voir le plan du site">Plan du site</a>
    <font style="color: red;">&nbsp;|&nbsp;</font>

    <!-- Code du lien "Recommander cette page" -->
    <a rel="nofollow" href="javascript:tellafriend(VOTRE_NUMERO_ICI);" title="Recommander à un ami">Recommander cette page</a>

    </div>

    La barre devrait s'afficher tout le temps et les barres de séparation seront rouges. A vous de modifier le code pour avoir la bonne couleur.

  • #17

    Mme Philippe (mercredi, 16 octobre 2013 12:28)

    Bonjour super tout fonctionne seulement il y a quand même un léger problème en effet lorsque j'utilise l’ascenseur de n'importe quel page du menu les images passe sur le stickyfooter je suis donc obligé dupliquer le code sur chaque page

  • #18

    Isabelle (mercredi, 16 octobre 2013 13:07)

    Bonjour,
    Je ne comprends pas bien le problème qui se pose. Quel code dupliquez-vous ? De quelles images s'agit-il ? De quel ascenseur parlez-vous (le natif de Jimdo ou un autre ?) Sur votre site, tout me semble fonctionner.
    Merci de vos éclaircissements !

  • #19

    Mme Philippe (mercredi, 16 octobre 2013 14:41)

    Merci de votre réponse mon code se trouve dans un Widget/HTML dans la colonne verticale lorsque je fais défiler ma page accueil par exemple mes images passe sur le stickyfooter alors que les textes se trouve dessous vous pouvez voir sur le site en page d’accueil le rendu
    Pour les pages suivantes si tous se passe bien c’est parce que je suis obliger de dupliquer le code sur chacune d’entre elle

  • #20

    Isabelle (lundi, 20 janvier 2014 14:12)

    Bonjour !
    Je n'arrive pas à dupliquer votre problème. Je peux vous suggérer d'augmenter le z-index dans le code en le passant à 4000 par exemple. Ainsi, le stickyfooter aura le dessus sur le reste du contenu.
    En espérant que cela règle le problème.

  • #21

    oxygene-international (vendredi, 14 mars 2014 09:26)

    Bonjour Isabelle,

    Merci pour ce tuto, qui a marché dés le début!
    Le seul problème est (après avoir augmenté l'épaisseur) que je ne peux plus me mettre en admin vu que ces fonctions ce trouve derrière le "stickyfooter" :s

  • #22

    Isabelle (vendredi, 14 mars 2014 14:02)

    @oxygene-international : j'ai peut-être une parade. Dans Paramètres > Modifier le head, insérez ce code :

    <style>
    #page-bottom {
    background-color: #fff !important;
    height: 25px !important;
    }
    </style>

    Validez et dites-moi si cela résout le problème.

Ruban