Ajouter un bouton de retour vers le haut de la page [wp+blogger]

retour-haut-page-blogger-back-to-top-bouton-button

Ajouter un bouton de retour vers le haut de la page [wp+blogger]

En tant que grosse flemmarde (et ouais, même sur internet…) je trouve le bouton « back to top » présent sur certains site, très utile, ce petit bouton, généralement sous forme de flèche permet de retourner vers le haut de la page sans avoir à se taper 10 minutes de scroll vers le haut de la page (pour ceux qui ne connaissent pas  « scroller » ça signifie juste faire défiler la page en langage de geek) c’est pour cela que je vous retrouve aujourd’hui, pour vous permettre à tous et à toutes (ouais que tu sois sur blogger ou wordpress, c’est ok!) ô chers blogueurs/blogueuses de palier à la flemmardise des internautes.

EDIT du 6 Fevrier 2016 :

Un aperçu du résultat avec le code que je vais vous donner (sans modification)

backtotopbutton

 

 

Oui oui tu vois, c’est juste la petite flèche en bas à droite du site!

WORDPRESS
Rendez vous dans votre administration, cliquez sur « Apparence » dans le menu de gauche puis ajoutez un gadget / widget TEXT
BLOGGER
Rendez vous dans votre administration, cliquez sur « Mise en page » dans le menu de gauche, puis ajoutez un gadget HTML/JAVASCRIPT dans votre sidebar par exemple.

 

Collez y le code suivant :

 

<a style="display:scroll;position:fixed;bottom:5px;left:5px;" href="#" title="Retour haut de page"><img src="http://www.cdl-graphicart.com/BLOG/inc/gallery/fleches-backtotop/noir.png" data-jpibfi-post-excerpt="" data-jpibfi-post-url="http://www.cdl-graphicart.com/ajouter-bouton-retour-vers-haut-page/" data-jpibfi-post-title="Ajouter un bouton de retour vers le haut de la page [wp+blogger]" data-jpibfi-src="http://www.cdl-graphicart.com/BLOG/inc/gallery/fleches-backtotop/noir.png" ></a>

 

Et parceque je suis une fille super généreuse et consciencieuse, je vous ai crée une série de boutons afin que vous trouviez celui qui correspondra le mieux à votre blog!

 

Non, ne vous inquiétez pas, vous n’aurez pas les vilains bords gris.

 

INSTALLATION

 

Pour installer la couleur qui vous plait dans le code que je vous ai donné plus haut, il vous suffit simplement de faire un clic gauche sur l’image puis « copier l’adresse de l’image » comme ceci :

 

copier l'adresse de l'image

 

Une fois que vous aurez copié l’adresse, vous pouvez changer la ligne suivante dans le code

 

http://i1262.photobucket.com/albums/ii617/cdlgraphicart/top_zps314948eb.png

 puis remplacez par l’adresse de l’image préalablement choisie au dessus, et dans le code  sélectionnez la partie entre guillemets puis effectuez un Ctrl/cmd + v (coller).

Mission reussie, vous ferez des heureux à présent, j’espère que tout à bien fonctionné pour vous? et surtout que cette petite astuce vous à plu! n’hésitez pas à me faire part de vos impressions!

