Codes théoriques Concept Blogger 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 ! Si votre modèle de base (version web) est un modèle de type personnalisé (comme par exemple ce blog), vous devez effectuer quelques modifications 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='&quot;loading&quot; + 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 élément 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 nouvel élément 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 sur les codes originaux des gadgets qui sont retranscrits sur ce blog :



Si vous voulez ajouter directement de nouveaux gadgets avec l'élément 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.

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


Personnaliser les modèles mobiles


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, les notations en étoiles, la date de publication, etc. En bref, tout ce que vous voulez grâce à 2 nouvelles étiquettes spécifiques à la version mobile, que l'on peut facilement exploiter grâce aux balises conditionnelles <b:if/>.

Étiquettes Description
data:blog.isMobileVrai, si version mobile.
Fonctionnelle dans l'ensemble du code HTML des modèles.
data:mobileVrai, si version mobile.
Fonctionnelle uniquement dans le code HTML des gadgets Blog, Header et PageList.

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 dont voici la liste complète des codes originaux retranscrits sur ce blog :


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 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 déborde d'inclusions qui ne sont opérationnelles que si la version mobile personnalisée est activée.

Comment sont organisés les inclusions ?

C'est, à peu près, le même principe que les différents modules de commentaires. 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 nouvelle 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>
La présentation des articles dans les pages index <b:include data='post' name='mobile-index-post'></b:include>
La présentation des pages items et statiques <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.


Haut de page


Dans le même dossier



Haut de page


Les discussions Blogger Google+ Facebook
Les publications populaires de la semaine
Plan du blog
Les forums
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.