Lifestyle
Ajouter des icônes de Réseaux Sociaux sur son blog
mercredi, août 05, 2015
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).
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.
Choisissez le gadget "HTML/JavaScript", copiez le code que vous avez précédemment créé et cliquez sur Enregistrer.
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 !
24 commentaires
Ahhh merci pour ces astuces ! ♥
RépondreSupprimerMoi qui compte refaire la mise en page de mon blog, ça va m'être super pratique :D
Bisous, Jessica. http://jessi-caa.blogspot.fr/
Hyper simple et intéressant !
RépondreSupprimerJe 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
merci pour ses conseils, les icônes sont super jolis en plus!
RépondreSupprimerhttp://la-petite-vie-de-marie.blogspot.fr/
Super cet article c'est vraiment bien expliquer :) merci
RépondreSupprimerUn 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épondreSupprimerMerci pour l'astuce ! C'est tellement simple que je n'avais jamais penser à faire comme ça ! xD
RépondreSupprimerMerci encore !!
mille merci ca m'a beaucoup aidé pour mon blog
RépondreSupprimerhttp://scraptoosimple.blogspot.fr/
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épondreSupprimerJe l'ai fait sur le site PicMonkey =)
SupprimerMerci, ça m'a permis de "réparer" mon blog :) http://lafilledesetoilesfilantes.blogspot.fr/
RépondreSupprimerMerci 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épondreSupprimerMerci beaucoup ♥!!
RépondreSupprimerJe viens de le faire sur mon nouveau blog ! Merci merci j'étais parti trop loin ♥
RépondreSupprimerUn grand merci :)
RépondreSupprimerMerci pour cet article qui m'a beaucoup aidée :)
RépondreSupprimerCoucou 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
RépondreSupprimersi tu veux voir ce que ça donne, c'est ici: http://palmdeb.blogspot.fr
Super article j'ai réussi du premier coup en 5 minutes ! Merci beaucoup !!
RépondreSupprimerMerci pour cet article très détaillé qui m'a permis de réussir la manip du premier coup également !! :D
RépondreSupprimerMerci pour cet article ça m'a sauvé !!
RépondreSupprimerCoucou Pauline, j'adore ton blog et ton tuto à l'air vraiment cool. Je pense vraiment que tu aides du monde. Je vais le tester de suite car j'aimerai plus personnalisé mon blog car il est hyper basique. N'hésite pas à passer sur mon blog et me dire ce que tu en pense et je dis oui à de nouveaux tutos. Bisous
RépondreSupprimerbonjour , je viens juste de creér mon blog , j'ai choisis un theme que j'ai télécharger directement sur internet , il y a les logo facebook , insta ... mais je n'arrive pas a accéder a ceux ci pour les associer , aurais tu une idée de comment faire ??? je beugggg ...merci et félicitation pour ton blog ;)
RépondreSupprimerTu as téléchargé ton modèle sur quel site ?
SupprimerJe t'invite à lire cet article, j'y explique comment installer un thème blogger téléchargé de A à Z : http://www.paulinedress.fr/2017/08/installer-un-template-design-sur.html
Sinon, tu n'as pas de doc de documentation avec le template ? Souvent c'est dans le code html qu'il faut aller changer les liens vers tes propres réseaux sociaux !
Super, tu expliques très bien et c'est très clair, bel article ! Ca m'a bien servit au passage ;)
RépondreSupprimerMerci beaucoup, cet article m'a sauvé la vie !
RépondreSupprimer