• Description perso2

    Le sujet ayant intéressé, je vous rappelle les pages qui nous en expliquent le principe:

    La Gentille Rebelle.

    Microbidouille

    Vous trouverez comment paramétrer votre blog pour que les descriptifs apparaissent au survol d'une image.

    Le code pour modifier ce descriptif en permanence sur  votre blog.

    Comme je ne suis pas pour les paramètres généraux, j'ai proposé le code pour un article, sur le même principe.

    Un point qui, pour vous, peut être différent de celui expliqué chez Microbidouille, c'est que vos images ne sont pas forcément hébergée sur Ekla; une visiteuse héberge sur Picasa et envoie directement ses images dans son article ... alors, comment modifier le descriptif, dans ces conditions.

    Le second point est la décoration de votre descriptif, qu'il vous faut ajuster à vos goûts.

    *****

    Pour le premier point, il vous faut créer votre article, comme d'habitude puis ouvrir le code source de votre article (<>); exemple d'image chez Picasa de Monica-Breitz: 

    <p style="text-align: center;"><a href="http://ekladata.com/ViFkZuq3th3xVAvH7plCtBuUFfY.jpg"><img src="http://ekladata.com/ViFkZuq3th3xVAvH7plCtBuUFfY@880x880.jpg" alt="belle oie "/></a></p>

    Son image est centrée et le descriptif est entre les guillemets de alt="belle oie".

    Si elle veut modifier le descriptif, elle remplacera belle oie par Une cane et sa progéniture.

    Ce descriptif apparaîtra dans un rectangle à fond jaune clair avec texte en noir.

    *****

    Voyons comment décorer le descriptif; rappel du code à écrire en fin d'article:

    <style><!--

    #help_bubble{la décoration choisie;}

    --></style>

     

     

     

    Mon descriptif propre, personnel et à moi tout seul, selon la formule de Francis Blanche, je crois!

    La bulle décorée n'apparaît pas en prévisualisation; il faut enregistrer l'article pour la voir.

    Mon code:

     <p><img style="display: block; margin-left: auto; margin-right: auto;" src="http://ekladata.com/rjcA_ta1-EkECCR2UPGXCWxWleM.jpg" alt=" Mon descriptif propre, personnel et &agrave; moi tout seul, selon la formule de Francis Blanche, je crois!" /></p>

    <style><!--
    #help_bubble{width:300px; border-radius:20px;text-align:center; background:url('http://ekladata.com/xwvjtLzimjnTXCD3slrCFvUWSFM/doghair.jpg'); background-size:cover; border:1px solid brown; padding:8px; box-shadow:4px 4px 6px black, inset 4px 4px 6px white, inset -4px -4px 6px black; font-size:14pt; color:white; text-shadow:1px 1px black;}
    --></style>

    width:300px; si vous ne précisez pas la hauteur, elle s'ajustera automatiquement en fonction de la longueur du texte.

    border-radius:20px; arrondi que vous pouvez écrire en % mais qui former un ovale, la largeur étant différente de la hauteur et 20% de choses différentes...

    text-align:center; texte aligné au centre; par défaut, il est aligné à gauche.

    background: ce peut être une couleur ou une image, ici une texture hébergée sur Ekla... et elle remplit la case background-size:cover;

    border:épaisseur, style, couleur.

    padding: espace intérieur entre le texte et la bordure.

    box-shadow: ombres intérieures et extérieures.

    font-size:14pt: taille de la polie de texte.

    color:white; couleur blanche du texte.

    text-shadow: ombre noire d'un coté des lettres pour les accentuer.

    Ecrire le code CSS à chaque article vous permet de modifier la présentation de votre descriptif; si vous l'écrivez en CSS du blog, il sera toujours le même sur tout les articles; vous pourrez cependant le modifier pour tout les articles d'un coup en modifiant le code CSS blog. (voir sites en référence.)

    Si vous voulez un rond, il faut partir d'un carré au lieu d'un rectangle: il vous faudra définir largeur et hauteur:

    #help-bubble{width:150px; height:150px; border-radius:50%;...}

    A ce niveau là, c'est à vous de jouer !