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
Deuxième acte : Les gadgets
Troisième acte : Les data Blogger
Quatrième acte : La feuille de styles (CSS)
Cinquième et dernier acte : Bouquet d'inclusions
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 zenitude pour paramètrer un à un tous les éléments de votre blog.1°) Tableau de bord ► Modèle ► Mobile. Cliquez sur l'icone
(engrenage).
2°) Cliquez sur Oui, afficher le modèle mobile sur les mobiles.
Choisissez Personnaliser dans la liste de choix des modèles disponibles.
3°) Confirmez votre choix en cliquant sur Enregistrez.
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='"loading" + 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).L'entête, La liste de pages, le profil, Adsense, l'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 élément supplémentaire dans la première ligne du code HTML de chaque gadget (ou presque).
Exemple :
<b:widget id='XXXXX1' mobile='yes' title='titre du gadget' type='XXXXXX'>
Le nouvel élément mobile peut prendre les valeurs :
| Valeur | Signification |
|---|---|
| yes | Activé |
| no | Désactivé |
| only | Activé 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.
<b:widget id='FollowByEmail1' mobile='yes' type='FollowByEmail' locked='no' title='Titre du gadget'/>
Où copier le code de ce gadget ?
| Tableau de bord ► Modèle ► Modifier le code HTML (gadgets non-développés) |
| Emplacements | A copier juste avant |
|---|---|
| Au-dessus du gadget Blog | <b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'/> |
Le gadget sera disposé sur votre blog dans la colonne centrale juste au-dessus des messages.
Si l'emplacement ne vous convient pas, rendez-vous dans le tableau de bord (onglet Mise en page) et déplacez-le à votre convenance (si vous ne l'avez pas verrouillé).
Haut de page
Troisième acte : Les data 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 du message, les étoiles de notations, la date de publication, etc. En bref, tout ce que vous voulez grâce à 2 nouvelles données spécifiques à la version mobile, que l'on peut facilement exploiter grâce aux balises conditionnelles<b:if/>.| Data | Description |
|---|---|
| data:blog.isMobile | Vrai, si version mobile. Fonctionnelle dans l'ensemble du code HTML des modèles. |
| data:mobile | Vrai, si version mobile. Fonctionnelle uniquement dans le code HTML des gadgets. |
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 messages 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 messages, 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 restyliser à votre goût: background, titres, texte, etc, enfin bref, tout de chez tout.
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 2010, vous pourrez aussi constater qu'à la fin de la section CSS, se trouve des styles spécifiques au modèle choisi.
Jetez un oeil 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 commentaires filetés. 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 == "false"'>
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 élements qui sont codés dans d'autres inclusions.
| Le message d'état | <b:include data='top' name='status-message'/> |
| La présentation des messages dans les pages index (accueil compris) | <b:include data='post' name='mobile-index-post'/> |
| La présentation pour les pages item et statiques | <b:include data='post' name='mobile-post'/> |
| Les liens de navigation | <b:include name='mobile-nextprev'/> |
Toutes les inclusions sont appliquées uniquement pour la version mobile, sauf le message d'état qui est déjà utilisé pour 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é complètement les messages (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.
Blogger Code en version mobile 120% personnalisée, c'est a visualiser sur Blogger Code Mobile.
Ca vous donnera certainement quelques idées a piquer silencieusement (comme d'hab :D).
Allez zouuu, filez bande de garnements.
