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.
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.
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.
Ajoutez un bout de code à votre thème Blogger
Ensuite, rendez-vous dans le menu "Thème" et cliquez sur "Modifier le code HTML".
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.
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.
Vous n'avez plus qu'à choisir d'afficher un thème mobile personnalisé.
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 !
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.
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
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 !
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
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.
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
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.
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.
Hello, ton logo est dans un widget ?
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 ?
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;
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
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)
Bravo Claudio, très belle semaine à vous !
Excellent tuto, merci beaucoup !
De rien, contente si ça peut t’aider :)
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+.
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.
rolala mais encore merci quoi! tes articles sont tellement clairs et complet!!
Merci beaucoup !