Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Ajouter un widget Instagram sur son blog Blogger

J'aime la photo, j'aime prendre des photos. Que ce soit des portraits, des photos de recettes, ou même de simples clichés du quotidien. L'idée de garder une trace d'un détail, d'un instant, me plait. C'est pour cela que j'aime Instagram.

C'est devenu si facile de prendre des photos de tout et de rien et de les partager avec le monde. On peut même les partager sur son blog ! Et oui, vous allez voir c'est super simple de partager ses clichés Instagram sur son Blogger ;)

Ajouter un widget Instagram sur son blog Blogger

Introduction

Pour créer un widget Instagram, rien de plus simple. Pour mon blog, j'ai utilisé SnapWidget, c'est un site qui propose de créer automatiquement un widget avec des photos Instagram, de manière totalement gratuite.

Il suffit d'indiquer votre nom sur Instagram, ou même un hashtag si vous préférez. Pas besoin de donner les informations du compte ni quoi que ce soit ! Le widget va alors générer les photos du nom ou du hashtag choisi.

Créer le widget

Allez sur le site de SnapWidget.

Vous tomberez sur ce formulaire :

Ajouter un widget Instagram sur son blog Blogger

Vous l'aurez remarqué, c'est en anglais. Mais ne vous inquiétez pas, je vais tout vous expliquer ! ;)

Tout d'abord il faut entrer votre nom d'utilisateur Instagram (ou un hashtag si vous préférez) dont vous voulez afficher les photos. Entrez-le dans la partie Username, comme ceci :

Ajouter un widget Instagram sur son blog Blogger

Pour avoir un aperçu du widget cliquez sur Preview. Avec la mise en page par défaut, on obtient :

Ajouter un widget Instagram sur son blog Blogger

Pour fermer la fenêtre appuyez sur Close.

Personnaliser le widget

Le site propose de personnaliser l'apparence du widget. Vous pouvez choisir la disposition des photos, la taille des photos, un effet au survol des photos avec la souris, et même ajouter des boutons de partage, selon le type de disposition choisi. Nous allons voir ça en détail.

Disposition en Grille


Ajouter un widget Instagram sur son blog Blogger

Le premier type de disposition est la grille. C'est celle donnée par défaut.
Dans Widget Type, sélectionnez Grid :

Ajouter un widget Instagram sur son blog Blogger

Dans cette disposition vous pouvez définir :
  • Thumbnail Size : La taille des photos
  • Layout : Le nombre de photos par colonne puis par ligne
  • Photo Border : La présence d'une bordure autour des photos (pour l'activer choisissez Yes, sinon choisissez No)
  • Background Color : La couleur de fond du widget. Pour un fond transparent, laissez cette case vide
  • Photo Padding : L'espace entre les photos
  • Hover Effect : L'effet au survol des photos avec la souris :
    • None : Aucun effet
    • Fade in : Les photos apparaissent d'abord plus claires et au survol de la souris deviennent normales
    • Fade out : Les photos apparaissent d'abord normales et au survol de la souris deviennent plus claires
  • Sharing Buttons : Boutons de partage sur chaque photo (pour l'activer choisissez Yes, sinon choisissez No)
  • Responsive : Pour que la taille du widget s'adapte à la taille de la page web (pour l'activer choisissez Yes, sinon choisissez No)

Pour prévisualiser votre widget, cliquez sur Preview.

Disposition en tableau


Ajouter un widget Instagram sur son blog Blogger

Cette disposition affiche en plus des photos, votre texte associé.
Dans Widget Type, sélectionnez Board :

Ajouter un widget Instagram sur son blog Blogger

Dans cette disposition vous pouvez définir les mêmes paramètres que pour la grille, c'est à dire :
  • Thumbnail Size : La taille des photos
  • Layout : Le nombre de photos par colonne puis par ligne
  • Photo Border : La présence d'une bordure autour des photos (pour l'activer choisissez Yes, sinon choisissez No)
  • Background Color : La couleur de fond du widget. Pour un fond transparent, laissez cette case vide
  • Photo Padding : L'espace entre les photos
  • Hover Effect : L'effet au survol des photos avec la souris :
    • None : Aucun effet
    • Fade in : Les photos apparaissent d'abord plus claires et au survol de la souris deviennent normales
    • Fade out : Les photos apparaissent d'abord normales et au survol de la souris deviennent plus claires
  • Sharing Buttons : Boutons de partage sur chaque photo (pour l'activer choisissez Yes, sinon choisissez No)
  • Responsive : Pour que la taille du widget s'adapte à la taille de la page web (pour l'activer choisissez Yes, sinon choisissez No)

Pour prévisualiser votre widget, cliquez sur Preview.

