Modèle mobile personnalisé (Thèmes Versions 1 & 2)
Ajouter des gadgets et personnaliser le design de la version mobile de votre blog, c'est désormais possible. Blogger a activé au début du mois de novembre 2011, certaines fonctionnalités.
Je vous propose un long long long petit résumé. Accrochez-vous, voici le mobilopera en 5 actes, votre estomac va en prendre un sacré coup.
Premier acte : Activer la version personnalisée
Cette étape est la plus simple de la longue procédure qui vous attend, puisque l'activation se fait depuis le tableau de bord. Quant au reste, il vous faudra quelques aspirines et une bonne dose de zénitude pour paramétrer un à un tous les éléments de votre blog.
Étape 1
Accédez aux paramètres.
- UI
- Thème
- Menu Personnaliser
- Paramètres pour mobile
Étape 2
Voulez-vous afficher le thème Bureau ou le thème Mobile sur les appareils mobiles ?
Cliquez sur "Mobile".
Étape 3
Choisissez "Personnaliser" dans la liste de choix des thèmes disponibles.
Étape 4
Confirmez votre choix en cliquant sur "Enregistrer".
Attention, ce n'est pas fini ! Si vous utilisez un thème non-officiel, vous devez également effectuer une petite modification dans le code XML de votre thème.
- UI
- Thème
- Menu Personnaliser
- Modifier le code HTML
Recherchez la balise <body>, modifiez-là comme suit et enregistrez :
<body expr:class='data:blog.mobileClass'>
Votre thème est dés à présent prêt pour la personnalisation.
Deuxième acte : Les gadgets
A l'origine, seulement 6 gadgets étaient disponibles dans les thèmes mobiles préfabriqués (voire même imposés).
- Header L'entête
- PageList La liste de pages
- Profile Le profil
- AdSense Adsense
- Attribution Attribution
- Blog et l'indispensable gadget articles du blog.
Maintenant grâce au thème personnalisé vous pouvez activer ou désactiver tous les gadgets en leur attribuant un paramètre supplémentaire dans la première ligne du code HTML de chaque gadget (ou presque).
<b:widget id='ID_GADGET' mobile='yes' title='TITLE' type='GADGET_TYPE'>
Le paramètre mobile accepte uniquement ces valeurs :
| Valeur | Signification |
|---|---|
yes |
Activé. |
no |
Désactivé. |
only |
Activé seulement dans la version mobile. |
Troisième acte : Les données Blogger
En plus des gadgets, vous pouvez aussi afficher/masquer certains éléments en provenance de votre thème (version bureau) comme par exemple le nom de l'auteur de l'article, la date de publication, etc. En bref, tout ce que vous voulez grâce à de nouvelles données spécifiques à la version mobile, que l'on peut facilement exploiter grâce aux opérateurs Blogger.
| Données | Description |
|---|---|
data:view.isMobile |
Vrai, si version mobile. Donnée booléenne universelle. Travaille dans l'ensemble du code XML des thèmes Versions 1 et 2. |
data:mobile |
Vrai, si version mobile. Donnée booléenne des gadgets Blog, Header et PageList. Travaille uniquement dans les noeuds enfants de ces gadgets. |
<b:if cond='data:view.isMobile'> <!-- Si vrai, le contenu de ce noeud sera exécuté. --> </b:if>
<b:if cond='data:view.isMobile'> <!-- Si vrai, le contenu de ce noeud sera exécuté. --> <b:else/> <!-- Sinon, le contenu de ce noeud sera exécuté. --> </b:if>
Quatrième acte : La feuille de styles (CSS)
C'est là que ça devient folklorique.
Ce qui est génialissimement génial, c'est que vous pouvez tout restyler à votre goût: background, titres, texte, enfin bref, tout ce que vous voulez.
Vous pouvez envisager d'appliquer un arrière-plan vert à pois rouge sur votre thème de bureau et un autre arrière-plan rose bonbon sur votre thème mobile.
Pour réaliser cette prouesse, vous devez "repiquer" les CSS de votre thème web ou en recréer de nouveaux. Pour chaque élément, vous ajoutez juste avant la classe .mobile.
.post-footer {
color: #cccccc;
}
.mobile .post-footer {
color: #ff00de;
}
Dans cet exemple, la couleur du texte du pied de page aura une couleur grise dans la version web et une couleur rose bonbon dans la version mobile.
Cinquième et dernier acte : Bouquet d'inclusions
Lors du lancement de la version mobile personnalisée, les ingénieurs ont mis à jour le modèle par défaut.
Entre autre le gadget Blog, qui contient une série d'inclusions qui ne sont opérationnelles que si la version mobile personnalisée est activée.
Comment sont organisés les inclusions ?
Tout commence dans l'inclusion originelle main (Gadget Version 1). L'inclusion démarre par une condition qui détermine le chemin a emprunter (version bureau ou version mobile) :
<b:if cond='not data:view.isMobile'> <!-- Noeud a exécuter si la page courante n'est pas la version mobile. --> <b:else/> <!-- Noeud a exécuter si la page courante est la version mobile. --> <b:include name='mobile-main'/> </b:if>
Si c'est la version mobile qui est exécuté, l'inclusion mobile-main sera appelée. Cette inclusion joue le rôle d'axe central. Elle met en place les principaux éléments qui sont codés dans d'autres inclusions.
<b:includable id='status-message'></b:includable>
<b:includable id='mobile-index-post' var='post'></b:includable>
<b:includable id='mobile-post' var='post'></b:includable>
<b:includable id='mobile-nextprev'></b:includable>
Toutes les inclusions sont appliquées uniquement dans la version mobile personnalisée, sauf le message d'état qui est déjà utilisé dans la version bureau.
L'inclusion mobile-index-post est exécutée si la page est de type index. Si ce n'est pas le cas, c'est l'inclusion mobile-post qui prendra le relais.
C'est dans cette dernière inclusion que sont affichés les articles complets (avec les options et les commentaires).
Voilà qui est dit. Vous savez à peu près tout ce qu'il faut savoir pour fabriquer une version mobile personnalisée.
Les autres types de pages et vues d'un blog
- Les articles et pages autonomes
- L'accueil et les pages recherche
- Les archives
- Les pages 404
- La vue mobile
- La prévisualisation
- La vue de mise en page
- Les vues alternatives
- Les vues par langue
- Les flux du blog
Licence - La reproduction du contenu de ce blog n'est pas autorisée
Aucune disposition des Conditions d'Utilisation de ce blog ne pourra être interprétée comme conférant à l'Utilisateur une licence sur les Droits de Propriété Intellectuelle.
Le blog Blogger Code PE ne concède qu'une autorisation de visualisation de son contenu à titre personnel et privé. Les copies ou reproductions doivent être strictement réservées à l'usage privé du copiste.
Toute reproduction abusive, totale ou partielle du blog Blogger Code PE, représentation, modification, publication, traduction, adaptation totale ou partielle de l'un quelconque de ces éléments, accompagnée ou non d'un lien de référence, quel que soit le moyen ou le procédé utilisé, est interdite et sera considérée comme constitutive d’une contrefaçon et passible de poursuite (Les peines prévues à cet effet sont une condamnation de 3 ans d'emprisonnement et une amende de 300.000€) conformément aux dispositions des articles L.335-2 et suivants du Code de Propriété Intellectuelle.
Nous nous réservons le droit d'afficher dans ce cadre les notifications d'infraction à la loi DMCA en relation avec le contenu de ce document et déposées par les représentants agréés du blog Blogger Code PE.
Affiliée au 
Google Product Experts Program - Ambassador & Troubleshooter.
- Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
- Affectation Google US, produit Blogger depuis le 28/07/2014.
Spécialisation : Technologie des thèmes Blogger.
Auteur originel de la théorie du langage XML Blogger : Règles syntaxiques, directives d'usage, classifications, compilations et corrélations des composants.
Cela représente près de 10 années de travail. Je remercie tous ceux qui ont respecté ma propriété intellectuelle et j'offre mes meilleurs sentiments aux nombreux contributeurs (Amis, Utilisateurs, Experts Produits Google, Blogger Team et Ingénieurs).
