Modèle mobile personnalisé [Layouts Versions 1 & 2]

Attention ! Les catégories Fonctionnalités et Développements vont bientôt faire l'objet d'une révision.
Actuellement, cette page peut contenir des liens morts et des informations obsolètes!

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.


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

  • L'entête
  • La liste de pages
  • Le profil
  • Adsense
  • Attribution
  • et l'indispensable gadget Blog.

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") !
Note : Ce paramètre peut causer des dysfonctionnements dans l'interface (des erreurs BX et une utilisation impossible de la mise en page).


Troisième acte : Les données 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 donnée spécifique à la version mobile, que l'on peut facilement exploiter grâce aux opérateurs Blogger.

Étiquette Description
data:view.isMobileVrai, si version mobile.
Fonctionnelle dans l'ensemble du code XML des thèmes - Layouts Versions 1 et 2.

Exemple 1: Si version mobile, appliquer le code.
<b:if cond='data:view.isMobile'>
  <!-- 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:view.isMobile'>
  <!-- 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>


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.


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 web ou version mobile) :

<b:if cond='not data:view.isMobile'>
  <!-- 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:includable id='status-message'></b:includable>

Les articles dans les pages index
<b:includable id='mobile-index-post' var='post'></b:includable>

Les articles dans les pages items, autonomes et archives
<b:includable id='mobile-post' var='post'></b:includable>

Les liens de navigation
<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 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é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.

Posts les plus consultés de ce blog

Facebook : Plugin Page

Character DATA [CDATA]