Modèle mobile personnalisé

Modèle mobile personnalisé

Personnaliser les modèles mobiles 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.


1.
  • Tableau de bord
  • Modèle
  • Mobile
  • Cliquez sur l’icône (engrenage)
Étape 1
2. Cliquez sur Oui, afficher le modèle mobile sur les mobiles.
Choisissez Personnaliser dans la liste de choix des modèles disponibles.
Étape 2
3. Confirmez votre choix en cliquant sur Enregistrez.
Étape 3


Attention, ce n'est pas fini ! Vous devez également effectuer une petite modification dans le code HTML de votre modèle.

  • Tableau de bord
  • Modèle
  • Modifier le code HTML

Recherchez la balise <body>, modifiez-là comme suit et enregistrez :

<body expr:class='data:blog.mobileClass'>


Votre modèle est dés à présent prêt pour la personnalisation.


Haut de page


Deuxième acte : Les gadgets

A l'origine, seulement 6 gadgets étaient disponibles dans les modèles mobiles préfabriqués (voire même imposés).


Maintenant grâce au modèle 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).

Exemple
<b:widget id='ID_GADGET' mobile='yes' title='TITRE_GADGET' type='TYPE_GADGET'>

Le paramètre mobile peut prendre les valeurs :

ValeurSignification
yesActivé
noDésactivé
onlyActivé seulement dans la version mobile.
Avec ce paramètre, le gadget n'apparaîtra plus dans le tableau de bord (onglet "mise en page") !

Pour retrouver facilement les gadgets dans le code HTML de votre modèle, vous pouvez vous baser des dernières versions des codes des gadgets retranscrit dans cette liste.


Si vous voulez ajouter directement de nouveaux gadgets avec le paramètre mobile incorporé, utilisez ce petit générateur.

Choix du gadget
En rouge : Gadgets susceptibles de poser des problèmes si ils ne sont pas intégrés par la manière habituelle.
En bleu : Gadgets incorporés automatiquement dans la version mobile.
ID du gadget Le n° d'identification doit être unique et compris entre 1 et 999.
Titre du gadget
Version mobile
Verrouillage Un gadget verrouillé ne peut être ni déplacé ni supprimé depuis le tableau de bord.

Le code du gadget
<b:widget id='FollowByEmail1' mobile='yes' type='FollowByEmail' locked='no' title='Titre du gadget'></b:widget>
Où copier le code de ce gadget ?

  • Tableau de bord
  • Modèle
  • Modifier le code HTML
  • Gadget Blog1

Emplacements A copier juste avant
Au-dessus du gadget Blog<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>


Le gadget sera disposé sur votre blog dans la colonne centrale juste au-dessus des articles.

Si l'emplacement ne vous convient pas, rendez-vous dans le tableau de bord (volet Mise en page) et déplacez-le à votre convenance (si vous ne l'avez pas verrouillé).


Ajouter des gadgets dans les modèles mobiles personnalisé


Haut de page


Troisième acte : Les étiquettes Blogger

En plus des gadgets, vous pouvez aussi afficher/masquer certains éléments en provenance de votre modèle (version web) 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 à 1 nouvelle étiquette spécifique à la version mobile, que l'on peut facilement exploiter grâce aux balises conditionnelles <b:if/>.

Étiquette Description
isMobileVrai, si version mobile.
Fonctionnelle dans l'ensemble du code HTML des modèles.

Exemple 1: Si version mobile, appliquer le code.
<b:if cond='data:mobile'>
  <!-- Lignes de codes qui s'appliquent que pour la version mobile. -->
</b:if>

Exemple 2: Si version mobile, appliquer le code, si non, appliquer l'autre code.
<b:if cond='data:mobile'>
  <!-- Lignes de codes qui s'appliquent que pour la version mobile. -->
  <b:else/>
  <!-- Lignes de codes qui ne s'appliquent pas pour la version mobile. -->
</b:if>


Concrètement, vous pouvez utiliser les balises conditionnelles, pour les options des articles. Liste des codes des options des articles.

Bien évidemment, le balisage conditionnel ne se limite pas seulement aux options des articles, mais peut s'étendre dans n'importe quelle partie du code HTML de votre blog.


Haut de page


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, etc, enfin bref, tout ce que vous voulez.
Avoir un arrière-plan vert à pois rouge sur votre modèle web et un autre arrière-plan rose bonbon sur votre modèle mobile.

Pour réaliser cette prouesse, vous devez "repiquer" les CSS de votre modèle web ou en recréer de nouveaux. Pour chaque élément, vous ajoutez juste avant la classe .mobile.

Exemple : CSS version web
.post-footer {
  color: #cccccc;
}

Exemple : CSS version mobile
.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.

Si vous utilisez un modèle de type b:v2, vous pourrez aussi constater qu'à la fin de la section CSS, se trouve des styles spécifiques au modèle choisi.

Jetez un œil sur les codes originaux des modèles.


Haut de page


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. L'inclusion démarre par une condition qui détermine le chemin a emprunter (version web ou version mobile) :

<b:if cond='data:mobile == &quot;false&quot;'>
  <!-- Code a exécuter si ce n'est pas la version mobile. -->
  <b:else/>
  <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.

Le message d'état
<b:include data='top' name='status-message'></b:include>

Les articles dans les pages index
<b:include data='post' name='mobile-index-post'></b:include>

Les articles dans les pages items, autonomes et archives
<b:include data='post' name='mobile-post'></b:include>

Les liens de navigation
<b:include name='mobile-nextprev'></b:include>

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 web.

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é 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.

Dans le même dossier



Haut de page


Les discussions
Les publications populaires de la semaine
Plan du blog
Les forums des produits Google
Liens de la page
URL
HTML
BB Code
Licence CC BY-NC-SA 3.0
Droits de propriété intellectuelle
Cette page intitulée « Modèle mobile personnalisé » issue de Blogger Code (http://bloggercode-blogconnexion.blogspot.com/) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, remixer, arranger, et adapter le contenu de cette page à des fins non commerciales dans les conditions fixées par la licence, tant que le code ci-dessous est intégré dans la copie.