Ajouter des icônes de réseaux sociaux à son blog Blogger


Après vous avoir expliqué comment ajouter un bouton Pin It (Pinterest) ou un Page Plugin Facebook à votre blog Blogger, aujourd’hui nous allons voir comment afficher des icônes menant vers les réseaux sociaux sur le côté de votre blog ou en bas de celui-ci.

Pour y parvenir, il y a plusieurs étapes à franchir :

  • Choisir les icônes dont vous avez besoin.
  • Mettre en ligne ces images quelque part pour les stocker.
  • Demander à Blogger d’afficher les icônes tout en faisant un lien dessus pour qu’elles conduisent vos lecteurs à vos différents comptes sur les réseaux sociaux.

Je vais vous montrer comment faire dans cet article.

Etape 1 : choisir ses icônes de réseaux sociaux

Il existe des icônes de réseaux sociaux de styles très différents. Si vous ne savez pas créer ce type d’icônes vous-mêmes, voici 2 sources qui proposent des icônes gratuites au format circulaire ou carré.

  • Le site Flat Icon – Sur Flat Icon, vous pouvez trouver des dizaines d’icônes de réseaux sociaux gratuites (et payantes). Vous pouvez soit chercher une icône individuellement en entrant le nom d’un réseau social précis, soit télécharger un pack d’icônes parmi tous ceux qui existent.
  • Icônes circulaires créées par Vervex – Le pack peut être téléchargé sur Deviant Art (le lien « Download » se trouve dans la colonne de droite, en haut). Si ces icônes vous paraissent trop petites pour votre blog, vous pouvez à la place télécharger le pack Somacro (grandes icônes) et les redimensionner vous-mêmes à la taille souhaitée.

    Icônes de réseaux sociaux rondes

Après avoir téléchargé le fichier, dézippez-le (avec WinRar sur PC par exemple, avec un double clic dessus sur Mac). Vous allez obtenir une multitude d’icônes au format .png. Si vous y touchez, pour les redimensionner par exemple, pensez à les réenregistrer en .png car ce format est capable de gérer la transparence tandis qu’un format .jpg par exemple vous mettra un fond blanc derrière l’icône, ce qui n’est pas forcément joli selon le design de votre blog.

Choisissez ensuite les icônes dont vous avez besoin. Pour mon exemple, je vais prendre Twitter, Facebook et Instagram. Vos icônes doivent être de la même taille. Pour plus de simplicité, renommez-les avec le nom du réseau social, tout en minuscules et sans espace comme je l’ai fait ici :

Icônes Twitter, Facebook et Instagram
Icônes Twitter, Facebook et Instagram

Etape 2 : mettre en ligne les icônes sur Blogger

Pour stocker nos icônes sur le web, nous allons devoir les mettre en ligne sur votre blog. C’est parti !

Uploader les icônes de réseaux sociaux

1. Cliquez sur le bouton « Nouvel Article » comme si vous vouliez rédiger un nouveau post. Vous pourrez supprimer ce brouillon d’article une fois la procédure terminée.

2. Cliquez sur le bouton « Image » comme lorsque vous insérez une photo sur votre blog.

Insérer une image sur Blogger
Insérer une image sur Blogger

3. Cliquez sur « Choisir les fichiers » et choisissez vos icônes sur votre disque dur. Elles sont alors uploadées sur votre blog, ce qui devrait ressembler à ça :

Importer une image depuis son disque dur sur Blogger
Importer une image depuis son disque dur sur Blogger

4. Sélectionnez les icônes mises en ligne puis cliquez sur le bouton bleu « Ajouter les images sélectionnées ». Vos images devraient apparaître dans votre brouillon d’article comme ci-dessous. Ne cherchez pas à les aligner horizontalement, ce n’est pas important pour le moment.

Icônes dans un article Blogger
Icônes dans un article Blogger

Créer des liens vers les réseaux sociaux

C’est très simple !

1. Sélectionnez la première image et cliquez sur le bouton « Associer » (juste à côté du bouton « Image » sur lequel vous avez cliqué pour insérer les icônes).

