Allonger le résumé de l'article épinglé (FeaturedPost)

Par défaut, le résumé de l'article épinglé (gadget FeaturedPost) des thèmes Blogger est en général assez court. Pour les thèmes version 2 il est de 140 caractères. Pour les versions 3, la longueur du résumé varie selon le thème utilisé et ce n'est pas un nombre de caractères qui en est la limite, mais une hauteur d'affichage. 

Dans tous les cas ça peut être frustrant, surtout pour un article que l'on veut mettre en avant. Je vous propose donc des solutions pour allonger ce résumé, en fonction des thèmes.

Limitations générales

Les solutions proposées ne permettent pas de dépasser 1 000 caractères. Dans tous les cas, le résumé de l'article épinglé s'arrêtera l'éventuel marqueur d'expansion que vous y aurez mis.

Thèmes version 2

Voici une solution commune aux thèmes Awesome, Ethereal, Picture Window, Simple et Travel, mais pas Dynamic Views qui ne permet pas l'affichage d'article épinglé.

La solution consiste à utiliser la donnée 'postSummaryLong' qui contient les 1 000 premiers caractères de l'article.

• Important : Faites une sauvegarde préalable du thème.
• Ouvrez l'éditeur HTML de thème.
• Recherchez postSummary : vous ne devriez trouver que 2 occurrences très rapprochées.
• Remplacez la première occurence de postSummary par postSummaryLong
• Remplacez la ligne
  <data:postSummary/>
  par la ligne
  <b:eval expr='data:postSummaryLong snippet { length: 1000 }'/>
• Enregistrez le thème et testez.

Réglage

Vous pouvez ajuster le nombre de caractères du résumé à une valeur inférieure à 1 000 en modifiant la valeur de "length".

Thèmes version 3

En général la solution consiste à modifier la hauteur d'affichage réservée au résumé du poste épinglé, sauf pour les thèmes Contempo et Essential qui réclament un traitement particulier. Malheureusement, chaque thème possède son propre style, ce qui impose des procédures de modification différenciées.

Important : Faites une sauvegarde préalable du thème avant d'aller dans l'éditeur HTML de thème.

Contempo et Essential

Ces 2 thèmes nécessitent une solution particulière qui consiste à ajouter des lignes au CSS permettant de différencier l'affichage du résumé de FeaturedPost de celui des autres articles, afin que son conteneur ait sa propre hauteur.

• Recherchez .post-snippet.snippet-container . Il n'y a normalement qu'une seule occurrence
• Vous devriez voir ces lignes :
  .post-snippet.snippet-container{
  max-height:120px
  }
• Juste après ces lignes ajoutez :
  .FeaturedPost .post-snippet.snippet-container{
  max-height:240px
  }
• Enregistrez le thème et testez.

Réglage

Vous pouvez diminuer la valeur de "max-height:" dans ".FeaturedPost .post-snippet.snippet-container". Avec 240 pixels de hauteur d'affichage pour le résumé, environs 940 caractères sont visibles et c'est le maximum.

Emporio

• Recherchez .post-snippet{ . Arrêtez-vous à la deuxième occurrence. Vous devriez voir ces lignes :
  .post-snippet{
  font:$(posts.snippet.text.font);
  line-height:$(posts.snippet.text.lineHeight);
  margin:8px 0;
  max-height:$(posts.snippet.text.lineHeight * 3)
  }
• Remplacez 3 par 11.
• Enregistrez le thème et testez.

Réglage

Dans ce thème, la hauteur d'affichage est une valeur calculée en fonction de la hauteur des lignes et du nombre de lignes à afficher. Vous pouvez diminuer la valeur de "max-height:" dans cette deuxième occurence de ".post-snippet{" en jouant avec le 2ème terme du calcul qui représente ce nombre de lignes. Avec 11 lignes maximum, environs 940 caractères sont affichés.

Notable

• Recherchez .hero-post-snippet.snippet-container . Arrêtez-vous à la deuxième occurrence. Vous devriez voir ces lignes :
  .hero-post-snippet.snippet-container{
  font-size:14px;
  max-height:112px
  }
• Remplacez 112px par 310px.
• Enregistrez le thème et testez.

Réglage

Vous pouvez diminuer la valeur de "max-height:" dans cette deuxième occurence de ".hero-post-snippet.snippet-container". Avec 310 pixels de hauteur d'affichage, un maximum de 940 caractères sont visibles.

Soho

• Recherchez .snippet-container{ . Arrêtez-vous à la deuxième occurrence. Vous devriez voir ces lignes :
  .snippet-container{
  max-height:$(post.text.font.small.size * 1.7 * 7);
  overflow:hidden
  }
• Remplacez 7 par 13.
• Enregistrez le thème et testez.

Réglage

Dans ce thème, la hauteur d'affichage est une valeur calculée en fonction de la police de caractère et du nombre de lignes à afficher. Vous pouvez diminuer la valeur de "max-height:"  dans cette deuxième occurence de ".snippet-container{" en jouant avec le 3ème terme du calcul qui représente ce nombre de lignes. Avec 13 lignes maximum, environs 940 caractères sont visibles.

N'hésitez pas à laisser votre retour d'expérience en commentaire !