Disposition en bande déroulante


Ajouter un widget Instagram sur son blog Blogger

Cette disposition affiche les photos en ligne, qui déroulent de droite à gauche, pour faire apparaître les autres photos.
Dans Widget Type, sélectionnez Scrolling :

Ajouter un widget Instagram sur son blog Blogger

Ici vous pouvez définir les paramètres suivants:
  • Thumbnail Size : La taille des photos
  • Widget Width : La largeur du widget
  • Auto Start Scrolling : Activer le déroulement automatique des photos (Yes) ou non (No).
  • Hover Effect : L'effet au survol des photos avec la souris :
    • None : Aucun effet
    • Fade in : Les photos apparaissent d'abord plus claires et au survol de la souris deviennent normales
    • Fade out : Les photos apparaissent d'abord normales et au survol de la souris deviennet plus claires

N'oubliez pas de prévisualiser votre widget en cliquant sur Preview.

Disposition en diaporama


Ajouter un widget Instagram sur son blog Blogger

C'est la disposition que j'utilise sur le blog. Les photos défilent les unes après les autres avec une transition fondue entre chaque photo.
Dans Widget Type, sélectionnez Slideshow :

Ajouter un widget Instagram sur son blog Blogger

Vous pouvez définir les paramètres suivants :
  • Thumbnail Size : La taille des photos
  • Photo Border : La présence d'une bordure autour des photos (Yes) ou non (No)
  • Background Color : La couleur de fond du widget. Laissez cette case vide pour un fond transparent
  • Hover Effect : L'effet au survol des photos avec la souris :
    • None : Aucun effet
    • Fade in : Les photos apparaissent d'abord plus claires et au survol de la souris deviennent normales
    • Fade out : Les photos apparaissent d'abord normales et au survol de la souris deviennet plus claires

Cliquez sur Preview pour avoir un aperçu de votre widget.


Disposition en plan


Ajouter un widget Instagram sur son blog Blogger

Cette dernière disposition propose d'afficher les photos sur un plan selon l'endroit où elles ont été prises (enfin, que vous avez précisé en postant les photos sur Instagram).
Dans Widget Type, sélectionnez Map :

Ajouter un widget Instagram sur son blog Blogger

Ici vous ne pourrez définir que la taille du plan (Map Size).

Pour avoir un aperçu de votre widget, cliquez sur Preview.

Installation sur Blogger

Une fois que vous êtes satisfait de l'apparence de votre widget, il suffit de l'ajouter à son blog.
Pour cela, cliquez sur Get Widget :

Ajouter un widget Instagram sur son blog Blogger

Une boîte apparaîtra avec le code de votre widget comme ceci :

Ajouter un widget Instagram sur son blog Blogger

Copiez tout le code.

Ensuite allez dans Mise en page dans le menu à gauche de votre tableau de bord :

Ajouter un widget Instagram sur son blog Blogger

Puis cliquez sur Ajouter un gadget :

Ajouter un widget Instagram sur son blog Blogger

Choisissez HTML/Javascript dans la liste de gadgets proposés :

Ajouter un widget Instagram sur son blog Blogger

Dans la boîte de dialogue qui s'ouvre, collez le code du widget obtenu sur SnapWidget, dans contenu comme ceci :

Ajouter un widget Instagram sur son blog Blogger

Cliquez sur Enregistrer. Et déplacez le gadget là où vous le souhaitez sur votre blog :

Ajouter un widget Instagram sur son blog Blogger

Pour finir, cliquez sur Enregistrer la disposition en haut à droite de la page web.

Et voilà ! Vous venez d'ajouter votre widget Instagram sur votre blog ! ;)

Ajouter un widget Instagram sur son blog Blogger

Autres articles