64 Commentaires
  • mylittleworldofnails

    2 août 2014 at 8 h 35 min Répondre

    Ca marche paas :(

  • Laetitia

    2 août 2014 at 10 h 42 min Répondre

    Ca marche!!!! Yeah :)) Merci beaucoup!!!

  • Claire

    2 août 2014 at 13 h 23 min Répondre

    Salut Charlène, je crois que tu n’as pas vu ma ptite réponse à ton commentaire sur Hellocoton alors je te fais copier/coller ici :-)

     » Salut, merci pour tes recommandations! Ne t’inquiètes pas j’avais ton article dans un coin de mon cerveau car je savais que c’était mieux d’éviter les plugins :)
    Dis moi, il y a moyen de rajouter un « text-align:left » ou quelque chose comme ça ? »

    Merci d’avance pour ta réponse, en fait j’aimerai le bouton sur le côté gauche de l’écran (que je suis relouuuu) 😀

    • graphicart

      2 août 2014 at 16 h 51 min Répondre

      Coucou! eh bien tu remplaces simplement right par left! 😉

  • Delphine

    3 août 2014 at 16 h 14 min Répondre

    ça marche pas :'(
    Je suis sur windows donc j’ai dû faire clic droit puis « copier l’url de l’image » (mais je pense que ça équivaut à ce que tu as dit), j’ai copier l’url de l’image sur ton site mais ça n’affichait que le code sur mon site et non la flêche puis j’ai essayé en enregistrant l’image sur photobucket et ça fonctionne pas non plus, pourtant j’ai respecté à la lettre tes explications.
    Je te montre les deux codes que j’ai effectué :


    src= »http://i1377.photobucket.com/albums/ah75/delgillet/thumbs_lavender_zpsa27cc199.png »/>


    src= »http://www.cdl-graphicart.com/BLOG/inc/gallery/fleches-backtotop/thumbs/thumbs_lavender.png »/>

    Est-ce qu’il y a une erreur quelque part ? Merci beaucoup d’avance 😀

  • Virée dans l'espace

    3 août 2014 at 16 h 39 min Répondre

    Moi c’est bizarre car ça ne me met pas l’image de la flèche et seulement le texte..

    • graphicart

      3 août 2014 at 16 h 42 min Répondre

      je viens d’identifier le problème les filles, c’est à nouveau à cause de mon éditeur de texte qui change le code sans arrêt –‘le code à été changé, cette fois ci c’est bon, il vous faut refaire la manipulation avec le nouveau code.

    • Delphine

      3 août 2014 at 17 h 27 min Répondre

      C’est bon ça marche impeccable avec le nouveau code :)
      Merci beaucoup 😀

  • Virée dans l'espace

    3 août 2014 at 20 h 03 min Répondre

    Oui trouvé ! Merci beaucoup !
    Par contre j’ai toujours le bord gris autour de l’image o.O

    • graphicart

      3 août 2014 at 20 h 07 min Répondre

      J’ai regardé ton thème, malheuresement le problème vient de celui ci, il faudrait modifier le code suivant dans ton blog :
      #masthead img, #featured-content img, #recent-content img, .entry-content img, .entry-thumb img, .comment-content img, .widget img {
      background: none repeat scroll 0 0 #fff;
      border: 1px solid #bbb;
      mais vu que tu es sur wordpress.com tu n’as pas accès aux fichiers du code source…

  • jesy

    4 août 2014 at 6 h 46 min Répondre

    Coucou, merci beaucoup, ça marche :)

    • graphicart

      4 août 2014 at 10 h 03 min Répondre

      wahou tout rend très bien sur ton petit blog! :-) à bientôt Jesy.

  • jesy

    4 août 2014 at 19 h 53 min Répondre

    Oh vraiment? Merci c’est gentil d’être aller voir, mais je ne suis pas encore à 100% satisfaite de mon petit design haha je pense encore changer quelque truc a voir :/

  • freaking Sassy

    11 août 2014 at 3 h 09 min Répondre

    j’aime trop !! merci :)

    • graphicart

      11 août 2014 at 13 h 40 min Répondre

      je suis aller faire un tour sur ton blog, je vois que tu mets en oeuvre mes tutos ça fait plaisir :-)

  • Garance

    21 août 2014 at 14 h 47 min Répondre

    Ton blog est une tuerie !
    Il m’aide beaucoup, je trouve que tu es la seule à pouvoir nous sauver sur ce genre de problèmes.

    • graphicart

      21 août 2014 at 19 h 35 min Répondre

      hey! merci pour ton passage et ton compliment :-) ça me fait plaisir! à bientôt

  • Mélanie

    23 août 2014 at 12 h 05 min Répondre

    Niquel, cette fois ci, sa a marché ! Bisous.

  • Mademoiselle K

    23 août 2014 at 20 h 20 min Répondre

    Youhouuuu, ça marche!

    • graphicart

      23 août 2014 at 20 h 56 min Répondre

      super! ton blog est très joli au passage, tu es surf blogspot?

  • Lady heavenly

    2 octobre 2014 at 0 h 40 min Répondre

    Coucou la miss :) Merci pour tous tes tutos !! Juste une petite question, lorsque je mets le petit bouton à droite (en changeant le left par right) ça ne fonctionne plus :( La petite flèche est présente mais ne permet plus de remonter .. Du coup je laisse à gauche pour le moment .. Une idée du pb ? Merci

    http://ladyheavenly.blogspot.com

    • graphicart

      3 octobre 2014 at 23 h 35 min Répondre

      Hello! ah bisard.. j’ai testé ton code et cela fonctionne quand je le remplace pourtant essaye à nouveau de remplacer la ligne correspondant de ton « display » jusqu’à « ; » display:scroll;position:fixed;bottom:5px;right:5px;

  • Cavali'Erre

    8 octobre 2014 at 23 h 49 min Répondre

    Merci pour l’astuce, c’est top!

  • La Beauté en Blog

    11 octobre 2014 at 13 h 54 min Répondre

    Merci beaucoup pour cette petite astuce, petite mais très pratique !!

  • Nicolas Lavigne

    20 janvier 2015 at 15 h 17 min Répondre

    Bonjour c’est genial cette petite fleche mais pour ma part ca ne marche pas la fleche est bien la mais rien ne se passe quand on clike dessus… :(

  • jack

    29 janvier 2015 at 15 h 07 min Répondre

    Bonjour Charlene,

    je voudrais créer la même chose, mais avec un scrolling vers le bas de ma page ou plutôt vers une zone précise, ainsi qu’un bouton placé au centre de ma page web et non à droite ou à gauche.

    Merci

  • Sweet Judas

    30 janvier 2015 at 20 h 33 min Répondre

    Merci pour l’astuce, ça a marché du premier coup, c’est trop cooool 😀
    Je cherchais justement depuis quelques jours un moyen de faire quelque chose comme ça, étant donné que je n’arrive pas à trouver comment mettre mes articles en mode « extrait » sur la page d’accueil, ça me saoulait de devoir « scroller » en long, en large et en travers :)

    C’est parfait, merci encore ♥

  • orelol

    17 février 2015 at 15 h 33 min Répondre

    sniffff j’y arrive pas

  • orelol

    17 février 2015 at 15 h 36 min Répondre

    en fait le mien se met pas à droite

  • la vie ordinaire d'une Bretonne

    23 février 2015 at 10 h 13 min Répondre

    On a le droit aussi d’être flemmarde sur le net ^_^
    Merci pour ton astuce.

  • Can-D

    9 mars 2015 at 20 h 52 min Répondre

    j’ai essayé mais y’a un truc qui m’échappe au moment de copier ça ne change rien sur mon blog….

    Je suis trop nulle, je viens de commencer alors tout est encore un peu obscure….

  • Emilie

    16 mars 2015 at 15 h 41 min Répondre

    Je t’ai volé celui ci aussi <3
    Ton blog est trop beau, je suis totalement jalouse o/

  • Marine Skyinie

    31 mars 2015 at 11 h 03 min Répondre

    Coucou!
    j’ai installé le tuto avec les images!
    au début je ne trouvais pas les codes html à remplacer car j’ai fait ctrl+f+la phrase dans la page générale et non dans l’encadré des codes html.
    Problème réglé! tout est bien installé,
    merci mille fois pour tes tutos qui sont clair et très bien expliqué!

    N’hésite pas à venir voir mes petites installations grâce à tes tutoriels!
    http://luniversdeskyinie.blogspot.fr/

    Bisous! ♥
    Skyinie

  • kaylacos

    5 avril 2015 at 23 h 00 min Répondre

    Coucou ! c’est génial ! ça un fait un moment que je cherche comment faire. Et c’est fait ! Merci

  • Garlic and Grenadine

    11 avril 2015 at 19 h 29 min Répondre

    Merci pour cette astuce !!! Je suis ravie de pouvoir l’installer sur mon blog !!!
    Bon weekend

  • Marguerite Verte

    11 avril 2015 at 23 h 47 min Répondre

    Merci pour l’astuce et le code, très généreux de ta part!

  • lola

    12 avril 2015 at 23 h 24 min Répondre

    J’ai testé ce tuto aussi rien ce ne se passe :(

  • Virginie Hedenne

    14 avril 2015 at 8 h 52 min Répondre

    Coucou ma belle ton blog m’aide bien par ces conseils mais la ma jolie petite flèche ne veut pas apparaître :( SOS !! lol ^^

  • lembeaute

    1 mai 2015 at 14 h 35 min Répondre

    Je viens de le faire, ça marche c’est super ! Merci beaucoup pour tes articles qui donnent pas mal de conseils pour les blog et qui permettent de les améliorer .

    Bisous

  • Sonia

    6 mai 2015 at 16 h 29 min Répondre

    Bonjour,

    J’ai regardé attentivement votre blog que je trouve excellemment bien fait, bien écrit et du coup, tout est beaucoup plus simple car les nulles dans mon genre comprennent tout !

    Juste une question sur l’ancre. J’aimerais pour mon blog créer une page de conseils pour écrire mais sur cette me^me page incorporer des menus. Vous voyez ?

    Comment faire ?

    Merci pour votre retour et vos conseils,

    A bientôt,
    Sonia

  • Laura

    26 mai 2015 at 5 h 23 min Répondre

    Bonjour, j’ai fais exactement tout se qui a été demandé mais malheureusement rien ne s’affiche, je ne sais pas d’où vient le problème.
    http://lanouvellelaura.blogspot.fr/

  • Noor

    28 mai 2015 at 11 h 06 min Répondre

    Bonjour

    J’ai réalisé le tutoriel pour  » blogger  » mais une fois le gadget installé, rien n’apparaît sur mon blog

    J’ai copié ceci dans le gadget HTML/JAVASCRIPT :

    Je vois apparaître la flèche noire lorsque je clique sur la mention  » FORMAT RTF  » mais elle n’apparaît pas sur mon site

  • Si Luminoé

    8 juin 2015 at 14 h 23 min Répondre

    Merci merci merci !! Moi qui suis une quiche en blogging, grâce à toi je rends mon blog acceptable !! Merci tout plein de partager tout ça avec nous !

  • Drema

    14 juin 2015 at 14 h 12 min Répondre

    Bonjour ! Merci pour le code et pour les images, c’est vraiment super ! Je suis tombée sur ton blog par hasard comme je viens de créer mon blog et que je le « customize », je file voir le reste de tes articles !
    Bonne continuation !

  • Charles

    21 juin 2015 at 20 h 40 min Répondre

    Génial !!!
    Super votre blog !!!

  • MG | Bee Veggie

    17 septembre 2015 at 23 h 37 min Répondre

    Un tuto tout facile !! Je suis super contente car ça a très bien fonctionné !! Merci merci merci 😀

  • Mme Maman

    23 septembre 2015 at 9 h 25 min Répondre

    Je vais tester! Merci! :)

  • Tuii

    13 octobre 2015 at 23 h 52 min Répondre

    Merci pour ce tuto !
    Vraiment facile et j’adore les petites flèches misent à disposition.

  • La Geek En Rose

    18 octobre 2015 at 18 h 31 min Répondre

    Merciiiiii, je l’ai installé sur mon blog. ♥

  • Peggy

    17 décembre 2015 at 22 h 46 min Répondre

    Merci beaucoup pour ce tuto, je viens d’insérer une flèche grise sur mon blog. C’est la première fois que je touche au code de près ou de loin… j’ai même tenté et réussi à passer la flèche à droite. Dingue !

  • Val ( cookies addicte )

    24 décembre 2015 at 10 h 12 min Répondre

    Un grand merci à vous pour vos explications claires , simples et précises !

  • Cocooning & Co

    24 février 2016 at 22 h 11 min Répondre

    Super, merci beaucoup !

  • Béa

    5 mars 2016 at 9 h 28 min Répondre

    Merci, c’est simple et efficace : Que du bonheur !! LOL
    Je m’y mets tout de suite !!
    Et bravo pour ce blog 😉

  • Kelly

    21 mars 2016 at 16 h 13 min Répondre

    C’est top! Ca a été un peu laborieux pour moi qui débute sur blog mais j’ai une belle flêche qui renvoie vers le haut de mes pages. Merci pour ton partage :-))).
    Kelly

  • Anabelle

    24 mai 2016 at 13 h 19 min Répondre

    Bonjour, je ne vois pas ma petite flèche..lol

  • Floralie

    1 septembre 2016 at 8 h 59 min Répondre

    Bonjour,
    Je viens de tester et ça ne marche pas je suis sur blogger, j’ai un petit cadre avec une petite feuille dedans ?
    Je ne comprends pas ?
    Merci à toi de ta réponse, à bientôt !

  • Pauline

    1 novembre 2016 at 15 h 44 min Répondre

    C’est génial tes tutos ! Merci pour ton aide!
    Ton site est sublime…

  • Dear moonlight

    6 décembre 2016 at 17 h 22 min Répondre

    Merciiiii ca marche super bien !

  • Gina0101

    21 février 2017 at 16 h 39 min Répondre

    Bonjour,

    Merci beaucoup pour cet article. Pour ma part, Je n’y arrive pas. J’ai l’impression que je m’y prends mal sans savoir vraiment pourquoi… En tout cas la flèche ne s’affiche pas.

    Si tu peux m’aider?

    :)

  • Gauthier

    29 mars 2017 at 11 h 01 min Répondre

    Parfait !!! 😀 Je te remercie :)

  • Oriane

    20 avril 2017 at 16 h 52 min Répondre

    Merci beaucoup ! C’est génial ça marche super bien !!!

Poster un commentaire