messages de blog pouvant être développés

Comment puis-je créer des récapitulatifs de messages de blog pouvant être développés ?

Ce type de présentation permet d'afficher une quantité de texte arbitraire à partir du début de chaque message de blog, afin d'inciter les utilisateurs à lire le message en totalité. Les utilisateurs qui souhaitent lire le reste du message doivent simplement cliquer sur un lien pour afficher le texte dans son intégralité. Cette présentation est pratique quand une même page comprend plusieurs articles de grande longueur. Notez que pour utiliser cette fonctionnalité, vous devez activer les pages de messages de blog.

Trois éléments sont nécessaires pour créer des récapitulatifs pouvant être développés : une feuille de style CSS conditionnelle, un lien invitant à poursuivre la lecture de chaque message et une modification du code des messages de blog qui utilisent cette fonctionnalité. Examinons ces éléments un par un.

Feuille de style CSS conditionnelle

Nous allons utiliser des balises conditionnelles pour modifier la présentation des messages de blog sur les différentes pages. Ajoutez le code ci-dessous dans votre feuille de style, en fonction de votre type de modèle :

(pour les modèles classiques)

 span.fullpost {display:none;}



 span.fullpost {display:inline;}

(pour les mises en page)

 span.fullpost {display:inline;}

 span.fullpost {display:none;}

La feuille de style se trouve généralement vers le début du modèle, entre les balises . Si elle se trouve dans un autre fichier, ajoutez les lignes ci-dessus dans votre modèle afin que les balises conditionnelles puissent fonctionner. Veillez à ajouter les lignes entre les balises .

Nous venons de définir une classe, "fullpost", qui s'affiche seulement sur les pages de messages de blog (liens permanents). Une partie de chaque message utilisera cette classe, comme nous le verrons plus loin.

Liens incitant à poursuivre la lecture

Ajoutez le code ci-dessous dans le modèle, à la suite de la balise <$BlogItemBody$> ou :

(pour les modèles classiques)

 ">Suite

(pour les mises en page)

 Read more!

Le lien incitant à poursuivre la lecture s'affiche uniquement dans la page principale et dans les pages d'archives. Il mène le lecteur à la page du message de blog contenant le texte complet du message. Vous pouvez bien évidemment remplacer la mention "Suite" par le texte de votre choix.

Modification des messages de blog

Le dernier élément dont nous avons besoin est un petit fragment de code dans le message de blog. Ce code est nécessaire dans chaque message devant utiliser la fonctionnalité :

Ce fragment de code peut être placé dans le modèle de message de blog si vous ne voulez pas avoir à le saisir pour chaque message. Vous saisissez le début du message à l'extérieur des balises ci-dessus et le reste, à l'intérieur, comme ceci :

Voici le début de mon message. Et voici le reste.

Quand un visiteur consulte votre blog, le message se présente comme ceci :

Voici le début de mon message.
Suite

Si le visiteur clique sur le lien, il accède à la page de message de blog qui contient la totalité du message :

Voici le début de mon message. Et voici le reste.

Remarques :

• Veillez à effectuer une copie de sauvegarde de votre modèle avant de commencer, comme pour toute autre modification du modèle. Copiez et collez tout le code du modèle dans un fichier texte sur votre disque dur, afin de pouvoir le récupérer dans ce fichier en cas de problème.
• Il existe une autre façon de créer des extraits de messages. Elle consiste à utiliser la méthode afficher/masquer sur un message de blog entier. Chaque méthode présente ses avantages et ses inconvénients.
• Avantage des récapitulatifs pouvant être développés : vous pouvez choisir ce qui sera présenté, plutôt que d'avoir à vous contenter du titre. En outre, vous pouvez appliquer la méthode à certains messages uniquement (aux messages longs, par exemple).
• Inconvénients : il faut modifier les messages eux-mêmes, et non uniquement le modèle. Toutefois, le lien "Suite" figure dans le modèle, ce qui veut dire qu'il s'affiche indépendamment du fait qu'un message a été tronqué ou non (nous vous laissons, à titre d'exercice, le soin de modifier cela).

Read More...

Summary only...

Déclarations CSS

