Après vous avoir expliqué comment ajouter un bouton Pin It (Pinterest) ou un Page Plugin Facebook à votre blog Blogger, aujourd'hui nous allons voir comment afficher des icônes menant vers les réseaux sociaux sur le côté de votre blog ou en bas de celui-ci.
Pour parvenir à intégrer ces boutons de réseaux sociaux, il y a plusieurs étapes à franchir :
- Choisir les icônes dont vous avez besoin : Facebook, Twitter, Instagram, Pinterest, il y en a pour tous les goûts !
- Mettre en ligne ces images quelque part pour les stocker.
- Demander à Blogger d'afficher les icônes tout en faisant un lien dessus pour qu'elles conduisent vos lecteurs à vos différents comptes sur les réseaux sociaux.
Je vais vous montrer comment faire dans cet article.
Etape 1 : choisir ses icônes de réseaux sociaux
Il existe des icônes de réseaux sociaux de styles très différents. Si vous ne savez pas créer ce type d'icônes vous-mêmes, voici 2 sources qui proposent des icônes gratuites au format circulaire ou carré.
- Le site Flat Icon - Sur Flat Icon, vous pouvez trouver des dizaines d'icônes de réseaux sociaux gratuites (et payantes). Vous pouvez soit chercher une icône individuellement en entrant le nom d'un réseau social précis, soit télécharger un pack d'icônes parmi tous ceux qui existent.
- Icônes circulaires créées par Vervex - Le pack peut être téléchargé sur Deviant Art (le bouton pour télécharger se trouve sous le visuel des icônes). Si ces icônes vous paraissent trop petites pour votre blog, vous pouvez à la place télécharger le pack Somacro (grandes icônes) et les redimensionner vous-mêmes à la taille souhaitée.
Après avoir téléchargé le fichier, dézippez-le (avec WinRar sur PC par exemple, avec un double clic dessus sur Mac). Vous allez obtenir une multitude d'icônes au format .png.
Si vous y touchez, pour les redimensionner par exemple, pensez à les réenregistrer en .png ou en .gif car ces formats ont l'énorme avantage de gérer la transparence tandis qu'un format .jpg par exemple vous mettra un fond blanc derrière l'icône, ce qui n'est pas forcément joli selon le design de votre blog.
Choisissez ensuite les icônes dont vous avez besoin. Pour mon exemple, je vais prendre Twitter, Facebook et Instagram. Vos icônes doivent être de la même taille. Pour plus de simplicité, renommez-les avec le nom du réseau social, tout en minuscules et sans espace comme je l'ai fait ici :
Etape 2 : mettre en ligne les icônes sur Blogger
Pour stocker nos icônes sur le web, nous allons devoir les mettre en ligne sur votre blog. C'est parti !
Uploader les icônes de réseaux sociaux
1. Cliquez sur le bouton "Nouvel Article" comme si vous vouliez rédiger un nouveau post. Vous pourrez supprimer ce brouillon d'article une fois la procédure terminée.
2. Cliquez sur le bouton "Image" comme lorsque vous insérez une photo sur votre blog.
3. Cliquez sur "Choisir les fichiers" et choisissez vos icônes sur votre disque dur. Elles sont alors uploadées sur votre blog, ce qui devrait ressembler à ça :
4. Sélectionnez les icônes mises en ligne puis cliquez sur le bouton bleu "Ajouter les images sélectionnées". Optez ensuite pour "aucun alignement" et pour les images dans leur "taille originale".
Vos images vont alors apparaître dans votre brouillon d'article, comme ici :
Créer des liens vers les réseaux sociaux
C'est très simple !
1. Sélectionnez la première image et cliquez sur le bouton "Associer" (juste à côté du bouton "Image" sur lequel vous avez cliqué pour insérer les icônes).
Dans le champ "Adresse web", entrez l'adresse du réseau social correspondant à l'image. Par exemple, dans mon cas, l'icône correspond à Instagram donc je mets l'adresse de mon compte Instagram. Cochez aussi la case "Ouvrir ce lien dans une nouvelle fenêtre". Ça permettra aux gens de rester sur votre blog même s'ils ouvrent en plus votre page sur les réseaux sociaux.
2. Faites la même manipulation pour créer un lien sur chaque icône de réseau social.
Etape 3 : Récupérer le code des boutons de réseaux sociaux
Sur la gauche de votre barre d'outils Blogger, vous devez voir un bouton "HTML". Cliquez dessus et ne paniquez pas en voyant du code ;)
Ce code contient plein d'informations : le lien de vos icônes, le lien de vos réseaux sociaux... et c'est exactement ce dont nous avons besoin !
Vous allez devoir personnaliser seulement une choses : ajoutez ce bout de code, avec le point-virgule :
A quel endroit ? Après chaque </a> que vous voyez, sauf le dernier. Ça permet de créer un petit espace entre les icônes, au lieu qu'elles soient toutes collées.
Ça devrait, à l'arrivée, ressembler à quelque chose comme ça (bien sûr, avec vos propres réseaux sociaux et vos propres liens d'images) :
Vous y êtes presque !
Etape 4 : créer un gadget Blogger avec les icônes
1. Copiez le code... et ouvrez un nouvel onglet, dans lequel vous allez retourner sur Blogger. Cette fois-ci, allez dans la rubrique "Mise en page" du menu (situé dans la colonne de gauche).
2. A l'endroit où vous souhaitez afficher vos icônes, cliquez sur "Ajouter un gadget". Dans mon exemple, nous allons les afficher sur le côté du blog.
3. Parmi les options qui s'affichent, choisissez "HTML/Javascript".
4. Vous avez juste à coller dans la partie "Contenu" le code que vous aviez copié et à enregistrer. Vous n'êtes pas obligé de mettre un titre (sauf si vous voulez afficher quelque chose au-dessus de vos icônes, par exemple "Suivez-moi sur les réseaux sociaux").
Si vous retournez sur votre blog, vous verrez les icônes s'afficher comme ceci :
En les survolant avec la souris, vous pourrez cliquer pour accéder au réseau social de votre choix. Vous pouvez bien sûr ajouter d'autres réseaux sociaux une fois que vous avez compris le principe ! J'espère qu'il vous aidera à afficher vos réseaux sociaux sur votre blog. Si vous avez des questions, n'hésitez pas à réagir dans les commentaires !
Vous pouvez aussi consulter mon article sur la police d'icônes Font Awesome, qui vous permet d'ajouter des icônes à l'intérieur de vos articles ou de vos titres pour améliorer la mise en page !
Bonjour,
Merci pour cet article, j’ai pu ajouter les icônes grâce à votre aide, je les ai téléchargé du site Icon Archive. Maintenant, est ce que je dois supprimer la page ou nous avons travailler ça?
Cordialement
Bonjour Wafa, oui la page peut être supprimée.
Merci infiniment pour cette aide precieuse!
De rien Christine, merci pour le message et très bon dimanche :)
Vraiment un grand merci pour un novice en la matière. Votre explication est très pratique et simpliste. Merci infiniment.
Mais si je peux me permettre de vous poser la question de savoir comment placer ces icônes réseaux à la fin de chaque article publié pour d’éventuels partages?
Merci de votre réponse
Bonjour Hervé, merci pour le commentaire ! Ici, ce sont des icônes plutôt destinées à promouvoir ses propres réseaux sociaux, j’ai fait un tutoriel distinct pour les boutons de partage. Ils ne fonctionnent pas pareil car ils doivent pouvoir récupérer automatiquement l’adresse de la page sur laquelle on se trouve :)
Bonjour,
Merci pour ce tuto très facile d’utilisation.
Cependant, j’ai pris un template payant et je n’arrive pas du tout à aligner en haut à droite mes icones de réseaux sociaux. J’aimerai changer celle de Snapchat par Facebook et rajouter une icone en forme de coeur qui ira en lien directement sur mon ancien blog. Votre système fonctionne mais soit c’est trop en haut du « premier menu » ou trop en bas du « premier menu ».
Avez-vous une solution à m’apporter avec de nouveaux codes si possible ?
Merci par avance,
Brunetta
Bonjour, malheureusement chaque thème est codé différemment, il faut donc positionner le code à l’endroit qui s’accorde avec votre thème et je ne peux pas « deviner » où c’est pour ma part ;) Comme c’est un thème payant, il ne faut pas hésiter à regarder s’il existe une documentation ou à contacter le support technique car je pense que remplacer Snapchat par Facebook doit déjà être une possibilité prévue par le thème !
impossible d’associer un lien à une image, il cré le lien à côté
Bonjour, pour commencer ;)
Il faut cliquer sur l’image, puis sur le bouton de création d’un lien pour que celui-ci se fasse bien sur l’image.
C’est vraiment super d’avoir partagé ces infos! Cela m’a été très utile! Merci beaucoup!
Merci pour le commentaire Ana-Belen, contente d’avoir pu aider.
Hello
Je viens tout juste de débuter et ton article m’a beaucoup aidé.
Je tenais à te remercier :)
Bises
Merci d’avoir pris le temps de laisser un petit message sympa !
Merciiii Merci beaucoup pour ce super article! Il m’a été très utile pour ajouter les icônes réseaux sociaux!Mon blog pas a pas va etre plus joli!
Merci d’avoir pris le temps de poster un petit message !
je suis débutant en la matière et j’aimerais beaucoup un coup de main de la part d’expert comme vous; j’adore tout ce qui est informatique mais je maitrise pas assez le domaine, si vous pouvez m’aidez j’en serai ravie. merci
Bonjour David, je propose des tutoriels mais je ne peux malheureusement pas faire les choses à la place des internautes. En revanche, s’il y a des questions en lien avec un article, je peux essayer d’y répondre !
C’était pas mon intention de te laisser faire a ma place tout ce dont j’ai besoin c’est d’un tutoriel complet pour la structure et la configuration d’un blog.
Il n’y a pas de structure préconçue, chacun est libre de créer les rubriques de son choix, d’utiliser la plateforme de son choix :)
Salut Marlène, je viens de réaliser ce tuto nickel sauf que lorsque je clique sur les icônes, ça ne s’ouvre pas dans une nouvelle fenêtre alors que j’ai bien coché la case. Merci par avance :o)
Bonjour, sans voir le code de ton site je ne peux pas voir où il te manque un élément. Il doit te manquer une partie
target="_blank"dans ton code…* Edit : suite à ton autre message, il manque effectivement
target="_blank"dans tous tes liens donc je te conseille de l’ajouter ou de recommencer le tuto car il te manque un bout ;)Bonjour Marlène,
Merci beaucoup pour ce super article! Il m’a été très utile pour ajouter les icônes réseaux sociaux à mon blog, en tant que débutante je me lance dans l’aventure du blogging et j’ai encore pleins de choses à apprendre. Jusque-là ton blog a été une mine d’or pour moi avec des explications super claires… félicitations!
Hello, merci beaucoup pour ton message ! S’il y a des questions que tu poses encore, n’hésite pas à m’envoyer un mail, ça me donne parfois de nouvelles idées d’articles si la réponse peut aider le plus grand nombre :)
Bonsoir,
Cela fait quelques temps que je parcours le net pour trouver ce genre de tuto et BINGO je suis tombée sur le tien qui me parait clair comme de l’eau de roche! Seulement mon blog (en création) n’a pas l’air d’aimer! lol Pourrais-tu y jeter un oeil et me dire où je me trompe car cela fait 5 fois que je recommence et rien n’y fait.
Je te remercie beaucoup par avance.
Bonjour Aline, qu’est-ce qui te gêne dans la présentation actuelle ? Chez moi ça s’affiche bien, les icônes sont juste un peu grosses pour tenir sur une même ligne mais c’est tout :)
Hello Marlène, pas facile de se remettre au petit blog familial. Heureusement, tu es là! merci !!!!
Merci Sophie ! Progresser à petits pas, c’est bien aussi, surtout pour un blog « loisir » ;)
Bonjour, merci beaucoup pour les explications, suivies à la lettre !
Un problème cependant , je n’arrive pas a rendre plus petits mes icônes , et à les séparer (ils sont collés) ..je les veux plus petits , plus discrets , merci encore !
Bonjour Christophe, pour avoir des icônes de petite taille il faut mettre en ligne des icônes de petite taille, ça ne se passe pas dans le code mais en amont, il faut juste redimensionner les icônes au format souhaité avant de les mettre en ligne (via Photoshop, Photofiltre ou autre logiciel d’image). Pour les séparer, on peut soit forcer un espace en mettant le code
Bonjour !
J’ai beau réduire la taille de mes images, elles sont toujours énormes une fois que je les mets, c’est bizarre… Du coup tant pis ^^ mais merci quand même pour cet article :)
Hello, comment procèdes-tu pour les redimensionner ? Tes images font quel format ?
Bonjour Marlène,
Je profite de ce message pour te remercier pour ce site et tous tes conseils.Je viens de créer mon blog et tu m’as aidé pour pas mal de choses même si je pars de très très loin et que je ne comprends pas tout, j’ai réussi certaines choses.
En ce moment je piétine pour mes icônes de réseaux sociaux.Je viens de lire ton article et çà me parait clair mais j’ai une problématique un peu différente, mes icônes sont déjà apparentes sur mon thème et j’aimerai bien les utiliser et non pas en installer d’autres.
J’aimerai donc relier mes icônes à mes propres liens et non ceux formatés par le thème.Je ne sais pas si je suis claire et si oui, si c’est possible?
Je te remercie sincèrement par avance si tu as le temps de me répondre car je piétine et commence à me décourager!
Belle journée.
Merci de ton commentaire ! Concrètement, il faut à mon avis que tu ailles voir dans Thème > Modifier le code HTML et que tu cherches la partie du code qui correspond aux icônes. Je vois dans ton code que c’est une partie qui commence par
<!--Social Icons-->.Il y a des lignes avec
<a href="#">. A la place du #, il faut indiquer le lien du réseau social correspondant.Super!ça marche!Merci beaucoup Marlène, j’ai un peu ramé à le trouver mais c’est fait!
C’est intéressant en plus, j’aimerai bien savoir faire plus de choses mais petit à petit ..
Je te souhaite une belle journée.A bientôt!
Bonjour Marlène,
Suite à la réponse que tu m’avais envoyée il y a 1 mois pour les icônes de réseaux sociaux sur mon blog, tout allait très bien, j’avais mes icônes et lorsque je cliquais dessus j’arrivais sur mes comptes; et là patatras depuis aujourd’hui mes icônes twitter et insta n’apparaissent plus sur le blog alors que je n’ai touché à rien !
Ces lignes apparaissent toujours dans mon thème :
J’avoue je craque, j’ai déja tellement de mal à personnaliser mon blog avec mes petites connaissances , si en plus les choses qui marches disparaissent !
Est ce que tu peux m’aider s’il te plait ?
Désolée pour le message de sos :)
Hello, je pense qu’il y a des bouts de code qui ont sauté car je ne vois plus les balises <ul> et </ul>. Tu as aussi une balise « style » vide qui se balade dans ta balise body… et surtout, tu as écrit :
relF='stylesheet'au lieu derel='stylesheet'sur la ligne qui concerne tes icônes Font Awesome. Je pense que c’est pour ça qu’elles n’apparaissent plus.Un GRAND MERCI Marlène, je ne sais pas comment ce fichu F s’est glissé là par hasard mais j’ai retrouvé mes icônes !
Si seulement je pouvais avoir le quart de tes connaissances pour gérer mon blog . :) frustration quand tu nous tiens !
Merci merci de prendre de ton temps pour nous aider et pour la rapidité de ta réponse, je vais aller me coucher sereinement :)
Ca viendra, moi aussi à mes débuts je galérais pendant des après-midis entières sur 3 lignes de code ^^ C’est en faisant ça qu’on apprend !
Help!!! SOS!! Hier j’ai réussi à installer les icônes d’Instagram et Facebook… tout était correct. Puis j’ai eu un moment d’hésitation et j’ai supprimé les « codes » transcrit dans JavaScript me disant que je recommencerais aujourd’hui en y ajoutant aussi Pinterest. Mais là plus rien ne va: quand je mets l’icône d’Instagram et que je clique sur « associer » apparaît un rectangle qui demande de choisir l’alignement et la taille de l’image…je choisis et clique. Un code apparaît…et je ne peux plus suivre les étapes suivantes que vous écrivez! Je crois que j’ai fait une gaffe hier en supprimant tout…Que dois-je faire maintenant? Merci
Hello Johanne, je ne vois pas vraiment de problème ;) Le code qui apparaît doit correspondre au code de l’icône d’Instagram… Il faudrait donc suivre la même manip pour afficher le code des autres icônes, puis copier le tout dans un gadget Blogger.
Merci! J’ai finalement trouvé l’erreur que je faisais et j’ai réussi!
Salut, j’ai coché la case « Ouvrir le lien dans une nouvelle fenêtre » mais sa marche pas, quand je clique sa redirige le site sur le réseaux sociaux
Hello Adrien, je vois que le problème a été résolu ! Sur Blogger il y a souvent des histoires de cache, la « vieille » version de la page est conservée en mémoire et il faut vider le cache pour que les modifications que l’on fait soient visibles sur le blog.
Salut j’ai adorer ton article car il m’a vachement aidé.
Cela fait un moment que je te suis et si tu veux tu pourrais venir visiter mon blog.
Sinon je voulais te demander sur quel plate-forme es tu pour le blog.
Hello Nathan, contente de t’avoir aidé (j’ai supprimé le lien dans ton commentaire car il apparaît déjà sur ton nom) ! Tu devrais ajouter une page « A propos » sur ton blog, histoire qu’on en sache un peu plus sur toi ;)
Pour ma part je suis sur WordPress.org.
Merci pour ces super explications !
De rien, merci pour le commentaire !
Bonjour, je suis désolé j’ai essayer de faire toutes les étapes que tu as marquer mais je n’ai que les icônes qui sont apparus mais c’est pas mes comptes « instagram et facebook » qui apparaissent quand je clique dessus. Merci si vous pouvez m’aider.
Bonjour Cinthia, si tu as mis l’adresse de mes comptes, c’est normal que ce soient mes comptes qui apparaissent sur ton blog ;) Tu as juste recopié mon code sans lire l’explication, il faut le personnaliser avec tes propres liens.
J’ai vraiment tout essayer mais je n’ai absolument pas compris ce qu’il fallait remplacer et par quoi. Je suis désole mais je n’ai pas compris l’explication du code…
A la place du lien de mes comptes, tu mets le lien de tes comptes. Au lieu d’écrire http://www.instagram.com/notuxedo, tu mets l’adresse de ton compte à toi par exemple. Et il faut mettre les images sur ton propre blog comme expliqué dans le tuto, là tu as juste recopié mes images, avec le lien de mon blog…
Relis ça à tête reposée, étape par étape ;)
Génial! Merci beaucoup !
Je tenais à vous remercier pour vos explications très claires. Je débute dans la blogosphère et ne savais pas du tout comment insérer l’icône Facebook sur mon blog. Grâce à vous l’insurmontable est devenu réalisable. Merci.
Merci Gisèle et bravo pour les débuts dans la blogosphère !
Je suis en train de créer et configurer mon blog et autant te dire que ton site est une mine d’infos génial, merci.
Sophie
Merci Sophie ! Bonne journée.
Merci! Bouclé en 10 min! Votre blog est une vraie mine d’informations, je le consulte dès que j’ai besoin de modifier mon blog ;)
J’ai centré les icônes réseaux en suivant vos instructions dans les commentaires.
Pouvez-vous m’aider pour justifier le texte du gadget « bienvenue »?
Merci d’avance!
Bonjour Céline, vous pouvez ajouter ce code à votre thème, au niveau de la partie « style » :
div#Text1.widget.Text {text-align:justify}Bonsoir et un grand merci pour ce tuto, j’ai suivi à la lettre vos conseils et ça s’est bien affiché du premier coup. Ça a quand même plus de classe que des blocs HTML séparés pour chaque réseau ! Blogger offre moins de possibilités que WordPress, mais quand on a commencé par ça, migrer ensuite semble compliqué sans perdre ses articles. Alors découvrir ces tutos pour améliorer les choses, c’est un vrai plus :-)
Merci pour le petit message !
Merci Marlène, 5 minutes passées sur ton site et un avis déjà plus que concluant lorsque tes explications ci-dessus nous auront permis d’atteindre notre but en quelques minutes.
Au delà d’être efficace ! Du coup on va fouiller encore bien davantage parmi tes articles, mon petit doigt me dit que je vais faire de sublimes découvertes.
Bonne soirée,
Merci beaucoup Sébastien et bienvenue ici !
Bonjour !
Merci beaucoup pour cet article ! Je débute mon blog et il m’a aidé !
Je vais le recommander ! :)
Bonne journée !
Merci !
Aaaaah!!! Je n’y arrive pas! Je ne trouve pas mon erreur et je ne m’en sors pas. Rien ne s’affiche. J’ai essayé de changer https en http, ça ne marche pas non plus.
Si quelqu’un peut m’aider? Je suis niveau archi-débutant.
Merci d’avance
Edit: J’ai trouvé, c’était un problème de modèle. J’étais en affichage dynamique et il faut être en affichage simple. Désolée et merci pour ce super tutoriel.
De rien ! L’affichage dynamique offre moins de possibilités en règle générale.
Merci pour aide
Ton article est super bien expliqué, pour une débutante comme moi
ça a marché du premier coup
Bonne année et à bientôt sur ton site
Bonne année également !
Bonjour Marlene,
Ça y est c’est fait je suis arrivée à mettre mes icônes de réseaux sociaux. J’avoue que j’en ai transpiré.
Pour me faciliter la tache, j’ai ouvert une page Word et j’ai copié ton modèle puis je l’est transformée tranquilement.
Ça marche trop contente!!!
J’ai fait un petit lien de ton blog sur mon blog, car vraiment t’est tutos sont formidable.
A bientôt elodie
Merci Elodie ! Par la suite, mieux vaut utiliser un vrai éditeur de code (comme Notepad++, le Bloc-Notes, etc) plutôt que Word… car dans certains cas, Word rajoute des « codes indésirables » qui peuvent provoquer des erreurs :)
merci pour cet info
A bientôt elodie
Merci infiniment pour votre aide, je lance mon blog et cela m’a bien aidé ! Merci merci…
De rien… et bienvenue dans la blogosphère :)
MERCI!!! MERCI!!! MERCI!!!
Génial et simple comme explications :D
Quel enthousiasme ! ;) De rien !
Bonjour et merci pour vos conseils. Cette procedure est elle valable egalement pour dynamic wiew? Et sinon, savez vous comment faire. Bien cordialement, Danielle
Bonjour, tant que le modèle choisi permet d’afficher des gadgets, la procédure devrait fonctionner sans problème !
Merci de votre reponse. je viens d essayer, cela ne fonctionne pas. Dommage! http://olivbusua.blogspot.com/ Comment faire avec ce type de modele?
Il n’y a aucune zone pour insérer des gadgets… donc par définition aucune zone pour insérer les icônes de réseaux sociaux :/ Un changement de modèle ? ;)
Merci Marlene pour votre reactivite. 3 boutons de partage s’affiche en pieds de page des articles. Je n’arrive pas a en ajouter d’autre. Les affichages dynamiques peuvent etre modifies par code css, mais, Gosh! Lequel? Qu’entendez vous par changement de modeles? Plus de dynamic wiew? Bonne soiree et encore merci. (et sorry pour l’absence d’accent, je navigue en qwerty).
Bonsoir, pour que les icônes s’affichent il faut soit savoir se repérer dans le code et trouver soi-même un endroit où les placer (dont le pied de page), soit avoir un modèle qui prévoit l’affichage de gadgets. Or, celui que vous avez choisi ne semble pas inclure d’emplacement pour des gadgets (en tout cas, je ne vois pas d’espace libre sur mon écran !). C’est pour cette raison que vous êtes bloquée…
Merci beaucoup pour ce petit tutoriel parfaitement bien expliqué ! Mes boutons de réseaux sont enfin parfaits ! :)
Ninon
Effectivement :) Bravo !
Franchement.. merci infiniment !
Ton tuto est très bien expliqué et c’est grâce à toi que j’ai réussi à faire ces icônes !
Bien joué ! :)
Merci beaucoup pour ce pas à pas très simple et efficace!
Merci à toi et bon week-end !
Bravo, et merci pour ce tutoriel extrêmement clair, pédagogique et précis. J’ai pu oser faire des modifications sur mon blog que je n’osais pas faire jusqu’à présent.
Continuez !
Alexandre
Merci ! Bon dimanche :)
MON DIEU MERCI !! Je n’y croyais plus lol mais là j’ai réussi, certes des codes mais au final pas si compliqué que ça !! Merciiiiiiii :D
Bien joué !
Ok, merci beaucoup Marlène!
Bonjour,
j’ai trouvé vos explications concernant l’ajout des icônes menant sur les réseaux sociaux, j’ai donc essayé d’ajouter l’icône de Facebook sur mon blog culinaire (sur Blogger), vos explications étant très claires, cela a marché et le lien menant vers Facebook fonctionne, cependant je viens de m’apercevoir que cela a complètement modifié le contenu de mes articles, c’est à dire, ils continuent à s’afficher normalement sur mon site, mais quand j’essaye d’accéder à mes articles dans « Conception », tous les articles ont été remplacés par un langage « codé », et toutes les photos ont disparues également. Je ne peux plus corriger ni écrire de nouveaux articles car je n’ai plus accès aux fonctions normales pour les rédiger. Je suis en panique et je voudrai récupérer le contenu normal de mes articles, mais je n’y connais rien en matière des codes etc, j’espère que vous pourrez m’aider. D’avance merci pour vos conseils;
Cordialement
Angie
Hello Angie, ce genre de problème vient souvent d’un mauvais copier-coller où on oublie un détail (fermer une parenthèse, etc), ça peut rendre la page toute blanche ou afficher du code. C’est pour ça qu’avant toute modification du code de son blog, on conseille toujours de faire une sauvegarde. Ça permet, en cas de problème d’affichage, de revenir en arrière !
Merci pour cet article, j’avais déjà lu un autre article pour mettre les boutons réseaux sociaux mais je n’avais absolument rien compris et ça fait un certain temps que j’essaye à les mettre sur mon blog. Grâce à toi, j’ai enfin réussi alors merci beaucoup.
Merci de ton commentaire !
MAGNIFIQUE!!!
ça fonctionne! Je n’en reviens pas! Vous expliquez magnifiquement bien! Je ne connais absolument rien à la programmation et j’ai réussi!
Je vous remercie infiniment!
Kathy
Merci Kathy et bravo d’avoir réussi :)
Juste, mais … 1000 merci !!!
Je suis pas familière de l’HTML, mais j’ai réussi direct. Technique très simple et expliquée avec efficacité !
Bien joué !
Chouette article très utile ?
Je cherche comment centrer les îcones si tu sais je suis preneuse!
Hello, bien sûr !
1. Avant le premier
<a href=de ta liste d’icônes, tu marques<div style="text-align:center">2. Ensuite, à la toute fin du code de tes icônes, après le dernier
</a>, tu marques</div>Merci beaucoup pour ce tuto ! Je n’y connais rien du tout et ça a été super simple !!
Ça rend quelque chose de beaucoup plus joli sur blogger !
Bravo, je suis allée voir ton blog, ça rend bien :)
mondieumondieu, mais ça marche! Pour la première fois de ma vie j’ai touché au code et j’ai même réussi, l’icône est installée! (un bon vieux mal de tête aussi )
Bon, je ne suis pas sortie des ronces pour autant, il faut que je recommence toutes les opérations pour installer les autres icônes, mais ça ne fait rien je suis très fière (cyberquiche power!)
Merci pour ce tuto clair et bien détaillé, vraiment merci, je n’aurais jamais cru que j’allais y arriver toute seule!
Bravissimo !
Bonjour !
J’ai laissé un commentaire hier te remerciant pour ces supers conseils !
Seulement, aujourd’hui je remarque un problème… Comment rendre ces icônes responsives ??? Je m’explique : sur la version mobile, mes icônes apparaissent vraiment très gros (par rapport au reste du blog) et cela m’embête un peu… Aurais tu une solution, un bout de code peut-être ? Qui permettrait que mes icônes s’adaptent à la device ?
Si tu veux regarder depuis un mobile : http://www.crossedfingers.fr (et si tu as des avis, par la même occasion, j’en serai ravie :D)
Merci d’avance pour ta réponse et surtout pour ces tutos vraiment bien expliqués, et très clair !
Crossedfingers
C’est parce que dans ton design actuel, tu as une ligne qui spécifie que toutes les images de la sidebar (= la colonne sur le côté de ton blog) doivent faire 226 pixels de large… donc forcément, quand ton design se redimensionne et que la colonne prend toute la largeur de l’écran, l’image prend aussi toute la largeur.
C’est une ligne qui ressemble à ça :
.sidebar img {width: 226px;
Dans le code html du design je trouve cela :
.sidebar img {
width: 100%;
Peut-être que je dois remplacer ce 100% par « auto » ? Pour que cela s’adapte?.. Ca m’embête vraiment parce que je ne trouve pas ça harmonieux du tout de ne pas avoir, depuis mon mobile, mes icônes alignés, et de petite taille sous ma photo lol :p
J’essaye en vain de trouver un petit code qui les rendrait responsive, mais n’y connaissant rien, c’est un peu compliqué ^^
Merci de ta réponse en tout cas !
Bonne journée
Crossedfingers
Tu pourrais retirer la ligne « width:100% » mais ça risque de jouer sur d’autres images. Il faut tester ;) Je ne peux pas vraiment te donner toutes les possibilités sans avoir vraiment regardé ton code de près.
IMPECC ! Je crée mon blog aujourd’hui et j’installe déjà des boutons ! :-))
Merci pour ce tuto clair ,net et précis.
Bienvenue dans la blogosphère alors ! :)
Yesss! ENFIN une réponse à ce que je cherche depuis un moment !!!! Bon, j’ai pas encore testé car il se fait tard, du moins pour moi … A suivre demain, encore merci !
J’espère que ça fonctionnera !
Waou!!! Merci beaucoup j’ai réussi!!! Et j’ai beaucoup cherché et je me suis beaucoup perdu avant de trouver enfin ce site où c’est si bien expliqué!!! Demi
Merci et félicitations pour la réussite ;)
MERCI !!!! Cela fait des semaines que je cherchais par mes propres moyens de trouver en vain ! Et là tu es arrivé ! Merci beaucoup car maintenant c’est fait et j’ai même rajouté en tout petit Hellocoton, au lieu de leur grosse bannière qu’ils proposent !
Ah ma pauvre tu avais bien galérė dis donc, bravo d’avoir réussi à faire ce que tu voulais :)
Merci pour ce tuto très simple et pratique! ^^
De rien ! Merci pour le commentaire :)
Merci beaucoup pour tes explications!! ça m’as énormément aidé et puis c’est très claire et facil! Encore merci!
De rien, tant mieux si tu as réussi à suivre le tutoriel :)
Coucou,
Merci après des mois de galère, j’ai enfin réussi!
Ah super, contente de t’avoir débloquée !
Tout d’abord merci beaucoup de partager cette astuce, j’ai découvert ton blog en cherchant comment faire ça.
J’ai tout suivi à la lettre mais je n’y arrive pas.. Et je ne sais pas où se trouve l’erreur..
Je me retrouve avec le code suivant:
<a href= »//instagram.com/enchantednature/“ » title= »“be » rel= »nofollow »></a>
Cependant, l’image ne s’affiche pas sur mon blog et lorsque j’appuie dessus ça me revoit sur mon blog et non sur mon Instagram..
Je viens tout juste de démarrer mon blog il y a quelques jours donc je ne suis pas très calée..
Merci :)
Bonsoir, je viens de jeter un oeil à ton blog et il y a quelques erreurs dans ton code.
– Déjà, l’adresse de l’image n’est pas la bonne, celle que tu as mise ne renvoie à aucune image. Donc soit tu as supprimé totalement l’image de tes albums photo entre temps, soit il y a eu un souci au moment de recopier ce lien.
– Ensuite, tu as à chaque fois deux guillemets au lieu d’un seul. Par exemple, au lieu d’avoir width="40px", tu as width=""40px"".
– Tu as aussi des guillemets qui ne sont pas fermés, par exemple le titre de ton lien qui est écrit comme ça : title=""be" modest="" &="" natural="" sur="" instagram“="". Tu devrais avoir quelque chose du style title="Be Modest & Natural sur Instagram".
Donc c’est normal que ça ne marche pas ;) Commence par essayer de récupérer le bon lien de ton icône Instagram et par corriger ces petites erreurs, n’hésite pas à me dire s’il y a une étape où tu rames !
Oh ça y est j’ai réussi !!! Merci beaucoup :)
J’ai vu que tu as dit plus haut pour centrer l’image et je l’ai fait, ça fonctionne ;)
Merci à toi et bonne soirée :)
ça marche!! merci beaucoup, ton blog est une vraie mine d’or, bravo!
Génial si ça fonctionne, merci pour le commentaire !
Enfin un tuto clair, net et précis ! J’ai enfin réussi à faire quelque chose après plusieurs heures d’énervement alors merci beaucoup !
Par contre maintenant j’aimerais aligner mes p’tites îcones mais je n’y arrive pas. Enfaite j’imagine qu’on doit mettre quelque chose comme « text-align: center » quelque part mais je ne trouve pas où… Peux-tu m’éclairer stp ?
Bien sûr ! Je te conseille d’utiliser une balise div à l’intérieur du widget que tu as créé, en l’ouvrant juste avant les liens et en la fermant après :
Bonjour et vraiment merci pour cet article car ça m’a beaucoup aidé! Je viens tout juste de commencer mon blog donc je fais tout pour que la mise en page soit parfaite :)
Néanmoins, j’ai en tout 5 icônes et seulement 3 se montrent. Les icônes sont alignées, j’ai vérifié plusieurs fois et il n’y a pas d’erreur dans le code donc je voulais savoir quel était le problème
Merci d’avance pour ta réponse continue avec ton blog c’est super!
Je vois bien 5 icônes pour ma part donc je pense que tu as un problème de cache : en gros, ton navigateur a mémorisé l’ancienne version de la page qui devait avoir 3 icônes et ne t’affiche pas les deux dernières. Sur PC, on peut vider le cache facilement en faisant Ctrl + F5 quand on est sur une page web.
En revanche, ton icône Instagram apparaît deux fois (tu as dû copier deux fois le même code d’image et oublier le code de Tumblr).
Effectivement sur mon portable j’arrive à toutes les voir et merci pour la petite faute des deux icônes!
Waouh merci tu m’as été d’une grande aide j’ai pu enfin mette les icones de réseaux sociaux pour mon blog. Les explications sur d’autres sites et blogs n’étaient pas claire mais grâce à toi j’ai compris du premier coup! Un énorme merci! :D
Mais de rien ! Je suis toujours contente quand on vient me dire que ça marche ;)
Merci beaucoup ! C’est un article que j’ajoute directement aux favoris !!! :) Super simple :p
Merci d’avoir pris le temps de laisser un commentaire ! J’espère que ça t’aidera dans la personnalisation de ton blog !
D’une simplicité assez révoltante x)
Un grand merci ! :D
Par contre juste pour savoir comment on les centre ? On rajoute juste : style= »text-align: center » ?
Au tout début du code, avant le premier
<a href, tu ajoutes<div style="text-align:center">. Et à la toute fin du code, après le dernier</a>, tu ajoutes</div>super cette article, tu me sauves la vie, car j’avais fait ça il y a longtemps et en voulant apporter du changement à mon blog j’ai tout effacés :-(
Oops :) Je crois qu’on l’a tous vécu un jour ou l’autre ! A force de faire des changements, on supprime une ligne qu’il ne fallait pas supprimer :)
Bonjour,
Tu viens tout simplement d’illuminer ma journée ! Depuis que j’ai créé mon blog que je fouine un peu partout pour trouver la solution et miracle te voilà ! En plus expliqué étape par étape, c’est parfait !
Merci énormément !
Joh la Maman Fatale !
J’adore le nom de ton blog ;) Contente d’avoir pu t’aider !
Merci beaucoup ! ça fait plaisir je me suis creuser les méninges et j’avais que ça en tête !
Je débute à peine donc tes articles tutoriels sont très intéressants ! Même les conseils etc… Je dévore ton onglet conseil !
Bonjour,
Mille mercis pour cet article hyper clair et simple à appliquer. Il m’a permi de mettre de jolies icônes de tous mes réseaux sociaux !
Et ça marche aussi pour l’icône du mail : il suffit de remplacer l’url du réseau social par « mailto:adresse mail du blog » !
Encore merci !
Mathilde du blog No Face No Name
Tu as raison, au moins ça permet de mettre une jolie icône en accord avec le reste du design ! Merci de ton commentaire :)
Génial ! merci beaucoup ! moi qui n’y connait rien en code j’ai tout compris et ça a marché du premier coup !
Bonjour,
Merci beaucoup pour ces explications. J’ai réussi à installer mes icônes sans problèmes (facebook,twitter,instagram,youtube) mais je n’arrive pas à les mettre côte à côte. Elles sont très distancées les unes de autres et je ne trouve pas comment modifier ça. Sauriez-vous comment je dois procéder pour pouvoir aligner mes icônes ?
Je vous remercie d’avance pour votre aide.
Sidjie
Je suis allée jeter un oeil sur ton blog. J’ai l’impression que tu as mis une image par widget au lieu de tout copier dans le même widget… Ça expliquerait pourquoi ça s’affiche comme ça.
Et bien c’est super, j’ai réglé le problème et c’est comme je le souhaitais à présent. Effectivement, il suffisait juste de tout coller dans le même widget :-)Un tout grand merci.
Super cet article !
Y a-t-il un moyen de les customiser, par exemple de changer leur apparence au passage de la souris ? Si oui pourrais-tu me dire comment faire car je galère comme pas possible >< Merci !
Tu veux complètement changer l’icône (ex : couleur différente) ou juste créer un effet dessus (par exemple, qu’elle soit un peu plus claire au survol) ? Si tu cherches à utiliser 2 images, tu commences par mettre en ligne ta deuxième image (celle qui s’affichera au passage de la souris) comme tu l’as fait pour la première icône. Et ensuite, au lieu d’utiliser le code que crée Blogger, tu utilises un code de ce type :
<a href="A" title="Nom de ton blog (sur) nom du réseau social" target="_blank"><img src="B" alt="Nom du réseau social" width="Largeur de l'icône en pixels" height="Hauteur de l'icône en pixels" onmouseover="this.src='C'" onmouseout="this.src='B'" /></a>En remplaçant :
A- Lien de ton compte sur le réseau social.
B- Lien de l’icône principale (celle qui sera toujours visible).
C- Lien de l’icône qu’on verra au survol.
Ce code dit « quand la souris est sur l’image » (mouse/over = souris/dessus), tu affiches la deuxième version de l’icône… et « quand la souris sort de l’image » (mouse/out = souris/en dehors), tu affiches l’icône principale. Il y a une autre méthode avec du code CSS, pratique pour les effets mais plus compliquée pour un débutant ! Je ne sais pas si l’explication est claire, c’est un peu long à expliquer dans un commentaire :)