Créer des icônes cliquables à la couleur de votre blog : mode d'emploi

Attention, je suis incapable de coder, soyons bien clairs. Du coup, quand j'arrive à faire un truc pas trop nul en bidouillant une mini-séquence de code super basique, je suis fière comme un pou. Mais si je peux le faire, n'importe qui peut le faire. Alors oui, il faudra modifier un peu de code HTML en suivant ce mode d'emploi, mais je vous promets que c'est hyper facile.

Le résultat, vous le voyez dans ma barre latérale, des icônes de médias sociaux, cliquables, à la couleur de mon blog. Il y a évidemment d'autres moyens d'y arriver, j'explique ici une méthode "pour les nuls"... dont je me suis servie.

Créer des icônes de la couleur de votre site

Commencez, évidemment, par copier le code de la couleur HEX principale de votre site. La mienne est un turquoise dont le code est : #42a8cb. Dans blogger, vous pouvez trouver ce code dans la partie "layout - advanced" de votre blog.

Avec ce code, vous allez sur le site Icons DB, très bien fait et facile d'utilisation. Il suffit de choisir les icônes dont vous avez besoin, de les transformer en collant le code couleur (sans le #).

Pour télécharger ces images, plusieurs solutions, soit un clic droit "Save Image As...". Soit, sous l'image, vous avez un nombre de choix de tailles et de formats de fichiers. Choisissez plutôt le format .png, si vous voulez une icône transparente (c'est-à-dire où on verra la couleur de fond derrière), soit en format .jpg si vous voulez un fond blanc.

Quand vos icônes sont créées, il s'agit de déterminer leur taille. J'ai choisi des icônes de 48 pixels de haut par 48 pixels de large, qui ne me semble ni trop envahissantes, ni trop invisibles, à vous de voir ce qui vous convient.

Quand vos images sont à la bonne taille, la partie "code" de l'opération arrive, n'ayez pas peur, tout va bien se passer.

Créer des images cliquables

Pour des images cliquables, il faut que vos images aient une adresse url. Pour ce faire, créer un article brouillon (on devrait toujours avoir un article brouillon pour de l'expérimentation du genre, c'est très pratique !) et y télécharger vos images. Sur blogger, même si non publiées sur votre blog, elles seront sur votre album Picasa, et vous pourrez donc trouver leur url.

Pour trouver votre album picasa, l'url sera la suivante :

https://plus.google.com/photos/+{votre nom d'utilisateur sur google +}/albums

Cliquez ensuite sur "Récemment ajoutées" et vous devriez retrouver les icônes que vous venez de télécharger sur votre brouillon.

Je vous conseille ensuite, avec un clic droit, d'ouvrir chaque image dans un nouvel onglet, ce qui vous permettra de faire des copier-coller facilités par la suite.

Ensuite, vous allez installer un nouveau widget "HTML/JavaScript" sur votre blog, et y coller le code suivant : 

<a href="l'url à laquelle vous souhaitez associer votre image"> <img src="l'url de votre image" width= "la largeur en pixels décidée pour votre image" height="la hauteur en pixels décidée pour votre image" border="si vous décidez d'une bordure autour de votre image"/></a>

Ce qui, pour mon icône de facebook, donne le code suivant :

Il vous suffit de procéder de la même manière pour les icônes suivantes. 

Si vous souhaitez un espace entre vos icônes, le code à coller est : &nbsp;

Si vous souhaitez aller à la ligne suivantes entre deux icônes, le code à coller est : <br/>

Voici par exemple le code final de mon widget.

A tout moment, en cliquant sur "Rich Text" en haut à droite du widget, vous pouvez voir le résultat. Il suffit de cliquer sur "Edit HTML" pour retrouver votre code à nouveau.

Et voilà, vous avez des icônes cliquables, de la couleur de votre blog. Et vous avez tapé du code tout seuls comme des grands, c'est pas mal non ?

J'espère que ce mode d'emploi vous sera utile. Je détaille d'autres outils pour le design de vos blogs dans cet article, et je vous propose plein d'autres modes d'emploi et pas à pas dans cette compilation.

Si vous n'êtes pas sur blogger, je ne peux pas vous aider, je ne connais pas les détails sur wordpress, mais la manip doit être similaire ! Et si vous êtes sur blogger, n'hésitez pas à me poser des questions en commentaire de cet article, je me fais un devoir de répondre à tout.