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)


    Bonjour! Je cherche à créer un bloc un peu comme le tien, avec les images que j'ai créées pour mes liens de réseaux sociaux... j'ai beau suivre tes explications, je ne comprends pas comment créer ce bloc et où le placer dans le code...mode quiche... pourrait tu m'expliquer, ou me montrer la partie de code? Merci d'avance!

    Posté par Faby71, 31 juil. 2014 à 21:11 | | Répondre
  • Bonsoir ! Merci pour ton article super intéressant ! par contre, en allant sur ton lien je ne retrouve pas l'icone pour Hellocoton effet bois ! Peux tu m'indiquer s'il te plait où je peux la retrouver ? Merci beaucoup

    Posté par Soso80, 21 févr. 2015 à 23:01 | | Répondre
    • Malheureusement, l'icône d'Hellocoton en effet bois n'existait pas, j'ai dû le créer moi même. Mais si jamais tu veux récupérer celui que j'ai fait pour ton site, sache qu'il n'y a pas de soucis ;) !

      Posté par TheShoeLessGirl, 01 mars 2015 à 17:47 | | Répondre
Nouveau commentaire