Comment afficher un widget sur mobile avec Blogger ?


Blogger propose un thème mobile pour les blogs de la plateforme, indispensable pour les consulter sur un smartphone dans de bonnes conditions. Mais très souvent, les gadgets personnalisés que vous avez créés ne s'affichent pas correctement sur ce thème mobile.

C'est parfois un véritable problème, en particulier si vous avez installé un menu responsive ou si vous affichez des bannières. Activer l'affichage des gadgets Blogger sur mobile est pourtant assez simple et je vais vous montrer comment faire dans cet article.

Identifiez le widget à afficher sur mobile

Dans l'administration de votre blog, allez dans le menu "Mise en page" et cliquez sur "Modifier" au niveau du gadget Blogger que vous souhaitez faire apparaître sur la version mobile du blog.

Modifier un gadget Blogger
Modifier un gadget Blogger

Ce dernier va s'ouvrir dans une nouvelle fenêtre. Vous devez simplement repérer l'identifiant du widget dans l'adresse de la page. Il apparaît après le texte "widgetId". Dans mon exemple, il s'agit de HTML1.

Trouver le widget Id sur Blogger
Trouver le widget Id sur Blogger

Ajoutez un bout de code à votre thème Blogger

Ensuite, rendez-vous dans le menu "Thème" et cliquez sur "Modifier le code HTML".

Modifier le code HTML sur Blogger
Modifier le code HTML sur Blogger

Tout en haut de la page, vous allez voir un menu intitulé "Accéder au widget". Dans la liste de widgets proposés, choisissez l'identifiant que vous avez repéré à l'étape 1 du tutoriel, HTML1 dans mon cas.

Accéder au widget sur Blogger
Accéder au widget sur Blogger

Vous allez tomber sur ce genre de ligne de code : <b:widget id='HTML1' locked='false' title='' type='HTML' visible='true'>

Il suffit de rajouter mobile='yes' comme ceci : <b:widget id='HTML1' mobile='yes' locked='false' title='' type='HTML' visible='true'>

Vous pouvez ensuite enregistrer le thème. Si vous avez peur de faire une erreur, n'hésitez pas à faire une sauvegarde avant d'apporter des modifications à votre code.

Si vous avez besoin d'afficher plusieurs widgets sur mobile, il suffit de répéter la même procédure pour chacun des widgets concernés.

Activer le thème mobile sur Blogger (si nécessaire)

Si vous utilisez un vieux thème Blogger, vous aurez peut-être besoin de forcer Blogger à afficher la version responsive de votre design au lieu du thème mobile par défaut.

Toujours dans le menu "Thème" de Blogger, cliquez sur la petite roue située sous l'aperçu du thème mobile, afin de personnaliser celui-ci. Si la roue dentée n'apparaît pas, ça signifie que la version responsive du design est affichée d'elle-même, sans paramétrage particulier à effectuer.

Personnaliser le thème mobile sur Blogger
Personnaliser le thème mobile sur Blogger

Vous n'avez plus qu'à choisir d'afficher un thème mobile personnalisé.

Choisir un thème mobile sur Blogger
Choisir un thème mobile sur Blogger

Vous pouvez visualiser le rendu de votre thème Blogger mobile soit en vous connectant à votre blog depuis un smartphone, soit en ajoutant /?m=1 à la fin de l'adresse de votre blog quand vous êtes sur votre ordinateur. Voilà le résultat : le widget menu déroulant s'affiche désormais sur la version mobile du blog, ce qui rend quand même la navigation beaucoup plus agréable pour les visiteurs !

Widget visible sur mobile
Widget visible sur mobile

Si vous voulez apprendre à créer ce menu déroulant, n'hésitez pas à consulter le tutoriel ou à jeter un œil à mes autres articles sur Blogger.


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