Dans le champ « Adresse web », entrez l’adresse du réseau social correspondant à l’image. Par exemple, dans mon cas, l’icône correspond à Instagram donc je mets l’adresse de mon compte Instagram. Cochez aussi la case « Ouvrir ce lien dans une nouvelle fenêtre ». Ça permettra aux gens de rester sur votre blog même s’ils ouvrent en plus votre page sur les réseaux sociaux.

Ajouter un lien sur une image sur Blogger
Ajouter un lien sur une image sur Blogger

2. Faites la même manipulation pour créer un lien sur chaque icône de réseau social.

Etape 3 : Récupérer le code des icônes de réseaux sociaux

Dans un premier temps, sélectionnez toutes les icônes… et cliquez sur le bouton « Supprimer la mise en forme ». Vos icônes vont normalement se réaligner sur la gauche.

Supprimer la mise en forme sur Blogger
Supprimer la mise en forme sur Blogger

Ensuite, sur la gauche de votre barre d’outils Blogger, vous devez voir un bouton « HTML ». Cliquez dessus et ne paniquez pas en voyant du code ;)

Voir le HTML sur Blogger

Ce code contient plein d’informations : le lien de vos icônes, le lien de vos réseaux sociaux… et c’est exactement ce dont nous avons besoin !

Code des images sur Blogger
Code des images sur Blogger

Vous allez devoir personnaliser seulement deux choses :

  • Commencez par retirer tous les <br /> que vous voyez dans le code. Ça correspond à des sauts de ligne. Dans notre cas, nous voulons aligner les icônes horizontalement donc nous n’avons pas besoin de ces sauts de ligne.
  • Ensuite, ajoutez ce bout de code, avec le point-virgule : &nbsp; A quel endroit ? Après chaque </a> que vous voyez, sauf le dernier. Ça permet de créer un petit espace entre les icônes, au lieu qu’elles soient toutes collées.

Ça devrait, à l’arrivée, ressembler à quelque chose comme ça (bien sûr, avec vos propres réseaux sociaux et vos propres liens d’images) :

Le code des icônes de réseaux sociaux prêt à l'emploi
Le code des icônes de réseaux sociaux prêt à l’emploi

Vous y êtes presque !

Etape 4 : créer un gadget Blogger avec les icônes

1. Copiez le code… et ouvrez un nouvel onglet, dans lequel vous allez retourner sur Blogger. Cette fois-ci, allez dans la rubrique « Mise en page » du menu (situé dans la colonne de gauche).

2. A l’endroit où vous souhaitez afficher vos icônes, cliquez sur « Ajouter un gadget ». Dans mon exemple, nous allons les afficher sur le côté du blog.

Ajouter un gadget sur Blogger

3. Parmi les options qui s’affichent, choisissez « HTML/Javascript ».

Ajouter un gadget HTML/Javascript à Blogger

4. Vous avez juste à coller dans la partie « Contenu » le code que vous aviez copié et à enregistrer. Vous n’êtes pas obligé de mettre un titre (sauf si vous voulez afficher quelque chose au-dessus de vos icônes, par exemple « Suivez-moi sur les réseaux sociaux »).

Afficher les icônes de réseaux sociaux dans un gadget
Afficher les icônes de réseaux sociaux dans un gadget

Si vous retournez sur votre blog, vous verrez les icônes s’afficher comme ceci :

Icônes Facebook, Twitter et Instagram sur Blogger
Icônes Facebook, Twitter et Instagram sur Blogger

En les survolant avec la souris, vous pourrez cliquer pour accéder au réseau social de votre choix. Vous pouvez bien sûr ajouter d’autres réseaux sociaux une fois que vous avez compris le principe ! J’espère qu’il vous aidera à afficher vos réseaux sociaux sur votre blog. Si vous avez des questions, n’hésitez pas à réagir dans les commentaires !

Vous pouvez aussi consulter mon article sur la police d’icônes Font Awesome, qui vous permet d’ajouter des icônes à l’intérieur de vos articles ou de vos titres pour améliorer la mise en page !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

