ThéorieFonctionnalitésAvancé

Un style pour chaque type de page Blogger


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Un style pour chaque type de page
Varier la présentation des pages selon le type de la page, est une opération qui ne requiert pas forcément de gros travaux dans le code HTML.
Les CSS peuvent souvent être suffisants.
Pour cela, une simple modification dans le code HTML vous facilitera la vie.

Modifier le code HTML du blog

Localisez la balise <body> dans le code HTML de votre modèle.

Dans les modèles fournis par Blogger, cette balise se présente de cette manière :

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Tandis que sur d'autres modèles (conçus par des tiers, ou les anciens modèles officiels), elle peut prendre plusieurs formes :

<body>

ou encore :

<body ...>

Enfin bref ! Localisez la balise et remplacez-là par celle-ci :

<body expr:class='&quot;loading&quot; + data:blog.mobileClass + &quot; &quot; + data:blog.pageType'>

De cette manière, la balise body sera équipée de 3 classes qui peuvent être utilisées pour les CSS.

  1. loading : Utilisée pour diverses applications par Blogger.
  2. mobile : Utilisée pour les styles de la version mobile personnalisée.
  3. pageType : La classe déterminant le type de la page. Elle prendra les valeurs suivantes :
    • item : Pour les pages des articles
    • static_page : Pour les pages statiques
    • index : Pour les pages "recherche" (accueil, requêtes, label, date)
    • archive : Pour les pages archives
    • error_page : Pour les pages introuvables (404)

Donc, dès à présent et grâce à cette toute petite modification dans la balise <body>, vous pouvez créer des déclarations CSS selon le type de page.


Haut de page


Ajouter des déclarations CSS

Pour écrire des déclarations CSS correspondant à un type de page et à un élément déterminé, il faut reprendre le type de la page et la classe de l'élément à modifier.

Nous allons prendre en exemple les 5 types de page avec la classe post-body (bloc contenant le corps des articles) et attribuer une taille de police et une couleur d'arrière-plan différentes.

Pour toutes les pages :
.post-body {
  font-size: 12px;
  background: red;
}

Uniquement les pages item (Articles):
.item .post-body {
  font-size: 14px;
  background: blue;
}

Uniquement les pages statiques:
.static_page .post-body {
  font-size: 16px;
  background: green;
}

Uniquement les pages recherche:
.index .post-body {
  font-size: 8px;
  background: orange;
}

Uniquement les pages archives:
.archive .post-body {
  font-size: 10px;
  background: violet;
}

Ce procédé peut être appliqué à tous les éléments contenus dans votre modèle.

Pour en savoir plus sur les CSS, je vous renvoie vers W3Schools.com.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire