• Blog parfois visible, parfois simulé hors ligne

     

    Blog de test  

     


     test stat 

    07/07/17 15:15  > 217    20:19 > 217
    09/07/17  21:50 > 220
    10/07/17 10:00 > 223
    01/03/19 > 619

     

    Date de reprises des ateliers


     

     TEST AGENDA avec Info-bulle simple ou Info-bulle avec lien au clic

    Exemple d'agenda avec un format mensuel de 190x190px

    Tout par css : saisie des bulles simples avec l'éditeur (mais ça reste possible aussi dans le code source)

    source du principe de base des bulles:
    http://gerer-mon-blog.eklablog.fr/-a107359018

    dans les bulles de cet agenda :    
      pour une invite à cliquer           pour une simple info

     

    AOUT 2018
    L M M J V S D
      1 2 3le 3 Août on fête
    les Lydie
    4 5 6Voir les odonymes de ce jour
    7 8 9 10Saint Laurent partage l'été par le milieu. 11 12 13
    14Infos sur les feux d'artifice en Vendée
    15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30 31> Fin des vacances d'été, mais début d'un week-end cool
         

     

    Les bulles de cet agenda fonctionnent avec ce code css

    /* ====== INFO-BULLES sans JavaScript ====== */
    /* --- Début CSS info-bulles, -thierry- modifié)--- */
    /* ➀ */
    .bulleperso a          /*  ▇  sélecteur texte du lien */
    {
    text-decoration:none;         /* pas de soulignement */
    background-color:#FFFFAA;     /* couleur surlignée */
    color:red;         /* ✔ couleur du texte */
    font-weight : bold;   /* ✔ caractères texte en gras  */  
    }
    /* ➁  */
    .bulleperso a:hover    /*  ▇  sélecteur texte du lien survolé */
    {
        cursor:help;        /* curseur souris */
    }
    /* ➂ */
    .bulleperso a + sub       /* ▇ sélecteur texte d'info en indice après le lien */
    {  
    bottom:auto;         /* Corrige le positionnement du sub */
    line-height:inherit;         /* Corrige la taille de ligne du sub */
    display:none;        /* pas d'affichage avant le survol */
    position:absolute;        /* position absolue pour que la bulle soit positionnée hors du texte */
    font-size:14px;        /* ✔ taille du texte du lien */
    color:darkblue;        /* couleur du texte d'info */
    text-align:left;        /* alignement du texte */
    -moz-border-radius:10px;    /* bordure arrondie 10px de rayon */
    -webkit-border-radius:10px;
    border-radius:10px;
    margin:20px 10px 0px -200px;    /*  ✔ décale l'info-bulle */
    padding:10px;            /* marge intérieure de 10px */
    padding-left:50px;            /* marge intérieure gauche de 50px pour laisser de la place à l'image */
    border:1px solid #0000AA;        /* taille, style et couleur de la bordure */
    /* ↴ fond de la bulle couleur #ddd avec image non répétée décalée de 5px à droite, centrée verticalement,  ↴ */ 
    background:#e3f6ce url(http://ekladata.com/0wT1YjuASovWeuiczt-ZZ2I3ADs/Cliquez25.png) no-repeat 5px center;
    }
    /* ➃ */
    .bulleperso a:hover + sub      /*  ▇   sélecteur texte en indice sur survol du lien */
    {
    display: inline;        /* affichage de la bulle */
    }
    /* ➄  ajout pour fond simple bulle (icone info si clic non actif) */
     a[href="#mabulle"] +sub {
    background:#eee url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px 
    center;
    text-align:left;        /* alignement du texte */
    }
    
    /* --- Fin CSS info-bulles --- */

     


     

     

     


     

     

    Résultat : Svg supporté

    -----------------

      lien vers <p>Blog de test</p>

    Blog parfois visible, parfois simulé hors ligne

★ BLOG TEST simulant le hors ligne (contenu masqué aux visiteurs seulement). Cela lève le doute sur une éventuelle suppression, conserve la gestion des favoris chez les visiteurs ainsi que les référencements des moteurs de recherche, ★ source du code > http://mbnoutils.eklablog.com