DéveloppementsBac à sable

Customiser le message d'état


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.
Description Gadget Gadget Version Template Version
Que diriez-vous de modifier le petit message d'état à l'accueil, dans les index, les archives et les pages 404 ? C'est ce que je vous propose dans ce petit développement personnel qui offre la possibilité d'ajouter un titre, une barre de recherche, un compteur, un message pour les pages ne contenant pas de publication, etc. Vous copiez, vous collez, vous adaptez le texte et vous enregistrez.
Blog
1
1
2
Customiser le message d'état
Que diriez-vous de modifier le petit message d'état à l'accueil, dans les index, les archives et les pages 404 ?
C'est ce que je vous propose dans ce petit développement personnel qui offre la possibilité d'ajouter un titre, une barre de recherche, un compteur, un message pour les pages ne contenant pas d'article, etc.
Vous copiez, vous collez, vous adaptez le texte et vous enregistrez.

Le code

<b:includable id='status-message'>

<!-- STATUS MESSAGE CUSTOM BLOGGER CODE http://bloggercode-blogconnexion.blogspot.com/ -->

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
  <div class='date-outer'><div class='date-posts'><div class='post-outer'>

    <!-- TITRE PAGES TYPE INDEX (DATE / RECHERCHE / LIBELLES) -->

    <h3 class='post-title'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>Les archives de <data:blog.title/></b:if>
      <b:if cond='data:blog.searchQuery != &quot;&quot;'>Résultats de recherche pour <data:blog.searchQuery/></b:if>
      <b:if cond='data:blog.searchLabel != &quot;&quot;'>Articles portant le libellé <data:blog.searchLabel/></b:if>
    </h3>

    <!-- COMPTEUR ARTICLES PAGES TYPE INDEX (DATE / RECHERCHE / LIBELLES) + BOITE DE RECHERCHE (PAGES TYPE INDEX RECHERCHE) -->

    <b:if cond='data:blog.pageName == &quot;&quot;'>
      <div class='post-header'>
      <script style='text/javascript'>
        function numberOfitem(json) {
          document.write(&#39;Total : &#39; + json.feed.openSearch$totalResults.$t + &#39; articles&#39;);
        }
      </script>
      <script src='/feeds/posts/default?alt=json-in-script&amp;callback=numberOfitem'/>
      </div>
    </b:if>
    <b:if cond='data:blog.searchQuery != &quot;&quot;'>
      <form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchthis' method='get'>
        <table cellpadding='0' cellspacing='0' width='100%'><tr><td width='99%'>
          <input id='b-query' maxlength='255' name='q' style='width: 100%;' type='text'/>
        </td><td>
          <input id='b-searchbtn' style='margin-left: 5px;' type='submit' value='Rechercher'/>
        </td></tr></table>
      </form>
      <div class='post-header'>
        Résultats : <b><data:numPosts/> article<b:if cond='data:numPosts &gt; 1'>s</b:if></b>
        <b:if cond='data:numPosts &gt; 1'>
        - Trier :
        <a expr:href='&quot;/search?q=&quot; + data:blog.searchQuery + &quot;&amp;by-date=false&quot;'>Par pertinence</a> |
        <a expr:href='&quot;/search?q=&quot; + data:blog.searchQuery + &quot;&amp;by-date=true&quot;'>Par date</a>
        </b:if>
      </div>
    </b:if>
    <b:if cond='data:blog.searchLabel != &quot;&quot;'>
      <div class='post-header'>
        <script style='text/javascript'>
          function numberOfitem(json) {
            document.write(&#39;&#39; + json.feed.openSearch$totalResults.$t + &#39; articles&#39;);
          }
        </script>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:blog.searchLabel + &quot;?alt=json-in-script&amp;callback=numberOfitem&quot;'/>
      </div>
    </b:if>

    <!-- MESSAGE POUR PAGES SANS RÉSULTAT PAGES TYPE INDEX (DATE / RECHERCHE / LIBELLES) -->

    <b:if cond='data:numPosts == 0'>
    <div class='post-body' style='font-size: 140%; text-align: center; padding-top: 50px; padding-bottom: 50px;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
        Il n&#39;y a plus d'articles.<br/>
        <b:if cond='data:newerPageUrl'>Consultez <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next' title='Articles plus récents'>les articles plus récents</a>.<br/></b:if>
        <a expr:href='data:blog.homepageUrl' title='Home'>Retournez à l&#39;accueil</a>.<br/>
      </b:if>
      <b:if cond='data:blog.searchQuery != &quot;&quot;'>
        Il n&#39;y a aucun article qui correspond à la requête : <b><data:blog.searchQuery/></b>.<br/>
        <a expr:href='data:blog.homepageUrl' title='Home'>Retournez à l&#39;accueil</a>.<br/>
      </b:if>
      <b:if cond='data:blog.searchLabel != &quot;&quot;'>
        Il n&#39;y a aucun article qui correspond au libellé : <b><data:blog.searchLabel/></b>.<br/>
        <a expr:href='data:blog.homepageUrl' title='Home'>Retournez à l&#39;accueil</a>.<br/>
      </b:if>
    </div>
    </b:if>
  </div></div></div>
  </b:if>
<b:else/>

    <!-- TITRE ET COMPTEUR PAGE ACCUEIL -->

  <div class='date-outer'><div class='date-posts'><div class='post-outer'>
  <h3 class='post-title'>Bienvenue sur <data:blog.title/></h3>
  <div class='post-header'>
  <script style='text/javascript'>
    function numberOfitem(json) {
      document.write(&#39;Total : &#39; + json.feed.openSearch$totalResults.$t + &#39; articles&#39;);
    }
  </script>
  <script src='/feeds/posts/default?alt=json-in-script&amp;callback=numberOfitem'/>
  </div>
  </div></div></div>
</b:if>

    <!-- TITRE, COMPTEUR ET ARTICLES POUR PAGES SANS RÉSULTAT PAGES TYPE ARCHIVE -->

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
  <div class='date-outer'><div class='date-posts'><div class='post-outer'>
  <h3 class='post-title'>Les archives de <data:blog.pageName/></h3>
  <div class='post-header'>
    Résultats : <b><data:numPosts/> article<b:if cond='data:numPosts &gt; 1'>s</b:if></b>
  </div>
  <b:if cond='data:numPosts == 0'>
    <div class='post-body' style='font-size: 140%; text-align: center; padding-top: 50px; padding-bottom: 50px;'>
      Il n&#39;y a eu aucun article publié en <data:blog.pageName/>.<br/>
    </div>
  </b:if>
  </div></div></div>
</b:if>

    <!-- TITRE ET MESSAGE ERREUR POUR PAGES TYPE ERROR (PAGE 404) -->

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <div class='date-outer'><div class='date-posts'><div class='post-outer'>
  <h3 class='post-title'>Page introuvable</h3>
  <div class='post-body' style='font-size: 140%; text-align: center; padding-top: 50px; padding-bottom: 50px;'>
    <data:navMessage/>
  </div>
  </div></div></div>
</b:if>

</b:includable>


Haut de page


Où copier le code ?

Un seul et unique emplacement. A la place de l'ancien code du message d'état proposé par Blogger.

  • Tableau de bord
  • Modèle
  • Modifier le code HTML


Déployez les sections suivantes :
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>
<b:includable id='status-message'></b:includable>


Vous remplacez tout ce code :



Haut de page


Découpage HTML du message d'état

Comme vous avez pu le constater, le code est très volumineux. La construction tient en compte, le type de page et le nombre d'articles par page.

Le balisage utilisé est presque identique à celui qui figure dans les modèles par défaut de Blogger pour la présentation des articles. Il s'adaptera facilement à votre design. Si ce n'est pas le cas, vous pourrez toujours adapter en ajoutant les CSS appropriés.

Le message d'état est découpé en 3 sections bien distinctes :

Le titre de la page, Le compteur d'articles + Autres options et Le message pour les pages sans publication.


Le schéma HTML :
<div class='date-outer'><div class='date-posts'><div class='post-outer'>

  <h3 class='post-title'>LE TITRE DE LA PAGE</h3>

  <div class='post-header'>LE COMPTEUR D'ARTICLES + AUTRES OPTIONS</div>

  <div class='post-body' style='font-size: 140%; text-align: center; padding-top: 50px; padding-bottom: 50px;'>
    LE MESSAGE POUR LES PAGES SANS PUBLICATION
  </div>

</div></div></div>


Haut de page


Message d'état à l'accueil

Le message d'état à la page d'accueil se résume qu'à 2 lignes.

  • Un titre : Bienvenue sur [NOM DE VOTRE BLOG]
  • Le nombre total d'articles.


Customiser le message d'état


Aucun réglage n'est requis. Le nom du blog et le nombre d'articles sont automatiques.

Dans le code, cette section est marquée en rouge.

Vous pouvez également ajouter un message de bienvenue ou de présentation :

Dans le code, vous repérez :

  <script src='/feeds/posts/default?alt=json-in-script&amp;callback=numberOfitem'/>
  </div>

Et vous ajoutez, juste après :

  <div class='post-body' style='font-size: 140%; text-align: center; padding-top: 50px; padding-bottom: 50px;'>
    AJOUTER UN MESSAGE DE BIENVENUE ICI
  </div>


Haut de page


Message d'état dans les archives

Le message d'état dans les pages de types archives se résume à 3 lignes.

  • Un titre : Les archives de [PERIODE]
  • Le nombre d'articles durant cette période.
  • Un message d'erreur quand il n'y a pas eu d'article durant cette période.


Customiser le message d'état


Customiser le message d'état


Aucun réglage n'est requis. Le titre et le nombre d'articles sont automatiques.

Dans le code, cette section est marquée en bleu.


Haut de page


Message d'état dans les index par date

Il s'agit des pages "articles plus anciens" après la page d'accueil. Elles sont classées par Blogger comme pages de type "index".

On peut aussi bien les considérer comme les pages archives "bis" et de ce fait, elles sont également composées de 3 lignes.

  • Un titre : Les archives de [NOM DU BLOG]
  • Le nombre total d'articles sur le blog.
  • Un message d'erreur quand il n'y a pas eu d'article durant une période déterminée.


Customiser le message d'état


Customiser le message d'état


Aucun réglage n'est requis. Le titre et le nombre d'articles sont automatiques.

Dans le code, cette section est marquée en vert.


Haut de page


Message d'état dans les index par libellé

Ce sont les pages qui regroupent tous les articles portant un même libellé. Elles sont également composées de 3 lignes.

  • Un titre : Articles portant le libellé [NOM DU LIBELLE]
  • Le nombre d'articles portant ce libellé.
  • Un message d'erreur quand il n'y a pas d'article associé à ce libellé.


Customiser le message d'état


Customiser le message d'état


Aucun réglage n'est requis. Le titre et le nombre d'articles sont automatiques.

Dans le code, cette section est marquée en orange.


Haut de page


Message d'état dans les index par recherche

Comme le nom l'indique, ce sont les pages qui affichent les résultats de recherches. Elles sont composées de 4 lignes.

  • Un titre : Résultats de recherche pour [REQUÊTE UTILISÉE DANS LA RECHERCHE]
  • La boîte de recherche Blogger.
  • Le nombre d'articles + une option de triage par pertinence et par date si la recherche obtiens au moins 2 résultats.
  • Un message d'erreur quand la recherche n'est pas fructueuse.


Customiser le message d'état


Customiser le message d'état


Aucun réglage n'est requis. Le titre, la boîte de recherche et le nombre de résultats sont automatiques.

Vous aimez le chocolat ?

Ça tombe bien. Le code de cette section a été marqué de cette couleur.


Haut de page


Message d'état dans les pages 404

L'ultime page : Les pages 404. Ou si vous préférez, les pages erreurs.

Elles sont composées de 2 lignes.

  • Un titre : Page introuvable
  • Un message d'erreur.


Customiser le message d'état


Le message d'erreur sera celui que vous aurez écrit depuis l'interface Blogger. En savoir plus.

Le code de cette section a été marqué en violet.
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

ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire