Un postit

08.02.2011

Le mot est une marque déposée et férocement défendue, je ne devrais pas l'employer – mais tout le monde le comprend. Dans la suite, par prudence et pour le fun, je parlerai plutôt de billet :-)

De quoi s'agit-il ?

Un petit rectangle collé par-dessus la façade du blog. Dans ce rectangle vous insérez un bref message pour vos lecteurs, et vous dotez ce rectangle d'une présentation évocatrice, par exemple l'aspect d'un célèbre adhésif jaune repositionnable. Jusque là tout est clair, non ?

Comment allons-nous procéder ?

Je vais vous décrire trois versions, de plus en plus riches, de ce gadget :

tout simple : purement HTML et CSS, un billet toujours visible (possible dès le niveau Confiance chez OB)
un peu de JavaScript : le même billet mais escamotable par votre visiteur (toujours possible dès le niveau Confiance chez OB)
beaucoup de Javascript : le billet est toujours escamotable mais, de plus, s'affiche ouvert ou fermé selon que le visiteur ne l'a pas encore lu ou le connaît déjà. C'est le système utilisé sur ce blog, il n'est possible qu'à partir du niveau Privilège.

La version simple

Postit

Cadeau pour commencer : cette image. Oui , vous l'avez déjà vue quelque part ! Vous pouvez la copier, il n'y a pas d'anti-clic droit.

Ensuite, trois idées simples :

le billet proprement dit est un petit div archi-banal, pas la peine de cramer un module de texte libre pour si peu ;
vous voudrez sans doute que ce billet apparaisse plutôt dans le haut du blog. Nous allons donc l'inclure dans l'en-tête du blog.
vous voudrez aussi qu'il s'affiche par-dessus le blog, sans déranger autrement sa mise en page. Donc nous l'allons mettre en position:absolute .

Commençons par le HTML. Allez dans la section configurer du blog, la partie mise en page . Ouvrez l'en-tête du blog (petit marteau), cliquez sur contenu personnalisé si ce n'est déjà fait, puis sur le bouton HTML de l'éditeur et ajoutez, à la fin du code source qui s'affiche alors, le petit texte que voici :

 <div id="billet"> <div class="contenu"> Le texte de votre billet, ne vous gênez pas pour y mettre un titre ou des paragraphes ou ce que vous voudrez. </div> </div>

Reste à habiller le bébé, par exemple avec ce bout de CSS que je vous suggère d'ajouter au CSS du blog :

 #billet {background-image:url(http:gnagnagna/billet.png); width:218px; height:150px; position:absolute; left:20%; top:50px} .contenu {padding:20px}

Je vous laisse le soin d'écrire la bonne url pour l'image de fond et celui de choisir des valeurs numériques qui vous conviennent. Je vous laisse aussi fignoler la taille et la police de caractères, et tous autres détails esthétiques.

En jouant sur top et left (ou right) vous pouvez placer le billet où ça vous chante dans l'écran. Si jamais il n'apparaît pas, ou bien s'il ne déborde pas de la bannière du blog, pas de panique ! Rajoutez seulement

 #cl_0_0 {overflow:visible}

… dans le CSS.

Bien sûr aussi, et si vous êtes en configuration avancée , il vous revient d'insérer ces deux échantillons de HTML et de CSS au bon endroit dans la config et le CSS accueil , articles , pages . Vous n'êtes pas obligé de le faire partout, tout dépend de vos goûts en matière de décoration.

Et pour renouveler le texte ? Ben… retour à la case configurer/mise en page et saisie du texte, en mode source ou en mode normal. Rien d'extraordinaire.

Question : était-il indispensable de créer le deuxième div de classe contenu, emboîté dans le premier ? Réponse : non, on aurait pu se contenter d'un seul niveau. Deux bonnes raisons pour le faire tout de même :

cela permet de découpler les deux niveaux. Les dimensions du billet sont fixées une bonne fois (égales à celles de l'image de fond), on peut ajuster les marges ou padding du contenu sans craindre de déformer le billet. À l'opposé, n'avoir qu'un niveau obligerait à ajuster width ou height à chaque modification de padding. Bref : on se simplifie la vie plutôt que d'économiser un bout de chandelle.
ça va servir dans les versions suivantes du gadget.

Résumé : malgré la longueur de mon baratin, cette version est du HTML/CSS tout à fait basique. Vivement la suite…