19 commentaires sur “Comment afficher un widget sur mobile avec Blogger ?
  • régine

    Bonjour,
    J’ai beau faire tout ce processus à la lettre, ça ne fonctionne toujours pas, le menu ne s’affiche pas sur la version mobile… Pouvez-vous m’aider svp?
    Merci d’avance
    Régine Chiffe

    Répondre à régine
    • Marlène

      Bonjour Régine, malheureusement comme chaque code est différent je n’ai pas la possibilité d’analyser individuellement les blogs, essayez de vous tourner vers le forum d’aide de Blogger peut-être !

      Répondre à Marlène
  • Le petit monde de NatieAK

    Bonjour,
    Je vois que cela ne fonctionne pas sur le crosscoll.
    Quelle modification dois-je faire afin que la barre latérale puisse s’afficher sur mobile.
    Merci pour votre aide

    Répondre à Le
    • Marlène

      Bonjour Natie, s’il est nécessaire d’adapter le code à votre thème, c’est malheureusement à vous de le faire car je n’ai pas le temps de regarder individuellement le code de chacun.

      Répondre à Marlène
  • Régine

    Bonjour,
    Tout d’abord merci pour vos explications claires et précises. Il me reste un problème à résoudre, le bouton du menu ne s’affiche pas sur les mobiles bien que j’ai appliqué les démarches préconisées dans vos 2 tutos sur le menu déroulant. J’ai beau tourné le problème dans tous les sens je ne trouve pas la solution.
    Merci pour votre aide précieuse
    Cordialement

    Répondre à Régine
    • Marlène

      Hello Régine, il y a peut-être des ajustements à effectuer sur votre thème mais malheureusement, je n’ai pas la possibilité d’étudier le code de chacun de manière individuelle.

      Répondre à Marlène
  • chahid

    salut , Marlène , est ce que ça marche aussi pour les logo sur blogger??
    enfin, je n’ai pas encore fais un test mais j’espère que ça marche.

    Répondre à chahid
  • Marie

    Bonjour Mylène , extraordinaire ton site evidemment j’ai beaucoup de questions ! j’ai voulu que l’image de mon en tete s’affiche version mobile, ce qui est bien le cas en appliquant cette methode mais helas mon image est trop grande pour la version mobile puis je faire quelque chose sur ce point ou pas ?

    Répondre à Marie
    • Marlène

      Oui, il faut mettre le nez dans le code (code CSS) pour indiquer à l’image qu’elle doit adopter une certaine largeur en fonction de l’écran. Je ne peux pas entrer dans le détail de ton code mais l’idée est d’appliquer à l’image ces propriétés en CSS :
      width: 100%;
      height: auto;

      Répondre à Marlène
    • marie

      Merci Marlène infiniment – helas à cette heure j’ai un plus gros problème après avoir telechargé un template gratuit qui finalement ne me convenait pas g rechargé mon theme il m’ a laissé des fichiers résiduels je ne peux plus sauvegardé mon thème d’origine je suis verte verte quand je le recharge il ya la mise en page du template gratuit, des inscriptions en espagnol des accents non pris en compte je ne sais que faire et je ne me souviens plus lequel ct de toute façon la société est anglais je doute qu’ils prennent en compte ma demande de suppresion de fichier residuel pour template mode gratuit

      Répondre à marie
  • Claudio

    Bonjour Marlène !
    Merci beaucoup, grâce à votre soutien j’ai installé un widget « Abonnez-vous » pour mobile.

    Une excellente fin de semaine :)
    Claudio (de Montréal, Québec)

    Répondre à Claudio
  • Beauté à Taipei

    Excellent tuto, merci beaucoup !

    Répondre à Beauté
  • Maïlys LD

    Bon, alors du coup j’ai fais aussi ce tutoriel, mais tout n’a pas fonctionné.

    C’est-à-dire que le menu s’affiche désormais sur version mobile mais en plusieurs lignes (pas en responsive comme avec le tutoriel que tu as créé pourtant il me semble avoir bien rentré tous les codes).
    Mon titre de blog ne s’affiche plus du tout mais par contre le sous-titre est affiché en ENORME.
    Quant aux articles de blog, ils s’affichent en petites icônes mais pas du tout en forme et les titres coupés par la vignette suivante…
    Ma boite d’inscription à la newsletter s’affiche parfaitement bien sur la version mobile.
    Le widget Instagram ne s’affiche pas du tout.
    Et mon pied de page indique juste « fourni par blogger » mais pas le reste.
    Ma boite de commentaire s’affiche parfaitement bien aussi sur la version mobile, par contre il n’y a pas les boutons de partage à part celui de Google+.

    Répondre à Maïlys
    • Marlène

      Bonjour Maïlys, le tutoriel t’apprend juste à afficher un widget sur mobile… et non à créer un thème mobile complet, ce que tu cherches à faire visiblement. Créer un thème mobile complet implique un vrai travail de code qui va bien au-delà de la question des widgets.

      Répondre à Marlène
  • La Fénéante

    rolala mais encore merci quoi! tes articles sont tellement clairs et complet!!

    Répondre à La


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.