Tutoriel Blogger: Comment insérer les liens vers Facebook, Hellocoton, Youtube, Instagram, Pinterest, Tumblr etc côte à côte

Afficher les badges pour se faire suivre sur les réseaux sociaux sur son blog Blogger / Rassembler les icones pour Facebook, Hellocoton, Youtube, Twitter, Instagram, Pinterest, Tumblr etc. dans un seul widget. / Installer les boutons pour les réseaux sociaux sur Blogger

Je savais comment mettre UN lien vers Facebook ou HC etc. mais sur de nombreux de blogs je voyais tous les icônes rassemblés au même endroit ce qui est qd même + chouette!

J'ai trouvé la solution pour le faire grâce aux blogs de "les trucs de myrtille" et "mascara et talons hauts" en googlant " blogger comment rajouter dans un seul widget les liens facebook instagram hellocoton". 

VOICI MON TUTORIEL / PAS-A-PAS ULTRA DETAILLE:

 1- CHERCHER LES IMAGES =  boutons = badges = icônes de réseaux sociaux.

Trouver les images qui vont vous servir de bouton représentant le réseau social, elles doivent être toutes de format identique. Par exemple, chercher dans Google Images "social media icons". Beaucoup de sites en proposent mais le problème que j'ai eu est qu'il n'y avait jamais Hellocoton qui est surtout connu en France. 
Conclusion j'ai cherché moi-même les logos et me suis "cassé la tête" à les reformater et  redécouper en boutons carrés arrondis! Je vous les mets à disposition ici: profitez-en! sur chacune des icones ci-dessous vous pouvez faire click droit / "enregistrer l'image sous..." 

2- ENREGISTRER CES ICONES SUR VOTRE ORDI

Enregistrer ces images quelque part sur votre ordinateur (click droit sur l'image / "Enregistrer l'image sous...") en nommant bien selon le nom du réseau social pour vous y retrouver plus tard.

cliquer pour agrandir 

3- METTRE CES ICÔNES SUR INTERNET ET RECUPERER LEUR URL

Pour pouvoir ajouter ces icônes sur votre blog, il faudra avoir leur URL (=adresse sur le web). Il faudra donc qu'elles soient dispo sur Internet. Soit vous les mettez chez un hébergeur d'images (ennuyeux à faire) mais l'astuce de Myrtille est d'insérer images dans un article Blogger que vous conservez à l'état de Brouillon (enregistrer mais ne pas publier l'article) (attention à ne jamais le supprimer). Puis ouvrez cet article brouillon, faites click droit sur chaque image, "Copier l'adresse du lien..." pour copier l'url de l'image.

cliquez pour agrandir

 4- REPERER L'ADRESSE DE DESTINATION DU LIEN

Par exemple, je souhaite que mon lien facebook pointe vers ma page "www.facebook.com/fluffynails" et que mon lien HC pointe vers la page "www.hellocoton.com/mapage/fluffynails". Ce sont les adresses de destination des liens que l'on va installer = là où vos visiteurs vont atterrir après avoir cliqué sur l'icône.

5- COPIER/COLLER LES ADRESSES DE DESTINATION ET LES URL DES ICONES DANS UN FICHIER TEXTE 

(ce n'est pas obligatoire mais c'est plus pratique pour la suite) 
Ouvrez un fichier texte ou Word, et pour chaque réseau social, collez l'adresse de destination du lien (étape 4) et collez l'URL de l'icône (étape 3) celle-ci se termine forcément par .png ou .jpg ou .gif 

Voici à quoi ressemble le mien (l'URL de l'icône peut être super longue, d'où l'utilité de l'avoir nommée selon le réseau social en étape 2, pour que la fin de l'URL soit "parlante")

fichier texte avec les liens de destination et les URL d’icônes pour faire les copier/coller facilement

6- AJOUTER UN WIDGET BLOGGER "XML/HTML"

Aller dans Blogger / "Mise en page" / "Ajouter un gadget" à l'endroit où vous voudrez installer vos liens et dans la fenêtre qui s'ouvre choisir "HTML/JAVASCRIPT" et mettre en titre quelque chose du genre "suivez-moi!"

Copier/Coller le code suivant en remplaçant ce qui est en majuscules dans les guillemets:

<a href="ADRESSE PAGE FB"><img src="URL ICONE FB" /></a> <a href="ADRESSE PAGE HC"><img src="URL ICONE HC" /></a> <a href="ADRESSE CHAINE YOUTUBE"><img src="URL ICONE YOUTUBE" /></a> <a href="ADRESSE PAGE INSTAGRAM"><img src="URL ICONE INSTAGRAM" /></a> <a href="ADRESSE PAGE PINTEREST"><img src="URL ICONE PINTEREST" /></a> <a href="ADRESSE PAGE TWITTER"><img src="URL ICONE TWITTER" /></a> <a href="ADRESSE PAGE TUMBLR"><img src="URL ICONE TUMBLR" /></a>

(avec autant de lignes que vous avez de réseaux sociaux) 
-Au lieu de ADRESSE PAGE FB mettez l'adresse de destination du lien
-Au lieu de URL ICONE FB mettez l'url de l'icone FB se terminant par .gif, .png, .jpg  puis faites-en de même pour tous les reseaux sociaux.
Vous remplirez facilement les adresses de destination et les URL d'icone grâce au fichier .txt ou .doc que vous aurez préparé (étape 5) et qui vous facilitera les copier/coller.

Ne pas oublier d'enregistrer pour valider le nouveau gadget et enregistrer votre nouvelle mise en page. Vous avez terminé! 

Cet article vous a été utile? Laissez-moi un commentaire et un lien vers votre blog pour qu'on puisse admirer le résultat!

Ci dessous les boutons que j'ai conçus pour mon blog, vous pouvez les utiliser aussi!