snippetedPostContent : Contenu du snippet (V2 variantes) - Blogger XML Documentation

Extrait de la documentation personnelle de
Blogger - snippetedPostContent [FeaturedPost/PopularPosts GV2 Markup]
Description de l'inclusion
snippetedPostContent est une inclusion des gadgets FeaturedPost et PopularPosts qui organises les éléments de l'article. Les 7 variantes de cette page sont spécifiques aux thèmes Contempo, Emporio, Essential, Notable et Soho. Ces balisages étant explicites, ils deviennent prioritaires dans leur thème respectif par rapport au balisage original.
Directives d'usage et niveau de priorité de mise à jour
Thème Version 1
Garantie d'usage : Aucune
Aucune priorité
Thème Version 2
Garantie d'usage : Aucune
Aucune priorité
Thème Dynamique
Garantie d'usage : Aucune
Aucune priorité
Thème Version 3
Garantie d'usage : Oui
Priorité haute
Balisage original
Existe.

Disponibilité des variantes de l'inclusion

Thèmes FrontEnd BackEnd
Original Original Original+
Contempo Theme Original+
Emporio Theme Original+
Essential Theme Original+
Notable Original Original+
Soho Theme Original+
Afficher le balisage original
Légende :
  • Original : Balisage original
  • Original+ : Balisage original (super)
  • Theme : Balisage spécifique au thème
  • Inexistant : Balisage inexistant
Thèmes FrontEnd BackEnd
Original Original Original+
Contempo Theme Original+
Emporio Theme Original+
Essential Theme Original+
Notable Theme Original+
Soho Theme Original+
Afficher le balisage original
Légende :
  • Original : Balisage original
  • Original+ : Balisage original (super)
  • Theme : Balisage spécifique au thème
  • Inexistant : Balisage inexistant

Balisage dans Contempo & Essential

Dans ces thèmes, il existe 2 variantes. L'une pour le gadget FeaturedPost et la deuxième pour le gadget PopularPosts.

FeaturedPost
Le code XML

<b:includable id='snippetedPostContent'>
  <b:comment>Re-order the thumbnail before the snippet, add 'Keep reading' link.</b:comment>
  <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
  <b:include name='headerByline'/>
  <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' data='post' name='snippetedPostThumbnail'/>
  <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
  <b:include data='post' name='postFooter'/>
</b:includable>

PopularPosts
Le code XML

<b:includable id='snippetedPostContent'>
  <b:comment>Add a 'keep reading' link to the item-content.</b:comment>
  <b:include name='snippetedPostTitle'/>
  <b:include name='snippetedPostByline'/>
  <div class='item-content float-container'>
    <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
    <b:if cond='data:this.postDisplay.showSnippet'>
      <b:with value='"popular-posts"' var='snippetPrefix'>
        <b:include cond='data:post' data='post' name='postSnippet'/>
      </b:with>
    </b:if>
    <b:include data='post' name='postFooterJumpLink'/>
  </div>
</b:includable>

Les nœuds parents

Balisage dans Emporio

Même principe que le thème Contempo. Dans ce thème, il existe 2 variantes. L'une pour le gadget FeaturedPost et la deuxième pour le gadget PopularPosts.

FeaturedPost
Le code XML

<b:includable id='snippetedPostContent'>
  <b:if cond='data:widget.sectionId != "featured_post"'>
    <b:include name='super.snippetedPostContent'/>
  <b:else/>
    <b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>
      <b:if cond='data:post.featuredImage'>
        <style>
          @media (min-width: 746px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, "800:272").cssEscaped'/>);} }
          @media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185, "1185:272").cssEscaped'/>);} }
          @media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, "1:1").cssEscaped'/>); } }
          @media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 745, "745:400").cssEscaped'/>); } }
        </style>
      </b:if>

      <div expr:class='"post-wrapper hero post-" + data:post.id'>
        <b:include name='postWrapperClasses'/>
        <b:include name='feedPostImage'/>

        <div class='slide'>
          <div class='post hentry'>
            <b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>
            <b:include name='headerByline'/>
            <b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>
            <div class='post-footer'>
              <b:include name='footerBylines'/>
            </div>
          </div>
        </div>
      </div>
    </b:with>
  </b:if>
</b:includable>

PopularPosts
Le code XML

<b:includable id='snippetedPostContent'>
  <b:comment>Move the thumbnail outside of the body and above the title</b:comment>
  <b:include cond='data:postDisplay.showFeaturedImage and data:post.featuredImage.isResizable' data='post' name='snippetedPostThumbnail'/>
  <b:include data='post' name='snippetedPostTitle'/>
  <b:include data='post' name='itemBody'/>