117 commentaires:

  1. Merci sa fait un moment que je cherche apres, grace a toi j'ai trouver =)

    RépondreSupprimer
  2. Bonjour,

    Merci bien pour ce tutoriel très complet et vraiment sympathique !

    Bonne journée !!!

    RépondreSupprimer
  3. olalala rien ne s'affiche sur mon blog (qui est en construction), et pourtant je suis tout à la lettre...

    RépondreSupprimer
    Réponses
    1. Est-ce que ton blog en construction est visible ? Il se peut que ce soit pour cela :)
      Va dans Paramètres puis Basique. Dans confidentialité clique sur Modifier puis coche les 2 cases Oui. Enregistre et essaye à nouveau.

      Supprimer
    2. merci de ta réponse, en fait il fallait juste que je patiente hahaha ! merci beaucoup pour ce tuto !

      Supprimer
    3. Tu as patienté combien de temps ? J'ai aussi ce soucis ...

      Supprimer
    4. Bonjour Johanna,
      Essaie de créer de nouveau le gadget avec un nouveau code HTML. Remplace le code que tu as par ce nouveau code.

      Supprimer
  4. Hello =)
    Depuis le temps que je cherchais à faire ça, merci beaucoup !

    RépondreSupprimer
  5. Tiens je voulais te demander, j'aurais voulu faire un bouton twitter , insta, facebook , ... comme tu as fait dans le bas de ton blog ou comme tu as fait sur le design 'simple rose et noir'. Mais quand je fais ça j'obtiens des images "flou" en qualité pas géniale géniale , sous quelle format enregistre tu tes images pour avoir une telle qualité ?

    RépondreSupprimer
  6. Merci beaucoup! très bonne idée de tuto! Merci merci merci!

    RépondreSupprimer
  7. Bonsoir,
    Super tuto, j'ai une question, les photos s'actualisent en même temps que le compte?(il est donc judicieux de mettre unhashtag spécifique pour ce qu'on souhaite mettre en avant sur le blog??) merci d'avance;)))

    RépondreSupprimer
    Réponses
    1. Bonjour Madame Chipie,
      Oui les photos s'actualisent en même temps que sur le compte. Tu peux mettre un hashtag si tu souhaites afficher que certaines photos :)

      Supprimer
  8. Merci beaucoup je viens d'ajouter cette galerie sur mon blog; par contre, peux t'on faire en sorte que quand on clique sur une photo on soit redirigé directement sur insta?
    a bientôt,
    Gorgeous Flake
    http://gorgeousflake.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Salut Gorgeous Flake,
      Ce n'est pas possible avec ce gadget car on utilise un service (SnapWidget), on ne créé pas nous-même le gadget (ce qui serait vraiment plus compliqué...)

      Supprimer
  9. Coucou,

    J'ai fais exactement tout ce que tu as dis mais les photos n'apparaissent pas,est- ce normal ? Il faut attendre peut-être ? P.S : J'adore tes conseils,ils sont géniales !

    RépondreSupprimer
    Réponses
    1. Normalement ça devrait fonctionner sans délai. Peux-tu m'envoyer l'adresse de ton blog pour que je puisse voir ce qui ne vas pas ?

      Supprimer
    2. Je ne peux pas accéder à ton blog car seuls les lecteurs invités peuvent y accéder :/

      Sinon, vérifie dans Paramètres > Basique > Confidentialité que tu as coché Oui pour :
      - Ajouter votre blog à nos listes ?
      - Laisser les moteurs de recherche trouver votre blog ?
      Ça peut expliquer pourquoi les photos n'apparaissent pas.

      Supprimer
  10. TROP Génial <3 merci beaucoupppppp :)

    RépondreSupprimer
  11. Supeeer ce tuto, merci beaucoup ! :D

    J'aurais une autre petite question : comment intégrer ce genre de tableau dans un article de blog, mais en choisissant les photos que l'on veut intégrer ? Par exemple faire un article "Mon mois de Mars", avec des photos Instagram (exemple : http://vaste-blague.blogspot.fr/)

    Merci de ton aide :)

    RépondreSupprimer
    Réponses
    1. Bonjour Marine, tu as plusieurs options : faire un montage photo ou alors créer une grille de photos. J'ai fait un article qui explique comment en faire une ici : http://ladybirdr.blogspot.com/2014/11/creer-une-galerie-dimages-simple-avec.html

      Supprimer
  12. Coucou ! Tout d'abord merci pour ce tuto :)
    J'ai juste un souci : j'ai suivi les instructions, mais le widget ne veut pas s'afficher sur mon blog :/

    RépondreSupprimer
    Réponses
    1. Bonjour Christine, ça semble marcher, de mon côté je le vois très bien ;)

      Supprimer
    2. Ah oui merci beaucoup ! Apparemment ça ne s'affiche que sur les écrans assez grands...

      Supprimer
  13. Merci!!!! C'est super, je cherchais justement quelques chose dans le genre!!!! Et c'est facile et ça fonctionne!

    RépondreSupprimer
  14. Encore merci pour tous tes tutoriels :)

    RépondreSupprimer
  15. Top, top, top !
    Mon blog est en construction et tous tes tutos me sont d'une très grande aide (surtout que je viens d'une autre plateforme alors "je nage").

    RépondreSupprimer
  16. Bonsoir, et surtout un immense merci pour toutes ces aides. Je n'en reviens pas de votre générosité! Tout est super bien expliqué, et en plus dans un design très agréable. Moi qui rechignais vraiment à me plonger un peu là-dedans, et bien finalement je m'éclate (enfin heureusement que vous êtes là!).
    Et je suis là pour vous prendre un peu de votre temps...J'ai l'impression d'avoir réussi mon pied de page en largeur 100%, mais je n'arrive pas à mettre le widget Instagram sur toute la largeur. J'ai fait des tests, mais impossible.... Est-ce une question de "margin"?
    Merci beaucoup d'avance si vous pouviez m'aider!

    http://aufildeflore.blogspot.fr/

    PS: Votre gadget Instagram dans votre pied de page, c'est vous qui l'avez crée? Car je vois que cliquer sur une photo renvoie direct sur Instagram... C'est compliqué à faire ça? Ou est-ce que c'est une question de lien externe à inscrire dans le code du widget?

    RépondreSupprimer
    Réponses
    1. Bonjour Flore,
      Oui il faut supprimer des espaces dans le pied de page pour que ton gadget prenne 100% de largeur de la page.

      Tout d'abord, modifie la valeur de max-width du code suivant à 100% :

      .footer-outer {
      max-width: 1060px; /* Largeur maximale du contenant à l'intérieur du pied de page */
      margin: 0 auto;
      border-top: 1px none;
      }

      Comme ceci :

      .footer-outer {
      max-width: 100%; /* Largeur maximale du contenant à l'intérieur du pied de page */
      margin: 0 auto;
      border-top: 1px none;
      }

      Ensuite ajoute les codes suivants sous celui ci-dessus :

      .footer-inner {
      width: 100%;
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      .foot.section {
      margin-left: 0 !important;
      margin-right: 0 !important;
      }

      Et voilà ;)

      Pour mon gadget, oui j'ai utilisé un code différent qui permet d'afficher les photos directement d'Instagram, au lieu d'utiliser un tiers comme Snapchat. Mais c'est plus compliqué à mettre en place car il faut récupérer des identifiants Instagram :/

      Supprimer
    2. Ah oui ok pour instagram...
      En tous cas, merci mille fois pour ta solution, ça fonctionne, you are the best!!

      Supprimer
  17. Bonjour !
    Malgré la simplicité déconcertante de cette manipulation je ne parviens pas à intégrer la barre déroulante sur mon blog :( Pourrais-tu m'aider ?
    Merci par avance et félicitation pour ce blog qui est une véritable mine d'or !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il semble y avoir un problème avec le nom d'utilisateur apparemment. As-tu bien entré ton nom d'utilisateur sans faute ?

      Supprimer
  18. Comme toujours un tuto très bien fait et très utile ! Merci ^^

    RépondreSupprimer
  19. bonjour! article tres interessant mais je vois que tu as réussis à ce que les gens qui cliquent soient redirigés sur instagram et non sur snapwidget. Comment as tu fais? merci!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui je n'utilises pas Snapwidget. Je le note sur ma liste de tutoriels à faire ;)

      Supprimer
  20. Bonjour,
    Je voudrai ajouter le nom de mon IG juste au dessus des photos, je l'avais fais avec la partie du titre mais après impossible de personnalisé ce titre. Une idée de comment je pourrais le faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour Coralie,
      Tu as 2 options :
      1- utiliser le titre du gadget et modifier spécifiquement l'apparence de ce titre.
      2- ajouter un titre dans le gadget et modifier spécifiquement l'apparence de ce titre.

      1- Pour modifier l'apparence du titre de ton gadget Instagram utilise le code CSS suivant :

      #HTML2 h2 {
      }

      Ajoute à ce code CSS les éléments que tu souhaites changer comme la police, la taille de la police, etc. J'ai prévu de faire un article qui regroupe les codes utilisables, mais en attendant tu peux utiliser un autre de mes tutoriels pour trouver des exemples de codes ;)

      Supprimer
    2. Pour la 2e option, ajoute ceci avant le code HTML de ton gadget Instagram :

      <h3>Titre</h3>

      Remplace titre par le titre que tu souhaites, et utilise le code CSS suivant pour changer l'apparence de ce titre :

      #HTML2 h3 {
      }

      Et voilà ;)

      Supprimer
    3. En fouinant j'ai trouvé la solution, j'ai été dans les paramétres de l'outil de création de modéle et la j'ai été dans 'gadget' et j'ai pu modifier. Merci tout de même pour ta réponse :).

      Supprimer
  21. Salut !
    Merci pour ce tuto. Alors moi, mon souci c'est que je souhaite installer le widget en scrolling en bas du blog, un peu comme toi. Ca fonctionne bien sur l'ordi pas de souci ; par contre, sur Ipad, ça me décale complètement les pages... (je ne sais pas comment dire, je le mets sur mon blog, tu peux aller voir : educateur-specialise.blogspot.com) J'ai essayé de mettre 100% dans l'item width mais no way, ça marche pas... T'as une idée de ce que je dois faire pour que ça reste à 100 % de la page, sur tous les supports ? Merci par avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Célia,
      Peux-tu me donner le lien vers ton blog pour que je puisse voir le problème ?

      Supprimer
    2. Oui je te l'avais mis dans mon commentaire, c'est celle-ci : educateur-specialise.blogspot.com. Merci ! ;-)

      Supprimer
    3. Ah oui j'ai lu trop vite ^^
      Essaye de rajouter :

      max-width:100% !important;

      Juste après :

      width: 100%;

      Supprimer
  22. Non c'est toujours pareil :-/ (désolée de t'embêter)

    RépondreSupprimer
    Réponses
    1. Essaye de changer la valeur de width pour 1278px.
      J'ai remarqué qu'il te manque un signe ; après la valeur de height.

      Supprimer
    2. Salut Catherine,
      Alors j'ai fait ça, sur Ipad c'était nickel mais sur ordinateur, c'était plus ajusté du coup (plus petit que la largeur du blog). J'ai testé avec max-widht et sans, c'était pareil. Et merci pour le ;
      (bon je pense que je vais le supprimer parce que je vois pas trop comment régler ce truc. Merci pour ton aide hein).

      Supprimer
    3. Désolée que ça ne marche pas :/

      Supprimer
  23. Merci beaucoup pour ton tutoriel, ça fonctionne très bien !!!

    RépondreSupprimer
  24. Rebonjour Catherine !

    Petite question : Faut-il absolument que le compte Instagram soit public pour pouvoir avoir ce genre de widget sur son blog...?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui il faut que le compte soit public pour que les photos puissent être chargés.

      Supprimer
  25. Rien ne s'affiche chez moi :( Pourtant j'ai bien coché oui pour les deux propositions dans confidentialité et j'ai suivi tes instructions à la lettre...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien vers ton blog pour que je puisse regarder ça ?

      Supprimer
    2. http://firstbreath--aftercoma.blogspot.fr/
      Voilà, merci beaucoup :)

      Supprimer
    3. Pour mettre le compte en mode public vas dans Options à partir de ton profil sur l'application Instagram mobile. Décoche "Compte privé" et voilà ;)

      Si ça ne marche pas, as-tu essayé de créer un nouveau code pour le gadget Snapwidget ?

      Supprimer
  26. Merci pour bcp pr ce widget. Super utile :) !!!!!

    RépondreSupprimer
  27. Coucou :)
    Tu penses un jour pouvoir faire un tuto pour instagram feed vu que tu n'utilise plus snapwidget ?
    Ca serait top !
    Bonne semaine :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est noté sur ma (longue) liste de tutos à faire ^^

      Supprimer
  28. Hello,

    Je viens souvent ici pour avoir des aides et des astuces,
    Je te remercie beaucoup de ta générosité. Bisous

    RépondreSupprimer
  29. Coucou,

    j'ai fais le gadget sur mon blog le seul soucis c'est qu'il empiète sur mon article... Je ne sais pas comment faire pour qu'il reste sur le côté de ma page...

    (merci pour l'article, super utile :) )

    la bise

    RépondreSupprimer
    Réponses
    1. Bonjour Anne-Sophie,
      As-tu réglé le problème ? Car je vois que ton gadget n'empiète pas sur tes articles ;)

      Supprimer
  30. Encore un tutoriel génial ! Merci Catherine.

    RépondreSupprimer
  31. Bonsoir,
    Merci pour ces tutos qui me sauvent la vie. J'aurai juste une question, j'ai mis le mode diaporama mais la photo qui s'affiche est à gauche et j'aimerai que cela soit centré. je ne sais pas si c'est clair ce que je veux dire?
    De plus, comment faire pour mettre un encart comme pour la barre latérale mais pour instagram? J'hésite encore entre le mode diaporama et grille mais j'aimerai que ce soit encadré. Merci beaucoup et bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      J'ai vu que tu as réussi à ajouter le gadget à ta barre latérale ;)

      Supprimer
    2. Oui merci beaucoup, tous vos conseils m'ont beaucoup aidé. Par contre, le widget n'est pas du tout centré, pourriez vous m'aider avec cela? Je pense que le problème vient de mon thème puisque j'ai également voulu modifier la bannière (logo en tête du blog) et l'image que j'ai créée est décalée vers la droite et je ne sais pas comment la centrer? Je ne sais pas si mes explications sont claires.
      Merci d'avance

      Supprimer
    3. Bonjour Maïssa,
      Ton gadget est trop large et dépasse de ta barre latérale.
      La largeur de ta barre latérale est 269 pixels.
      Il te suffit de récréer un gadget en précisant cette largeur dans les paramètres ;)

      Pour ton en-tête, retrouve ce code CSS :

      .logo-holder{
      text-align:center;
      float:left;
      margin-left:100px;
      }

      Remplace la ligne :

      margin-left:100px;

      Par :

      margin-left:0;

      Et voilà ;)

      Supprimer
  32. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton gadget semble bien prendre toute la largeur du pied de page. Je ne le vois pas coupé.
      Pour les autres gadgets, tous les réseaux sociaux ont des pages dédiées à leur gadgets avec des générateurs :
      Facebook : https://developers.facebook.com/docs/plugins/page-plugin?locale=fr_FR
      Twitter : https://twitter.com/settings/widgets/new/user

      Supprimer
  33. Bonjour, je crois que j'ai déjà laissé un commentaire mais du coup j'ss pas certaine. alors je repose juste ma question :
    j'ai suivi toutes les étapes (facile bien expliqué merci à toi) mais ça ne s'affiche pas sur mon blog. mon compte insta est bien public etc.
    mon blog : http://lavieenillustrations.blogspot.fr/
    de plus dans la partie "mise en page" ne figure que favicon, side bar et main...si tu peux m'éclairer, d'avance un grand merci.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient de ton thème Blogger. Celui que tu utilises n'est vraiment pas le meilleur des thèmes que propose Blogger. C'est pour ça que tu n'as que les gadgets que tu as cité dans "Mise en page". Essaye d'utiliser un autre thème Blogger ;)

      Supprimer
  34. Merci pour ton aide et ces explications hyper claires! :)

    RépondreSupprimer
  35. Merci beaucoup de ton aide mais depuis que je l'ai installé, j'ai mis de nouvelles photos sur Instagram et pourtant elles ne s'affichent sur mon blog.
    Comment faire, même si j'actualise cela ne marche pas.
    Merci de ta réponse :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ce n'est pas normal, il devrait s'actualiser. Peux-tu me donner le lien de ton blog ?

      Supprimer
  36. Bonjour Catherine, un grand MERCI pour ce tutoriel. J'aurais une question si c'est possible. Voilà j'ai bien mis "yes" pour que ça s'ajuste à la taille de ma page, seulement voilà ça ne s'affiche pas à 100% dans la longueur ça reste comme "coincé" dans un bloc. Je n'ai pas trouvé ce sujet dans les commentaires. Y a t-il une solution à ce problème? Merci beaucoup d'avance
    Mon blog : camillepplin.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Ton pied de page est effectivement dans un bloc. Ce bloc définit la largeur de ton blog. Tu peux néanmoins sortir ton pied de page de ce bloc avec ce tutoriel ;)

      Supprimer
  37. Bonjour!

    Tout d'abord je tiens à te remercier pour tous ces tutos et le temps que tu prends à réaliser tous ces articles et à répondre à tout le monde, grâce à toi, ça devient presque simple pour des personnes qui n'y connaissent rien!
    Cela dit j'ai un petit problème. Depuis que j'ai fixé mon menu en haut du blog, le widget instagram se fixe également en haut du blog, que dois-je faire?
    Voici l'adresse du blog : http://lespetitsparadisdemanon.blogspot.fr/

    Merci d'avance pour ta réponse.

    Manon

    RépondreSupprimer
    Réponses
    1. Bonjour Manon,
      Je ne vois pas ton gadget Instagram, l'as-tu supprimé ?
      Il devait sûrement être dans le même contenant que ton menu. Tu peux modifier le code CSS qui fixe ton menu pour éviter de fixer les autres gadgets qui peuvent être dans le même contenant.
      Remplace ton code :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Par :

      #barre_nav {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Supprimer
    2. Merci beaucoup pour ta réponse :)
      oui je l'ai supprimé car il cachait mon menu, j'ai fait ce que tu m'as dit mais cela n'a rien changé...

      Supprimer
    3. C'est bon le problème est réglé! J'ai copié ton code plus haut merci beaucoup !!!

      Supprimer
  38. Bonjour Catherine, merci encore pour ton tuto super simple :)
    J'ai cependant une question : sais tu pourquoi les photos ne sont pas de très bonne qualité sur Safari alors qu'elles sont mieux sur Chrome ? :/
    C'est en bas sur mon blog : oboudoirparfume.com
    Bon week end de la pentecôte :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cela peut venir de ton image. Sur quelle image rencontres-tu le problème ?

      Supprimer
  39. Hello :) j'ai un petit souci depuis quelques jours maintenant, mes images instagram ne s'affichent plus alors que je n'ai rien changé... Saurais-tu d'où vient le problème ? Merci beaucoup !

    RépondreSupprimer
  40. (c'est encore moi... j'ai réussi à retrouver mes images instagram... ^^)

    RépondreSupprimer
  41. Ohlala ca parait tellement simple sur blogger! Vriament très bien expliqué!!
    Moi je suis sur overblog et on ne peut pas ajouter un widget aussi facilement sur tous les thèmes :/

    RépondreSupprimer
  42. Bonjour! Pour commencer merci beaucoup pour ce tutoriel et tous les autres étant une bûche en codage tes enseignements me sont toujours précieux! Je rencontre un souci quand à la mise en place de mon instagram les images sont là et défilent mais elles passent sous le main menu des articles... Existe t’il une solution afin d’éviter cette superposition?

    http://www.minsherwood.com/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Retrouve ton code CSS commençant par :

      .content-outer {

      Remplace la ligne suivante :

      margin-top: -30px;

      Qui se trouve avant le signe } par cette ligne :

      margin-top: 25px; /* Marge entre les articles et le haut du blog */

      Remplace la valeur de 25px par celle qui te plait ;)

      Supprimer
  43. Bonjour,
    Désolée de te déranger (encore une fois ^^) mais j'aimerais avoir la galerie de photo comme toi (dans le pied de page et de cette forme). Malheureusement, il semblerait que cela ne soit plus possible avec SnapWidget... Aurais-tu une solution ?
    Merci beaucoup d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Ambre,
      Pour cela il faut d'abord sortir le pied de page du contenant de son blog, puis créer une zone de gadgets en dehors du pied de page. Je vais en faire un tutoriel ;)

      Supprimer
  44. Bonjour ,
    Merci beaucoup, c'est vraiment super bien expliquer . Tout parait beaucoup plus simple !
    Par contre, mon widget dépasse du cadre blanc et passe dans le "décor" autour de la page ( je sais pas si c'est très compréhensible), aurai-tu une solution pour moi . Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Eleo,
      La largeur de ton gaget doit dépasser celle de ta barre latérale. Dans les paramètres de ton gadget lors de sa création, entre une largeur de 250px ;)

      Supprimer
  45. Ton blog est super ! Merci !!! Je vais relooker mon blog !

    RépondreSupprimer
  46. Bonjour, merci pour tous tes tutos très utiles. mais j'ai le même problème de beaucoup ici c'est que le widget est complètement décalé et dépasse le cadre aussi, je veux que ce soit bien centré. est ce possible ? comment faire ? Merci!!

    RépondreSupprimer
    Réponses
    1. Bonjour Amira,
      Tu peux remplacer la largeur de ton gadget dans son code. Va sur ton gadget Snpawidget. Tu trouveras :

      <iframe src="https://snapwidget.com/embed/228034" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:1000px; height:125px"></iframe>

      Remplace 1000pxpar 100% et voilà ;)

      Supprimer
    2. Bonjour Catherine, y'a t-il moyen que le widget paraisse plus grand (sur la largeur) merci.
      www.stylebyamira.com

      Supprimer
    3. Et aussi le bouton "Follow" ne marche pas chez moi, il redirige vers l’accueil de mon blog. comment faire. merci beaucoup

      Supprimer
    4. Bonjour,
      Cela vient de ton thème. Tu devrais avoir reçu un document expliquant comment mettre en place les différents éléments de ton thème.
      Tu devrais pouvoir changer le lien en allant sur le gadget HTML qui comporte le gadget Instagram. Il devrait y avoir un lien de ce type :

      <a href="#" target="_blank"> Follow Me </a>

      Remplaces le # par le liens vers ta page Instagram.

      Supprimer
  47. Merci beaucoup Catherine pour tes supers conseils! j'ai ajouté un widget scrolling en bas de page avec mon compte insta! c'est super :)

    Une question qui a aucun rapport mais je n'ai jamais réussi à résoudre ce problème sur blogger (jai un pc), je n'arrive pas à gérer l'option "gérer le suivi de vos propres consultations de pages" et mes propres vues sont comptées ..
    Quand je clique sue ce lien il y a une page qui s'affiche avec

    "Ce site est inaccessible
    www.dope-n-fringed.com a mis fin à la connexion de manière inattendue."

    Et l'adresse affichée est celle de mon blog!
    Merci beaucoup de ton aide!






    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient sûrement de Blogger. Attends quelques jours et réessaye.
      Je te conseil d'utiliser un système autre que Blogger pour tes statistiques. Sur Blogger, elles sont un peu faussées, et l'option de suivi de ses propres consultations de pages ne fonctionne pas vraiment non plus :/
      Tu peux utiliser Google Analytics par exemple

      Supprimer
  48. Coucou !
    J'ai également utilisé ce site mais depuis aujourd'hui ça m'affiche " 500 Internal Servor Error " je ne sais pas quoi faire.. :(

    RépondreSupprimer
    Réponses
    1. Le problème vient sûrement de leur serveurs. Est-ce que le problème persiste ?

      Supprimer
  49. Merci beaucoup pour cet article qui m'a beaucoup aidée :)

    RépondreSupprimer
  50. Merci pour ce super article, il m'a bien aidé pour mettre en place mon widget instagram sur mon blog ;-)

    RépondreSupprimer
  51. Bravo pour vos explications très pédagogiques. Je n'aurais pas réussi sans votre aide. Merci.

    RépondreSupprimer
  52. Coucou Catherine ! merci beaucoup pour tout ces tutos, ils me changent la vie ;)
    j'aurais aimé savoir si tu pouvais m'aider pour un petit truc... J'aimerais mettre un slideshow sous ma bannière, juste avant mes articles avec les liens vers les derniers articles si c'est possible :)
    merci pour ton aide et ton super blog !

    RépondreSupprimer
    Réponses
    1. Bonjour Sabrina,
      J'ai prévu de faire un tutoriel pour ajouter un diaporama d'articles récents car j'ai beaucoup de demandes pour ça ^^
      Je ne sais pas encore quand ce sera publié mais c'est sur ma liste de tutos à faire ;)

      Supprimer
  53. Bonjour Catherine, j'ai un gros problème que je ne parviens pas du tout à régler. Les gadgets de ma barre latérale sont tout en bas de mon blog au lieu d'être en haut...
    Voilà l'adresse : http://inderacinablevoyageuse.blogspot.fr
    Merci beaucoup pour tous tes précieux tutos, ils m'ont été d'une grande aide !

    RépondreSupprimer
    Réponses
    1. Bonjour Emma,
      Je n'ai pas accès à ton blog, seuls les lecteurs peuvent le voir :/

      Supprimer
    2. Oui désolée, je viens de le modifier ! http://inderacinablevoyageuse.blogspot.fr
      Merci beaucoup :)

      Supprimer
    3. Bonjour Emma,
      Le problème vient de ce code CSS :

      .column-right-outer {
      background-color: #FFFFFF;
      margin-top: -77px;
      margin-right: 20px !important;
      margin-left: 660px !important;
      margin-bottom: 0px !important;
      border-top: none;
      border-bottom: none;
      border-left: none;
      }

      Supprime-le.
      Ensuite, ajoute ceci à la place pour conserver la bordure à gauche de la barre latérale :

      .column-right-inner {
      border-left: 1px solid #999999;
      }

      Supprimer
  54. Bonjour Catherine, merci pour cette explication! Je cherche également autre chose qui me semblait encore plus simple: je voudrais insérer un diaporama de photos dans sous mon menu, mais le widget "diaporama" semble avoir disparu dans la mise en page de blogger, je suis coincée! Pourtant il existait bien il y a quelques années...

    RépondreSupprimer
    Réponses
    1. Bonjour Marraine,
      Effectivement il n'y a pas de gadget Diaporama sur Blogger. Néanmoins je vais bientôt créer des tutoriels pour créer un diaporama d'images, un diaporama des derniers articles, etc ;)

      Supprimer
  55. Ça fonctionne, merci 1000 fois je suis ravie :)

    RépondreSupprimer
  56. Bonjour Catherine,
    Il semblerait que le lien à changé, du coup on fait comment pour créer le widget? car moi je tombe sur la page d'accueil.
    Merci!!

    RépondreSupprimer
  57. Bonjour Catherine,
    Pour moi ça ne fonctionne pas, je n'ai aucun aperçu qui affiche ma photo :(
    Merci de ton aide

    RépondreSupprimer
    Réponses
    1. Bonjour Ade,
      Effectivement le site à changé. Il va falloir que je mette à jour ce tutoriel du coup car il n'est plus valable :/
      N'ayant pas utilisé la nouvelle version, je ne peux te dire ce qui cloche. Mais dès que ce tutoriel sera à jour il apparaîtra comme un nouvel article sur le blog ;)

      Supprimer
  58. Merci pour ce tuto ;D
    Effectivement le site a changé et certains options que tu décris sont maintenant payante.

    RépondreSupprimer
  59. Merci infiniment ! C'est le premier tutoriel que j'arrive à faire en entier et où le résultat est celui que j'attendais ! Merci, merci !

    RépondreSupprimer
  60. Merci pour ce tutoriel! Ca marche super bien! ;)

    RépondreSupprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger