Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux. Feinte innocence et vraie naïveté (ou vice-versa). Encore un blog qui agite ses petits bras en couinant "Viens me lire !"
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
:-)
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 ?
Je vais vous décrire trois versions, de plus en plus riches, de ce gadget :
billettoujours visible (possible dès le niveau Confiance chez OB)
billetmais escamotable par votre visiteur (toujours possible dès le niveau Confiance chez OB)
billetest 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.
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 :
billetproprement dit est un petit div archi-banal, pas la peine de cramer un module de texte libre pour si peu ;
billetapparaisse plutôt dans le haut du blog. Nous allons donc l'inclure dans l'en-tête du blog.
par-dessusle 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}
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 :
Résumé : malgré la longueur de mon baratin, cette version est du HTML/CSS tout à fait basique. Vivement la suite…