142 commentaires sur “Ajouter des icônes de réseaux sociaux à son blog Blogger

  • Watsonaire

    Aaaaah!!! Je n’y arrive pas! Je ne trouve pas mon erreur et je ne m’en sors pas. Rien ne s’affiche. J’ai essayé de changer https en http, ça ne marche pas non plus.
    Si quelqu’un peut m’aider? Je suis niveau archi-débutant.
    Merci d’avance

    Répondre à Watsonaire
    • Watsonaire

      Edit: J’ai trouvé, c’était un problème de modèle. J’étais en affichage dynamique et il faut être en affichage simple. Désolée et merci pour ce super tutoriel.

      Répondre à Watsonaire
    • Marlène

      De rien ! L’affichage dynamique offre moins de possibilités en règle générale.

      Répondre à Marlène
  • LEBOOKGOURMAND

    Merci pour aide
    Ton article est super bien expliqué, pour une débutante comme moi
    ça a marché du premier coup
    Bonne année et à bientôt sur ton site

    Répondre à LEBOOKGOURMAND
  • elodie

    Bonjour Marlene,
    Ça y est c’est fait je suis arrivée à mettre mes icônes de réseaux sociaux. J’avoue que j’en ai transpiré.
    Pour me faciliter la tache, j’ai ouvert une page Word et j’ai copié ton modèle puis je l’est transformée tranquilement.
    Ça marche trop contente!!!
    J’ai fait un petit lien de ton blog sur mon blog, car vraiment t’est tutos sont formidable.
    A bientôt elodie

    Répondre à elodie
    • Marlène

      Merci Elodie ! Par la suite, mieux vaut utiliser un vrai éditeur de code (comme Notepad++, le Bloc-Notes, etc) plutôt que Word… car dans certains cas, Word rajoute des « codes indésirables » qui peuvent provoquer des erreurs :)

      Répondre à Marlène
    • ELODIE

      merci pour cet info
      A bientôt elodie

      Répondre à ELODIE
  • Happy New Mom

    Merci infiniment pour votre aide, je lance mon blog et cela m’a bien aidé ! Merci merci…

    Répondre à Happy
  • Caroline Lozeau Gélinas

    MERCI!!! MERCI!!! MERCI!!!

    Génial et simple comme explications :D

    Répondre à Caroline
  • Danielle

    Bonjour et merci pour vos conseils. Cette procedure est elle valable egalement pour dynamic wiew? Et sinon, savez vous comment faire. Bien cordialement, Danielle

    Répondre à Danielle
    • Marlène

      Bonjour, tant que le modèle choisi permet d’afficher des gadgets, la procédure devrait fonctionner sans problème !

      Répondre à Marlène
    • Danielle

      Merci de votre reponse. je viens d essayer, cela ne fonctionne pas. Dommage! http://olivbusua.blogspot.com/ Comment faire avec ce type de modele?

      Répondre à Danielle
    • Marlène

      Il n’y a aucune zone pour insérer des gadgets… donc par définition aucune zone pour insérer les icônes de réseaux sociaux :/ Un changement de modèle ? ;)

      Répondre à Marlène
    • Danielle

      Merci Marlene pour votre reactivite. 3 boutons de partage s’affiche en pieds de page des articles. Je n’arrive pas a en ajouter d’autre. Les affichages dynamiques peuvent etre modifies par code css, mais, Gosh! Lequel? Qu’entendez vous par changement de modeles? Plus de dynamic wiew? Bonne soiree et encore merci. (et sorry pour l’absence d’accent, je navigue en qwerty).

      Répondre à Danielle
    • Marlène

      Bonsoir, pour que les icônes s’affichent il faut soit savoir se repérer dans le code et trouver soi-même un endroit où les placer (dont le pied de page), soit avoir un modèle qui prévoit l’affichage de gadgets. Or, celui que vous avez choisi ne semble pas inclure d’emplacement pour des gadgets (en tout cas, je ne vois pas d’espace libre sur mon écran !). C’est pour cette raison que vous êtes bloquée…

      Répondre à Marlène
  • Ninon

    Merci beaucoup pour ce petit tutoriel parfaitement bien expliqué ! Mes boutons de réseaux sont enfin parfaits ! :)

    Ninon

    Répondre à Ninon
  • Naholia

    Franchement.. merci infiniment !
    Ton tuto est très bien expliqué et c’est grâce à toi que j’ai réussi à faire ces icônes !

    Répondre à Naholia
  • Dans les tiroirs de Jul

    Merci beaucoup pour ce pas à pas très simple et efficace!

    Répondre à Dans
  • Alexandre

    Bravo, et merci pour ce tutoriel extrêmement clair, pédagogique et précis. J’ai pu oser faire des modifications sur mon blog que je n’osais pas faire jusqu’à présent.
    Continuez !

    Alexandre

    Répondre à Alexandre
  • Anaisbrtn

    MON DIEU MERCI !! Je n’y croyais plus lol mais là j’ai réussi, certes des codes mais au final pas si compliqué que ça !! Merciiiiiiii :D

    Répondre à Anaisbrtn
  • Angie

    Ok, merci beaucoup Marlène!

    Répondre à Angie
  • Angie

    Bonjour,
    j’ai trouvé vos explications concernant l’ajout des icônes menant sur les réseaux sociaux, j’ai donc essayé d’ajouter l’icône de Facebook sur mon blog culinaire (sur Blogger), vos explications étant très claires, cela a marché et le lien menant vers Facebook fonctionne, cependant je viens de m’apercevoir que cela a complètement modifié le contenu de mes articles, c’est à dire, ils continuent à s’afficher normalement sur mon site, mais quand j’essaye d’accéder à mes articles dans « Conception », tous les articles ont été remplacés par un langage « codé », et toutes les photos ont disparues également. Je ne peux plus corriger ni écrire de nouveaux articles car je n’ai plus accès aux fonctions normales pour les rédiger. Je suis en panique et je voudrai récupérer le contenu normal de mes articles, mais je n’y connais rien en matière des codes etc, j’espère que vous pourrez m’aider. D’avance merci pour vos conseils;
    Cordialement
    Angie

    Répondre à Angie
    • Marlène

      Hello Angie, ce genre de problème vient souvent d’un mauvais copier-coller où on oublie un détail (fermer une parenthèse, etc), ça peut rendre la page toute blanche ou afficher du code. C’est pour ça qu’avant toute modification du code de son blog, on conseille toujours de faire une sauvegarde. Ça permet, en cas de problème d’affichage, de revenir en arrière !

      Répondre à Marlène
  • Belouin

    Merci pour cet article, j’avais déjà lu un autre article pour mettre les boutons réseaux sociaux mais je n’avais absolument rien compris et ça fait un certain temps que j’essaye à les mettre sur mon blog. Grâce à toi, j’ai enfin réussi alors merci beaucoup.

    Répondre à Belouin
  • katthy

    MAGNIFIQUE!!!
    ça fonctionne! Je n’en reviens pas! Vous expliquez magnifiquement bien! Je ne connais absolument rien à la programmation et j’ai réussi!

    Je vous remercie infiniment!

    Kathy

    Répondre à katthy
  • Yiliana Feti'a

    Juste, mais … 1000 merci !!!

    Je suis pas familière de l’HTML, mais j’ai réussi direct. Technique très simple et expliquée avec efficacité !

    Répondre à Yiliana
  • bagatelleandco

    Chouette article très utile ?
    Je cherche comment centrer les îcones si tu sais je suis preneuse!

    Répondre à bagatelleandco
    • Marlène

      Hello, bien sûr !
      1. Avant le premier <a href= de ta liste d’icônes, tu marques <div style="text-align:center">
      2. Ensuite, à la toute fin du code de tes icônes, après le dernier </a>, tu marques </div>

      Répondre à Marlène
  • Noémie

    Merci beaucoup pour ce tuto ! Je n’y connais rien du tout et ça a été super simple !!
    Ça rend quelque chose de beaucoup plus joli sur blogger !

    Répondre à Noémie
  • Filo

    mondieumondieu, mais ça marche! Pour la première fois de ma vie j’ai touché au code et j’ai même réussi, l’icône est installée! (un bon vieux mal de tête aussi )
    Bon, je ne suis pas sortie des ronces pour autant, il faut que je recommence toutes les opérations pour installer les autres icônes, mais ça ne fait rien je suis très fière (cyberquiche power!)
    Merci pour ce tuto clair et bien détaillé, vraiment merci, je n’aurais jamais cru que j’allais y arriver toute seule!

    Répondre à Filo
  • Crossedfingers

    Bonjour !
    J’ai laissé un commentaire hier te remerciant pour ces supers conseils !
    Seulement, aujourd’hui je remarque un problème… Comment rendre ces icônes responsives ??? Je m’explique : sur la version mobile, mes icônes apparaissent vraiment très gros (par rapport au reste du blog) et cela m’embête un peu… Aurais tu une solution, un bout de code peut-être ? Qui permettrait que mes icônes s’adaptent à la device ?

    Si tu veux regarder depuis un mobile : http://www.crossedfingers.fr (et si tu as des avis, par la même occasion, j’en serai ravie :D)

    Merci d’avance pour ta réponse et surtout pour ces tutos vraiment bien expliqués, et très clair !

    Crossedfingers

    Répondre à Crossedfingers
    • Marlène

      C’est parce que dans ton design actuel, tu as une ligne qui spécifie que toutes les images de la sidebar (= la colonne sur le côté de ton blog) doivent faire 226 pixels de large… donc forcément, quand ton design se redimensionne et que la colonne prend toute la largeur de l’écran, l’image prend aussi toute la largeur.
      C’est une ligne qui ressemble à ça :
      .sidebar img {
      width: 226px;

      Répondre à Marlène
    • Crossedfingers

      Dans le code html du design je trouve cela :
      .sidebar img {
      width: 100%;

      Peut-être que je dois remplacer ce 100% par « auto » ? Pour que cela s’adapte?.. Ca m’embête vraiment parce que je ne trouve pas ça harmonieux du tout de ne pas avoir, depuis mon mobile, mes icônes alignés, et de petite taille sous ma photo lol :p
      J’essaye en vain de trouver un petit code qui les rendrait responsive, mais n’y connaissant rien, c’est un peu compliqué ^^
      Merci de ta réponse en tout cas !

      Bonne journée
      Crossedfingers

      Répondre à Crossedfingers
    • Marlène

      Tu pourrais retirer la ligne « width:100% » mais ça risque de jouer sur d’autres images. Il faut tester ;) Je ne peux pas vraiment te donner toutes les possibilités sans avoir vraiment regardé ton code de près.

      Répondre à Marlène
  • Eric

    IMPECC ! Je crée mon blog aujourd’hui et j’installe déjà des boutons ! :-))
    Merci pour ce tuto clair ,net et précis.

    Répondre à Eric
  • Du fil et mon ...

    Yesss! ENFIN une réponse à ce que je cherche depuis un moment !!!! Bon, j’ai pas encore testé car il se fait tard, du moins pour moi … A suivre demain, encore merci !

    Répondre à Du
  • aemi

    Waou!!! Merci beaucoup j’ai réussi!!! Et j’ai beaucoup cherché et je me suis beaucoup perdu avant de trouver enfin ce site où c’est si bien expliqué!!! Demi

    Répondre à aemi
  • la gazette d'un gazelle

    MERCI !!!! Cela fait des semaines que je cherchais par mes propres moyens de trouver en vain ! Et là tu es arrivé ! Merci beaucoup car maintenant c’est fait et j’ai même rajouté en tout petit Hellocoton, au lieu de leur grosse bannière qu’ils proposent !

    Répondre à la
    • Marlène

      Ah ma pauvre tu avais bien galérė dis donc, bravo d’avoir réussi à faire ce que tu voulais :)

      Répondre à Marlène
  • Ro°xy

    Merci pour ce tuto très simple et pratique! ^^

    Répondre à Ro°xy
  • Le murmure des passions

    Merci beaucoup pour tes explications!! ça m’as énormément aidé et puis c’est très claire et facil! Encore merci!

    Répondre à Le
  • la fille fauchée

    Coucou,
    Merci après des mois de galère, j’ai enfin réussi!

    Répondre à la
  • Cynthia

    Tout d’abord merci beaucoup de partager cette astuce, j’ai découvert ton blog en cherchant comment faire ça.
    J’ai tout suivi à la lettre mais je n’y arrive pas.. Et je ne sais pas où se trouve l’erreur..

    Je me retrouve avec le code suivant:

    <a href= »//instagram.com/enchantednature/“ » title= »“be » rel= »nofollow »></a>

    Cependant, l’image ne s’affiche pas sur mon blog et lorsque j’appuie dessus ça me revoit sur mon blog et non sur mon Instagram..

    Je viens tout juste de démarrer mon blog il y a quelques jours donc je ne suis pas très calée..

    Merci :)

    Répondre à Cynthia
    • Marlène

      Bonsoir, je viens de jeter un oeil à ton blog et il y a quelques erreurs dans ton code.
      – Déjà, l’adresse de l’image n’est pas la bonne, celle que tu as mise ne renvoie à aucune image. Donc soit tu as supprimé totalement l’image de tes albums photo entre temps, soit il y a eu un souci au moment de recopier ce lien.
      – Ensuite, tu as à chaque fois deux guillemets au lieu d’un seul. Par exemple, au lieu d’avoir width="40px", tu as width=""40px"".
      – Tu as aussi des guillemets qui ne sont pas fermés, par exemple le titre de ton lien qui est écrit comme ça : title=""be" modest="" &="" natural="" sur="" instagram“="". Tu devrais avoir quelque chose du style title="Be Modest & Natural sur Instagram".

      Donc c’est normal que ça ne marche pas ;) Commence par essayer de récupérer le bon lien de ton icône Instagram et par corriger ces petites erreurs, n’hésite pas à me dire s’il y a une étape où tu rames !

      Répondre à Marlène
    • Cynthia

      Oh ça y est j’ai réussi !!! Merci beaucoup :)
      J’ai vu que tu as dit plus haut pour centrer l’image et je l’ai fait, ça fonctionne ;)
      Merci à toi et bonne soirée :)

      Répondre à Cynthia
  • toutsecree

    ça marche!! merci beaucoup, ton blog est une vraie mine d’or, bravo!

    Répondre à toutsecree
  • AllGirlsLoveMakeUp

    Enfin un tuto clair, net et précis ! J’ai enfin réussi à faire quelque chose après plusieurs heures d’énervement alors merci beaucoup !
    Par contre maintenant j’aimerais aligner mes p’tites îcones mais je n’y arrive pas. Enfaite j’imagine qu’on doit mettre quelque chose comme « text-align: center » quelque part mais je ne trouve pas où… Peux-tu m’éclairer stp ?

    Répondre à AllGirlsLoveMakeUp
    • Marlène

      Bien sûr ! Je te conseille d’utiliser une balise div à l’intérieur du widget que tu as créé, en l’ouvrant juste avant les liens et en la fermant après :

      <div style="text-align:center;">
      <a href="https://twitter.com/Allgirlslovemu" target="_blank" title="All Girls Love Make Up sur Twitter"><img src="http://2.bp.blogspot.com/-edrGqPs8M_8/VeGtU-957aI/AAAAAAAAG-Q/F2BRaMdx-xA/s1600/Twitter.jpg" alt="Twitter" width="70px" height="70px" /></a> 
      <a href="https://instagram.com/allgirlslovemakeup/" target="_blank" title="All Girls Love Make Up sur Instagram"><img src="http://3.bp.blogspot.com/-UOPQdpzXS44/VeGtVBsrmkI/AAAAAAAAG-Y/4idT04hkDEc/s1600/Instagram%2B2.jpg" alt="Instagram" width="70px" height="70px" /></a> 
      <a href="https://www.youtube.com/user/allgirlslovemu" target="_blank" title="All Girls Love Make Up sur Youtube"><img src="http://2.bp.blogspot.com/-xyYchlxvYKk/VeGtVIB3qTI/AAAAAAAAG-M/hVOURqPoBJk/s1600/Youtube.jpg" alt="Youtube" width="70px" height="70px" /></a> 
      <a href="http://www.hellocoton.fr/mapage/all-girls-love-make-up" target="_blank" title="All Girls Love Make Up sur Hellocoton"><img src="http://3.bp.blogspot.com/-JfatAh6ef7Q/VeGzFs4PeYI/AAAAAAAAG_A/NVRPY2OLKAE/s320/Hellocoton.jpg" alt="Hellocoton" width="771px" height="243" /></a> 
      <a href="http://www.inspilia.fr/membre/allgirlslovemakeup" target="_blank" title="All Girls Love Make Up sur Inspilia"><img src="http://3.bp.blogspot.com/-UsQalWyscJw/VeGx_lpmk7I/AAAAAAAAG-0/APuZlnDc8Sg/s320/Inspilia.jpg" alt="Inspilia" width="771px" height="243" /></a>
      </div>
      
      
      Répondre à Marlène
  • floraines

    Bonjour et vraiment merci pour cet article car ça m’a beaucoup aidé! Je viens tout juste de commencer mon blog donc je fais tout pour que la mise en page soit parfaite :)
    Néanmoins, j’ai en tout 5 icônes et seulement 3 se montrent. Les icônes sont alignées, j’ai vérifié plusieurs fois et il n’y a pas d’erreur dans le code donc je voulais savoir quel était le problème
    Merci d’avance pour ta réponse continue avec ton blog c’est super!

    Répondre à floraines
    • Marlène

      Je vois bien 5 icônes pour ma part donc je pense que tu as un problème de cache : en gros, ton navigateur a mémorisé l’ancienne version de la page qui devait avoir 3 icônes et ne t’affiche pas les deux dernières. Sur PC, on peut vider le cache facilement en faisant Ctrl + F5 quand on est sur une page web.

      En revanche, ton icône Instagram apparaît deux fois (tu as dû copier deux fois le même code d’image et oublier le code de Tumblr).

      Répondre à Marlène
    • floraines

      Effectivement sur mon portable j’arrive à toutes les voir et merci pour la petite faute des deux icônes!

      Répondre à floraines
  • Marie-Claire Martel

    Waouh merci tu m’as été d’une grande aide j’ai pu enfin mette les icones de réseaux sociaux pour mon blog. Les explications sur d’autres sites et blogs n’étaient pas claire mais grâce à toi j’ai compris du premier coup! Un énorme merci! :D

    Répondre à Marie-Claire
    • Marlène

      Mais de rien ! Je suis toujours contente quand on vient me dire que ça marche ;)

      Répondre à Marlène
  • Malow

    Merci beaucoup ! C’est un article que j’ajoute directement aux favoris !!! :) Super simple :p

    Répondre à Malow
    • Marlène

      Merci d’avoir pris le temps de laisser un commentaire ! J’espère que ça t’aidera dans la personnalisation de ton blog !

      Répondre à Marlène
  • Carolane

    D’une simplicité assez révoltante x)
    Un grand merci ! :D
    Par contre juste pour savoir comment on les centre ? On rajoute juste : style= »text-align: center » ?

    Répondre à Carolane
    • Marlène

      Au tout début du code, avant le premier <a href, tu ajoutes <div style="text-align:center">. Et à la toute fin du code, après le dernier </a>, tu ajoutes </div>

      Répondre à Marlène
  • cathia beauty channel

    super cette article, tu me sauves la vie, car j’avais fait ça il y a longtemps et en voulant apporter du changement à mon blog j’ai tout effacés :-(

    Répondre à cathia
    • Marlène

      Oops :) Je crois qu’on l’a tous vécu un jour ou l’autre ! A force de faire des changements, on supprime une ligne qu’il ne fallait pas supprimer :)

      Répondre à Marlène
  • Joh

    Bonjour,

    Tu viens tout simplement d’illuminer ma journée ! Depuis que j’ai créé mon blog que je fouine un peu partout pour trouver la solution et miracle te voilà ! En plus expliqué étape par étape, c’est parfait !
    Merci énormément !
    Joh la Maman Fatale !

    Répondre à Joh
    • Marlène

      J’adore le nom de ton blog ;) Contente d’avoir pu t’aider !

      Répondre à Marlène
    • Joh

      Merci beaucoup ! ça fait plaisir je me suis creuser les méninges et j’avais que ça en tête !
      Je débute à peine donc tes articles tutoriels sont très intéressants ! Même les conseils etc… Je dévore ton onglet conseil !

      Répondre à Joh
  • No Face No Name

    Bonjour,

    Mille mercis pour cet article hyper clair et simple à appliquer. Il m’a permi de mettre de jolies icônes de tous mes réseaux sociaux !
    Et ça marche aussi pour l’icône du mail : il suffit de remplacer l’url du réseau social par « mailto:adresse mail du blog » !

    Encore merci !

    Mathilde du blog No Face No Name

    Répondre à No
    • Marlène

      Tu as raison, au moins ça permet de mettre une jolie icône en accord avec le reste du design ! Merci de ton commentaire :)

      Répondre à Marlène
  • Manowen

    Génial ! merci beaucoup ! moi qui n’y connait rien en code j’ai tout compris et ça a marché du premier coup !

    Répondre à Manowen
  • Sidjie

    Bonjour,

    Merci beaucoup pour ces explications. J’ai réussi à installer mes icônes sans problèmes (facebook,twitter,instagram,youtube) mais je n’arrive pas à les mettre côte à côte. Elles sont très distancées les unes de autres et je ne trouve pas comment modifier ça. Sauriez-vous comment je dois procéder pour pouvoir aligner mes icônes ?

    Je vous remercie d’avance pour votre aide.
    Sidjie

    Répondre à Sidjie
    • Marlène

      Je suis allée jeter un oeil sur ton blog. J’ai l’impression que tu as mis une image par widget au lieu de tout copier dans le même widget… Ça expliquerait pourquoi ça s’affiche comme ça.

      Répondre à Marlène
    • Sidjie

      Et bien c’est super, j’ai réglé le problème et c’est comme je le souhaitais à présent. Effectivement, il suffisait juste de tout coller dans le même widget :-)Un tout grand merci.

      Répondre à Sidjie
  • Sarah

    Super cet article !
    Y a-t-il un moyen de les customiser, par exemple de changer leur apparence au passage de la souris ? Si oui pourrais-tu me dire comment faire car je galère comme pas possible >< Merci !

    Répondre à Sarah
    • Marlène

      Tu veux complètement changer l’icône (ex : couleur différente) ou juste créer un effet dessus (par exemple, qu’elle soit un peu plus claire au survol) ? Si tu cherches à utiliser 2 images, tu commences par mettre en ligne ta deuxième image (celle qui s’affichera au passage de la souris) comme tu l’as fait pour la première icône. Et ensuite, au lieu d’utiliser le code que crée Blogger, tu utilises un code de ce type :
      <a href="A" title="Nom de ton blog (sur) nom du réseau social" target="_blank"><img src="B" alt="Nom du réseau social" width="Largeur de l'icône en pixels" height="Hauteur de l'icône en pixels" onmouseover="this.src='C'" onmouseout="this.src='B'" /></a>
      En remplaçant :
      A- Lien de ton compte sur le réseau social.
      B- Lien de l’icône principale (celle qui sera toujours visible).
      C- Lien de l’icône qu’on verra au survol.

      Ce code dit « quand la souris est sur l’image » (mouse/over = souris/dessus), tu affiches la deuxième version de l’icône… et « quand la souris sort de l’image » (mouse/out = souris/en dehors), tu affiches l’icône principale. Il y a une autre méthode avec du code CSS, pratique pour les effets mais plus compliquée pour un débutant ! Je ne sais pas si l’explication est claire, c’est un peu long à expliquer dans un commentaire :)

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.