</b:includable>

Les nœuds parents

Balisage dans Notable

Notable ne contient qu'une seule variante. Dans ce thème, elle est destinée au gadget PopularPosts.

PopularPosts
Le code XML

<b:includable id='snippetedPostContent'>
  <div class='post-outer-container'>
    <b:comment>post title and body</b:comment>
    <div class='post-outer'>
      <b:with value='"popular-posts"' var='snippetPrefix'>
        <b:include name='normalPost'/>
      </b:with>
    </div>
  </div>
</b:includable>

Les nœuds parents

Balisage dans Soho

Et enfin, le dernier thème, le principe est identique que les thèmes Contempo et Emporio. Dans ce thème, il existe 2 variantes. L'une pour le gadget FeaturedPost et la deuxième pour le gadget PopularPosts.

FeaturedPost
Le code XML

<b:includable id='snippetedPostContent'>
  <b:with value='data:postDisplay.showFeaturedImage and data:post.featuredImage' var='hasImage'>
    <div class='post-content'>
      <b:class cond='data:hasImage' name='has-featured-image'/>
      <b:class cond='not data:hasImage' name='no-featured-image'/>

      <b:comment>Change the order and add a snippet container</b:comment>
      <b:include cond='data:hasImage' data='post' name='snippetedPostThumbnail'/>
      <div class='post-text-container'>
        <b:include name='headerByline'/>
        <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
        <b:with value='"featured-post"' var='snippetPrefix'>
          <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
        </b:with>
        <div class='post-footer'>
          <b:include name='footerBylines'/>
          <b:include data='post' name='postJumpLink'/>
        </div>
      </div>
    </div>
  </b:with>
</b:includable>

PopularPosts
Le code XML

<b:includable id='snippetedPostContent'>
  <div class='post'>
    <b:class cond='data:post.featuredImage' name='has-featured-image'/>
    <b:class cond='not data:post.featuredImage' name='no-featured-image'/>
    <b:if cond='data:post.featuredImage'>
      <div class='snippet-thumbnail'>
        <a expr:href='data:post.url'>
          <b:include data='{ image: data:post.featuredImage, imageSizes: [330,660,1320], sourceSizes: "(max-width: 660px) 100vw, 660px" }' name='responsiveImage'/>
        </a>
        <b:include name='headerByline'/>
      </div>
      <b:else/>
      <b:include name='headerByline'/>
    </b:if>
    <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
    <div class='post-footer'>
      <b:include name='footerBylines'/>
    </div>
  </div>
</b:includable>

Les nœuds parents

Source & contribution

Google PE Program
Équipe Blogger/Experts Produit Blogger

Classifications, corrélations & échantillonnages

Soraya Lambrechts

Dernière mise à jour

Licence

Ce contenu est protégé par la licence CC BY-NC-ND 4.0

🛈 Info

Il arrive fréquemment que nos contenus soient reproduits sans autorisation. Si vous avez trouvé cette fiche ailleurs, nous vous recommandons vivement de consulter Blogger Code PE pour bénéficier de la version originale, à jour et vérifiée.

Spotlight

La balise TITLE sur Blogger

Image
Histoire, bonnes pratiques, optimisation SEO et conseils avancés ! Découvrez dans ce dossier complet comment maîtriser parfaitement la balise <title> sur votre blog Blogger : de ses origines historiques à son rôle crucial en référencement naturel (SEO), en passant par les bonnes pratiques actuelles. Apprenez à rédiger des titres efficaces, attractifs, optimisés pour Google et l'expérience utilisateur, tout en évitant les erreurs fréquentes. Un guide incontournable pour améliorer votre visibilité et propulser votre blog Blogger au sommet des résultats de recherche !
En savoir plus ➤

Populaires cette semaine

Ajouter des boutons à la barre de partage Blogger

Image
Customiser la barre de partage Blogger en choisissant les services que vous souhaitez proposer à vos lecteurs.
Taille des boutons, thèmes de couleurs, restrictions d'affichage, etc.
Boutons Facebook, Twitter, Envoi par mail, Orkut, StumbleUpon, LinkedIn, BlogThis, Google+ Share, HelloCoton, Pinterest et Google +1.
Tous les boutons partagent l'adresse canonique de l'article.
etc, etc, etc...
En savoir plus ➤