Ajouter des icônes de Réseaux Sociaux sur son blog

L'article d'aujourd'hui parlera blogging ! Nous allons voir comment mettre des icônes de Réseaux sociaux sur un blog (sous blog...

L'article d'aujourd'hui parlera blogging ! Nous allons voir comment mettre des icônes de Réseaux sociaux sur un blog (sous blogger en particulier mais la partie principale de la manip' est la même sur la plupart des plateformes). On me demande souvent comment j'ai inséré en haut à gauche mes icônes Facebook, Instagram, Hellocoton... C'est assez simple à réaliser, voici la méthode en 3 étapes : 

1. Choisir ses icônes : 

Vous pouvez bien entendu créer directement les vôtres grâce à un logiciel de graphisme (Inkscape, Photofiltre, Gimp.. sont des logiciels très faciles à prendre en main et totalement gratuits).

Pour celles qui comme moi ne sont pas trop douées en graphisme, ou pour les flemmardes, direction Google ! Entrez dans la barre de recherches "Icônes Réseaux Sociaux" (en ajoutant des caractéristiques si vous avez déjà une idée de ce que vous cherchez : "Icônes réseaux sociaux roses", "Icônes réseaux sociaux girly"...).
Il faut bien vérifier que les RS que vous voulez mettre sur votre site sont tous présents dans les planches d'icônes que vous trouvez. Hellocoton par exemple n'est pas à chaque fois représenté dans les modèles proposés, c'est quand même pourtant plus esthétique d’homogénéiser les logos.

Voici quelques modèles disponibles sur internet :


Une fois vos icônes trouvées, direction Paint (gratuit, hyper simple et présent sur tous les PC) ou un logiciel équivalent. Il suffit d'enregistrer un par un les logos qui vous intéressent et de les réunir dans un dossier :


2. L'import sous Blogger (ou autre plateforme)

Vos logos prêts, lancez un nouvel article sur Blogger (vous le supprimerez une fois vos icônes en place). Importez vos images et ajoutez les dans l'article selon la forme souhaitée (côte à côte, l'une en dessous de l'autre...). 

Lorsqu'on ajoute une image sur Blogger, elle est automatiquement "Associer", ce qui rend plus difficile la mise en place des images les unes à côté des autres (des espaces impossibles à enlever, des alignements incohérents...) Pour rendre la démarche plus facile vous pouvez donc "désassocier" vos images (cliquez sur l'image puis désélectionnez le bouton Associer). 

Une fois vos images bien en place, associez les icônes aux pages auxquelles elles renvoient (le logo Facebook à votre page Facebook, etc...).

1. Cliquez sur le logo. 2. Cliquez sur le bouton associer. 3. Rentrez l'adresse de la page concernée

Une fois tous les liens ajoutés, votre barre de réseaux sociaux est prête à être insérée sur votre blog.


3. Insérer un gadget "code HTML" : 

Pour l'importer sur votre page, rien de plus simple ! Il suffit dans un premier temps de copier le code HTML de votre réalisation. Pour cela, rendez-vous dans l'onglet "HTML" de l'article (en haut à gauche, à côté de l'onglet "Rédiger"). Copiez le code ainsi obtenu. 


Dans "Mise en Page" (un des menus de Blogger), cliquez sur "Ajouter un gadget".


Choisissez le gadget "HTML/JavaScript", copiez le code que vous avez précédemment créé et cliquez sur Enregistrer.



Votre gadget est maintenant ajouté, placez le où vous voulez en le faisant glisser avec la souris (toujours dans "Mise en page"). N'oubliez pas de cliquer sur "Enregistrer la disposition" afin que les changements soient pris en compte.

Votre barre de réseaux sociaux est désormais ajoutée à votre page.

J'ai également utilisé cette technique pour faire la barre de menus sous ma bannière (Accueil, À Propos...).

Si vous avez d'autres questions de personnalisation et que je peux y répondre, je n'hésiterai pas à vous refaire d'autres tutos !

You Might Also Like

19 commentaires

  1. Ahhh merci pour ces astuces ! ♥
    Moi qui compte refaire la mise en page de mon blog, ça va m'être super pratique :D
    Bisous, Jessica. http://jessi-caa.blogspot.fr/

    RépondreSupprimer
  2. Hyper simple et intéressant !
    Je ne savais pas que je pouvais les mettre en article pour avoir les paramètres que je veux et après le copier en HTML. Sachant que le miens ne sont pas au milieu, je file rectifier le tire !
    Merci Pauline <3

    RépondreSupprimer
  3. merci pour ses conseils, les icônes sont super jolis en plus!
    http://la-petite-vie-de-marie.blogspot.fr/

    RépondreSupprimer
  4. Super cet article c'est vraiment bien expliquer :) merci

    RépondreSupprimer
  5. Un très bon article, très bien expliqué! J'avais fais appel à quelqu'un pour mes icones mais c'est toujours mieux de savoir le faire soi même. Et je cherchais la solution pour faire une barre de menu donc je te remercie, j'essayerais ça :)

    RépondreSupprimer
  6. Merci pour l'astuce ! C'est tellement simple que je n'avais jamais penser à faire comme ça ! xD
    Merci encore !!

    RépondreSupprimer
  7. mille merci ca m'a beaucoup aidé pour mon blog
    http://scraptoosimple.blogspot.fr/

    RépondreSupprimer
  8. Super article ! Comment as tu fait pour créer ton bandeau en haut avec le nom de ton blog et ta photo, insérer la rosace en fond ?

    RépondreSupprimer
  9. Merci, ça m'a permis de "réparer" mon blog :) http://lafilledesetoilesfilantes.blogspot.fr/

    RépondreSupprimer
  10. Merci pour ce super article! Il m'a vraiment bien aidé! Tu es bien la seule parmi beaucoup d'autres blogs à avoir clairement bien expliquée! :)

    RépondreSupprimer
  11. Merci beaucoup ♥!!

    RépondreSupprimer
  12. Je viens de le faire sur mon nouveau blog ! Merci merci j'étais parti trop loin ♥

    RépondreSupprimer
  13. Merci pour cet article qui m'a beaucoup aidée :)

    RépondreSupprimer
  14. Coucou Pauline j'ai enfin trouvé la solution pour mettre des icônes sur Blogger, merci et par la même occasion pour se créer des Widget! super explication, bien détaillée, je me suis personnalisé mes icônes je les ais assorties à mon site (oui je touche un peu sous ai et psd !!) encore merci
    si tu veux voir ce que ça donne, c'est ici: http://palmdeb.blogspot.fr

    RépondreSupprimer
  15. Super article j'ai réussi du premier coup en 5 minutes ! Merci beaucoup !!

    RépondreSupprimer
  16. Merci pour cet article très détaillé qui m'a permis de réussir la manip du premier coup également !! :D

    RépondreSupprimer
  17. Merci pour cet article ça m'a sauvé !!

    RépondreSupprimer