10 nov. 2010

(Blogger) Afficher le pied d'article uniquement en page des articles

Le pied d'article est la zone située en fin d'article où apparaissent les libellés et les icônes Facebook, Mail, etc :


Si, en page d'accueil, vous avez mis vos articles en mode Lire la Suite, il n'est peut-être pas indispensable de faire apparaître ce pied d'article.

Pour réaliser les modifications, vous allez dans Présentation > Modifier le code HTML

Vous cochez Développer des modèles de gadgets

Vous recherchez  (Edition > Rechercher) :
<div class='post-footer'>
et vous collez à la suite
<b:if cond='data:blog.pageType == "item"'>
vous obtenez donc
<div class='post-footer'><b:if cond='data:blog.pageType == "item"'>
Maintenant, c'est un peu plus compliqué, vous devez trouver où fermer cette condition (b:if). Observez la partie consacrée au pied d'article
    <div class='post-footer'><b:if cond='data:blog.pageType == "item"'>
    <div class='post-footer-line post-footer-line-1'>

<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> </div>

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>

          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div></b:if>
  </div> 
Vous constatez que le pied d'article est composé de div qui s'ouvre, qui ont un contenu et qui se referme :
<div>contenu</div>
Vous avez placé votre conditionnel <b:if cond='data:blog.pageType == "item"'> juste après l'ouverture de la première div <div class='post-footer'> il va falloir le refermer </b:if> juste avant la fermeture de cette div </div>
Ce qui donne en version simplifiée
<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
</b:if>
</div>   

Je sais, ça semble compliqué, mais pas d'affolement, il suffit de tester, de prévisualiser pour voir si ça fonctionne. Le programme de vérification de Blogger est bien fait, si vous faîtes une erreur, il vous le signale, il vous suffit de la corriger.

5 commentaires:

  1. Hello, et bien, que dire, avec toi j'en apprend tous les jours, je te remercie beaucoup et surtout bonne fin de journée

    RépondreSupprimer
  2. Bonjour Anna,

    Je n'arrive pas à placer les données au bon endroit

    Merci

    Thierry

    http://worldwide-defence.blogspot.com/

    RépondreSupprimer
  3. super astuce ! Merci bcp ça fonctionne parfaitement et réduit considérablement le temps de chargement de la page d'accueil !$
    http://reggaetubewatcher.blogspot.com

    RépondreSupprimer
  4. Bonjour, merci pour cette astuce. J'ai eu un peu de mal à trouver la bonne position pour le dernier b:if, mais finalement ça marche.
    De manière plus générale, bravo pour votre blog et pour la qualité de vos explications. Je vais continuer à appliquer tous vos conseils !
    J'ai une petite question à laquelle je ne parviens pas à trouver de réponse : comment, dans un message, changer la police (police et/ou taille des caractères) du pied d'article ("libellés:..." et "publié par..."). Je n'ai pas trouvé d'option de mise en forme dans le menu blogger. Résultat, ça s'affiche dans la même taille de police que le corps du message, et je trouve ça un peu gros. Est-ce possible ? Je précise que je n'y connais rien en html et CSS, je ne fais qu'appliquer les trucs trouvés sur le web. Merci d'avance !
    http://tendance-talons.blogspot.fr/

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)