Ajouter un bouton Bas de page à votre blog Blogger-Blogspot


Voici une petite astuce pour ajouter un bouton "Bas de Page" à votre blog Blogger.
(Pour ajouter un bouton Haut de page c'est ici)
Installation :
Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant: (c’est l’avant dernière ligne de votre code HTML)
</body>
Et juste avant collez cette ligne :
<a name='Bas2page-LeBlogger.com'/>
Maintenant pour afficher le bouton bas de page en bas à droite de votre blog, Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier/coller le code suivant :
<a style="display:scroll;
position:fixed;
bottom:5px;
right:1px;" href="#Bas2page-LeBlogger.com"
alt="Bas de Page"
title="Bas de Page"><img src="http://blogspot.leblogger.com/divers/bas.gif"/></a>
Pour afficher les deux boutons Haut et Bas de page (comme dans ce blog) utilisez ce code :
<a style="display:scroll;
position:fixed;
 bottom:22px;
right:1px;" href="#"
alt="Haut de Page"
title="Haut de Page"><img src="http://blogspot.leblogger.com/divers/haut.gif"/></a>

<a style="display:scroll;
position:fixed;
 bottom:5px;
right:1px;" href="#Bas2page-LeBlogger.com"
alt="Bas de Page"
title="Bas de Page"><img src="http://blogspot.leblogger.com/divers/bas.gif"/></a>
Personnalisation :
  • Changez les paramètres en rouge pour modifier la position des boutons.
  • Vous pouvez utilisez l’icône « bas de page » de votre choix en remplaçant l’adresse en bleu: http://blogspot.leblogger.com/divers/bas.gif avec l’url de votre image.

58 Commentaires
  1. Merci Sofiane tes gadgets sont toujours aussi intéressants et tes explications très claires.

    RépondreSupprimer
  2. En tout cas ça fonctionne à merveille Soufiane, Dieu te bénisse, tu es réellement doué et comme on dit chez moi: tu touches ta bille (bref tu es un expert) je n'ai pas assez de mots pour te remercier, je continue mon exploration, tiens j'ai essayé l'install de zinmag tribune mais il bugue, enfin moi ça buguait. Bonne soirée

    RépondreSupprimer
  3. bon bin moi je comprends pas, je crois avoir tout bien comme t'as dit, et j'ai pas la flèche de bas de page ???

    RépondreSupprimer
  4. @ Alexandrah
    tu as tout bien fait et le bouton bas de page est bien présent, c'est juste qu'il est caché par le bouton haut de page.

    Donc si tu veux garder les deux tu supprimes l'ancien bouton haut de page, et tu utilises le deuxième code de ce tutoriel.

    Dit moi si tu t'en sorts.

    RépondreSupprimer
  5. Yes ca marche ! merci pour tes supers explications!

    RépondreSupprimer
  6. Re Soufiane,

    J'ai pris ton code, mais j'ai mis à la place un gif et ce la fonctionne super bien regarde ici

    http://gratuitiel.blogspot.com/

    RépondreSupprimer
  7. @ Tortank
    C'est cool,
    Mais l'image n'a rien à voir avec le "bas de page" ....

    RépondreSupprimer
  8. Salut Soufiane!
    pour commencer merci de partager ton savoir avec nous autres, c'est vraiment cool!
    Et ensuite, j'ai installé le widget haut/bas, mais le bas ne fonctionne pas... aurais-tu une idée? merci d'avance

    RépondreSupprimer
  9. @ Mlle d'enfer,
    Pour le bouton bas de page il faut ajouter un petit code dans ton HTML pour que ça fonctionne, regard le début de l'article, je crois que tu as zappé cette partie, et dit moi si c'est bien ça .....

    RépondreSupprimer
  10. (c'était bien ça... comme quoi lire en diagonale, eh ben, ça marche pas vraiment :) )

    RépondreSupprimer
  11. merci pour l'astuce ça marche super bien ! en plus sur les blogs c'est très utile car on est obligé de pas mal scroller.

    bonne journée

    RépondreSupprimer
  12. Bonjour,
    Décidément je suis accro à ton blog ;) ça fontionne parfaitement pour le haut de page, mais pas pour le bas. J'ai remplacé #Bas2page-LeBlogger.com par #monnomdeblog.com mais elle ne "bouge pas". Ce qui est curieux puisque le symbole# indique une direction inconnue non ?
    je vais réessayer...
    à bientôt, Klo

    RépondreSupprimer
  13. @ KLO
    Faut rien remplacer, juste copier-coller.......
    Fastoche non !!!!!!

    RépondreSupprimer
  14. @ gourmandeetcitadine
    Merci, il y aussi le "haut de page", très utile quand plus de 100 commentaires.....

    RépondreSupprimer
  15. Salut,

    Si je ne veux pas installer de bouton "Bas de page" mais seulement écrire "Bas de page" ou autre terme pour que l'usager descende au bas de ma page, quelle serait le code S.T.P. ? Merci !

    Jean-François

    RépondreSupprimer
  16. @Jean-François
    suffit de remplacer le code de l'image par ton texte :

    <img src="http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/arrow-up.gif"/>

    Par : Top ou Haut de page ...

    RépondreSupprimer
  17. Merci pour ses astuces Soufiane !

    AM

    RépondreSupprimer
  18. so nice think friend
    http://ochek-allayl.blogspot.com

    RépondreSupprimer
  19. Je viens de tester ça fonctionne pile poil :) C'est exactement ce qui manquait à mon blog étant donné que depuis une semaine il est le double de longueur par rapport à avant. Bien pratique, je suis trop heureux d'avoir découvert ce blog ce matin, car grâce à votre superbe travail le mien à pris forme. MERCI! :D

    RépondreSupprimer
  20. @Ken Hart
    Merci c'est sympa :) et Happy Blogging sur Blogger :a

    RépondreSupprimer
  21. bravo soufiane tu es the best
    j'ai une demande si vous voulez:comment ajouter les boutons de suivant & precedent o blogger merci
    si tu peux mele dire sur mon email: votre_espoir@hotmail.fr

    RépondreSupprimer
  22. Sur le bouton haut de page du blog s'est greffée une image bwe-1.gif provenant de photobucket. Je ne retrouve pas le code HTML dans "développer les gadgets" et je n'arrive pas à supprimer cette image.
    Y aurait-il une solution ?`
    d'avance mille x merci

    RépondreSupprimer
  23. Tu utilises des anciennes images hébergées sur Photobucket....

    il faut remplacer ton code par celui présent dans l'article actuellement où les images sont hébergées dans LeBlogger.com : http://blogspot.leblogger.com/divers/haut.gif

    RépondreSupprimer
  24. Je pige que dalle ; mais enfin je vais essayer de trouver ; en plus Photobucket m'envoie des courriers en réponse à mes inquiétudes en me proposant de passer "pro" ....
    ;;)

    RépondreSupprimer
  25. Faut remplacer le code du widget que tu as ajouté par celui présent actuellement dans l'article en haut :))

    RépondreSupprimer
  26. Recoucou pour le même problème
    Je suis allée dans le code source - recherches, et j'ai retrouvé le widget "haut de page" surchargé par l'image photobucket ; mais le problème est que je ne retrouve absolument plus ce widget dans le code HTML du blog. Il s'est totalement volatilisé. Y aurait-il dans le langage HTML un autre indice que "haut de page" ou "LeBlogger"? pour pouvoir le supprimer ou le remplacer par http://blogspot.leblogger.com/divers/haut.gif ??
    d'avance 10 mille x merci
    :-*

    RépondreSupprimer
  27. C'est un widget donc c'est normal qu'il ne se trouve pas dans le code HTML, il faut chercher le widget dans "Mise en page", "Élément de la page"....

    RépondreSupprimer
  28. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  29. J'ai réglé le problème ; merci encore pour ta gentillesse et ta patience ;
    :)

    RépondreSupprimer
  30. Bonjour tout le monde!

    Tout d'abord, un grand merci pour les astuces qui sont géniales! J'ai tout mis en route grâce aux explications très claires, merci!

    Question:

    Comment je peux installer les boutons haut et bas de page à côté de chaque article publié (ou au moins à mi- chemin de la page)

    Merci beaucoup!

    RépondreSupprimer
  31. Bonsoir, juste un petit message parce que je trouve cet astuce très intéressante.

    Merci !

    RépondreSupprimer
  32. Le Bouton Haut de page fonctionne mais pas le bas! que faire? merci!

    RépondreSupprimer
  33. Même question que Ibrahim. J'ai utilisé le code pour insérer les deux boutons, le haut fonctionne, mais pas le bas. Voir ici > http://lutin-irishpub.blogspot.com/ Merci d'avance pour ta réponse !

    RépondreSupprimer
  34. Merci pour tout tes tutoriel qui sont bien utile. J'ai mis quelques liens vers certain que j'ai utilisé sur cette page. http://nowhere-else--but-england.blogspot.com/p/astuce_2602.html

    @Lutin et Ibrahim: Cette question à déjà été posé une fois plus haut et par conséquent la réponse y est déjà. Il faut bien lire ce qu'il y a marqué au début du message.

    Bonne chance!

    RépondreSupprimer
  35. Ah ouais, j'suis allée trop vite (trop contente d'apporter des modifs à mon blog^^). Le code a été ajouté et ça marche ! Merci Soufiane, merci Ivy ;)

    RépondreSupprimer
  36. Salut très bon code que j'avais installer, mais le problème est que sa renomme les adresses pour: www.exemple.com/
    sa donne www.exemple.com/Bas2page-LeBlogger.com (Pour le bas de page)

    Et pour le haut de page: www.exemple.com/#

    Y a t'il une solution pour renommé les appels de code par un code invisible dans l'adresse?

    Je rajoute que sa change aussi l'image de l'url pour le bas et haut de page. Merci pour ton blog en général t'assure grave.

    RépondreSupprimer
  37. C'est normal, ça fonctionne comme ça

    RépondreSupprimer
  38. Oui je me douter bien, c'est normal. Merci quand même :)

    RépondreSupprimer
  39. Comment se fait-il que je n'arrive pas à voir ces fameux boutons haut et bas de page?
    Que j'ouvre leblogger.com par internet explorer ou firefox, je ne les vois pas!
    Mon PC est pourtant à jour, je ne suis pas novice en la matière et j'aimerais avoir un aperçu de ce que cela donne avant de me lancer dans cet astuce pour mon site http://images-apocalyptiques.blogspot.com

    RépondreSupprimer
  40. Bon ok, j'ai "vu" en cliquant sur les profils des personnes intervenantes ici. Il n'empêche que je ne vois toujours pas les boutons de ce blog!

    RépondreSupprimer
  41. bonjour !
    j'ai une petite question ...
    j'ai mis un bouton "haut de page" sur mon blog ,mais quand je veux mettre le "bas de page" ils se superposent .
    donc j'ai choisi de mettre un texte ,sauf que je ne trouve pas que remplacer dans le code pour qu'il n'y ai pas d'image mais un texte ...
    j'espère avoir été claire ...
    si vous pouviez m'aider ce serais très gentil ,merci ! :)

    p.s : ce blog est très bien !!
    Noùn

    RépondreSupprimer
  42. salut Soufiane sil te plait je veux écrire mon copyright en bas de mon blog par exemple : Copyright 2010 LeBlogger.com !!
    je sait pas comment le faire ?

    RépondreSupprimer
  43. merci encore une fois pour ce et ces supers tuto
    claude
    http://massonclaude.blogspot.com/

    RépondreSupprimer
  44. Merci bien !!! j'ai trouvé une autre astuce avec jquery vous pouvez visiter mon blog pour le voir http://blog-conseils.blogspot.com/

    RépondreSupprimer
  45. bonjour Soufiane,
    Tu as l'air de tout savoir et moi je viens de créer mon blog la semaine passée.
    Bon je suis un peu nul, mais j'aimerais écrire une phrase (comme un bouton) et que le visiteur puisse cliquer dessus et trouve un texte.
    C'est tout con mais ça fait 3 jours que je cherche dans les gadgets et je ne trouve pas.
    Merci d'avance

    RépondreSupprimer
  46. ca marche nickel, merci beaucoup pour ce tuto!!

    RépondreSupprimer
  47. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer

Copyright 2015 Soufiane.fr