Que puis-je faire d'autre avec les déclarations CSS ?

CSS (Cascade Style Sheets)

feuillet de style en cascade (échelonné) (pour des documents HTML, comprenant plusieurs styles que l'on peut adapter aux nécessités demandées)

[Retour Résultats de la recherche]

Vous pouvez modifier la quasi-totalité des éléments de présentation du blog en modifiant simplement la feuille de style de votre modèle. Certaines des opérations les plus courantes sont décrites ci-dessous. Pour obtenir davantage d'informations et des exemples, consultez les pages Exemples CSS des cours W3 Schools et Introduction W3C aux feuilles de style CSS.

Dans nos modèles par défaut, toutes les déclarations CSS se trouvent au début, entre les balises . Elles se présentent sous la forme d'une série de lignes telles que celles-ci :

La ligne sur fond bleu indique le style appliqué à chaque balise

dans le blog. Nous allons voir comment utiliser certaines options de style. Tous les extraits de code ci-dessous peuvent être insérés entre des {accolades} dans la feuille de style.

Code	Exemples
Couleurs
color:blue;	Ce texte est en bleu.
background:yellow;	Ce texte est associé à un fond jaune.
Vous pouvez indiquer un grand nombre des couleurs courantes (comme par exemple le rouge, le vert ou le jaune), ou entrer le code hexadécimal pour avoir accès à une plus large palette de couleurs (#0033AA, par exemple). Pour plus d'informations sur les couleurs, consultez la page Référence des couleurs Web.
Bordures
border:solid 1px red;	Ce texte est entouré d'une bordure rouge.
Une bordure peut se présenter sous la forme d'une ligne continue, d'une série de points ou d'une série de tirets. La largeur est indiquée en pixels (px). La couleur peut être indiquée directement ou à l'aide d'un code hexadécimal. Pour ajouter une bordure sur un seul côté, utilisez l'instruction border-top, border-bottom, border-right ou border-left.
Polices
font-family:"Times New Roman",Serif;	Ces caractères sont ceux d'une police Serif.
font-family:Verdana,Sans-Serif;	Ces caractères sont ceux d'une police Sans-Serif.
Vous pouvez entrer une liste de polices. Si la première police n'est pas disponible sur l'ordinateur de l'internaute, c'est la deuxième qui est utilisée, et ainsi de suite avec les autres polices désignées. Si vous indiquez « Serif », la première police Serif disponible est utilisée.
font-size:24px;	Ces caractères ont une taille de 24 pixels.
L'unité de mesure de la taille peut être le pixel (px), le point (pt), le pouce (in) ou un pourcentage de la taille par défaut (%).
font-weight:bold;	Ce texte est en gras.
Vous avez le choix entre le style Gras et le style Normal.
text-decoration:underline;	Ce texte est souligné.
Les options de mise en valeur du texte sont les suivantes : Aucune (none), Souligné (underline), Ligne au-dessus (overline) ou Barré (line-through). Elles s'emploient le plus souvent pour supprimer le soulignement des liens.
text-align:right;	Ce texte est aligné à droite.
Un texte peut être aligné à gauche ou à droite, ou être justifié.
Marges intérieures et extérieures
margin:15px;	Ce texte est associé à une marge extérieure de 15 pixels sur tous les côtés.
padding:15px;	Ce texte est associé à une marge intérieure de 15 pixels sur tous les côtés.
Les deux types de marge désignent un espacement par rapport à un autre élément. La différence est que la marge extérieure se situe à l'extérieur de la bordure et la marge intérieure, à l'intérieur (la bordure a été ajoutée uniquement à titre d'exemple). Comme pour l'instruction border, vous pouvez indiquer un seul côté à la fois en entrant margin-left, padding-top, etc. Vous pouvez également définir toutes les marges à la fois en entrant margin:1px 2px 3px 4px;. Dans ce cas, l'ordre est le suivant : marge supérieure, droite, inférieure et gauche.

Remarques :
Vous pouvez aussi mettre en forme une partie seulement du texte d'un message blog. Voici un exemple :
Ce texte s'affiche en rouge.

Read More...

Summary only...