Modèle mobile personnalisé (Thèmes Versions 1 & 2)

Blogger - ViewType - Mobile

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

Activer le thème mobile personnalisé. Activate the custom mobile theme.

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

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

Exemple 1: Si version mobile, appliquer le code.
<b:if cond='data:view.isMobile'>

  <!-- Si vrai, le contenu de ce noeud sera exécuté. -->

</b:if>
Exemple 2: Si version mobile, appliquer le code, si non, appliquer l'autre code.
<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.

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

Spotlight

Populaires cette semaine

Ajouter des boutons à la barre de partage Blogger