14 avr. 2014

geek // Comment insérer des icônes personnalisés vers les réseaux sociaux

En refaisant le design du blog, j'en ai profité pour rajouter des boutons vers mes comptes sur les réseaux sociaux. Tant qu'à faire, je me suis dit que j'allais en profiter pour faire un petit tuto sur le sujet. Je ne vais expliquer ici que dans le cas de Canalblog, puisque c'est mon hébergeur, mais la première et dernière étape sont sensiblement toujours les mêmes.

 

Télécharger vos icônes

J'ai trouvé mes icônes (à droite) sur le site Icons DB et plus particulièrement ici pour l'effet bois. Mais, en tapant dans votre moteur de recherche préféré, vous pourrez en trouver d'autres à foison. Une fois que vous avez décidé d'un modèle qui vous plaît, vous n'avez plus qu'à le télécharger sur votre ordinateur.

NOTE : choisissez plutôt une image au format PNG à un JPEG, il supportera les zones transparentes alors que dans l'autre cas, il y aura du blanc à la place. Ça peut être particulièrement intéressant lorsqu'une icône a des angles arrondis et que le fond est en couleur.

 

Récupérer leurs URL

Créez un nouveau message. Afin de télécharger votre icône sur votre blog, cliquez sur le bouton :
cbfile

Si tout se passe bien, vous verrez apparaître un lien portant le nom de votre image, quelque chose comme :

mon-icône-trop-bien

Pour afficher le code HTML de votre page, cliquez sur le bouton :

iconHTML

Vous aurez quelque chose du style :

<p><a href="URL_de_mon_icône">mon-icône-trop-bien-youpi</a></p>

Notez quelque part cette URL, vous en aurez besoin pour l'étape suivante.

 

Modifier le code HTML

Placez-vous à l'endroit du code où vous souhaitez mettre votre icône et ajouter la ligne suivante :

<a href="URL_de_ma_page_sur_le_réseaux_social">
    <img src="URL_de_mon_icône"
              style="border: 0px;"
              title="Suivez-moi sur nom_du_réseaux_social">
</a>

NOTE : La zone entre crochet qui suit title correspond à ce qui s'affichera lorsque le curseur sera placé sur l'icône, vous pouvez donc mettre ce qui vous fait plaisir.

Par contre, il y a une subtilité pour le flux RSS. À la place de l'URL de votre page, vous devez mettre :

<$BlogSiteFeedURL$>

 
SOURCES -
Quicksand (police)