• Fenêtre message à l'ouverture du blog

    Fenêtre message à l'ouverture du blog

    Une fenêtre qui s'ouvre sur la page, pour souhaiter la bienvenue ... On peut y placer du texte, des images ou un bouton pour entrer dans le blog Le tuto viendra bientôt

    Sinon, demandez les codes via un comm

     

     

    Voici les codes et des explications pour personnaliser ( car on peut attribuer un style et des effets CSS différents à chaque élément séparé)

    Ces codes:  html, CSS et javascript sont à mettre dans la page où l'on veut que la fenêtre s'affiche, en passant par le bouton <> code source de l'éditeur ;
    Ici, les codes sont dans l'article mais pour un affichage fenêtre sur la page d'accueil, les codes peuvent être mis dans la présentation de la rubrique qui se trouve en page d'accueil de votre blog.

     

    Le code html en jaune   les explications en orange

    <div id="fond" style="display: block;">&nbsp;</div><!--le fond de la fenetre, ici les branches cerisiers en mosaique-->
    <div id="fenetr" class="animatebox animation swing" style="display: block;"><!--ici début element fenetr=cadre qui s'affiche sur le fond-->
    <p>Pour acc&eacute;der &agrave; l'article, fermer fen&ecirc;tre </p><!-premier emplacement pour du texte-->
    <div id="close" title="Fermer la fenetre" onclick="document.getElementById('fond').style.display = 'none';document.getElementById('fenetr').style.display = 'none'">X</div><!--ici, le bouton pour fermer la fenetre=petite croix-->
    <a  href="http://bleulezard.eklablog.com/"><br /><br />Accueil</a><!--ici le bouton/lien qui mène à la page adresse dans href-->
    </div><!--fermeture du code pour la fenetre-->

     <div id="fond" style="display: block;">&nbsp;</div>
    <div id="fenetr" class="animatebox animation swing" style="display: block;">
    <p>VOTRE TEXTE</p>
    <div id="close" title="Fermer la fenetre" onclick="document.getElementById('fond').style.display = 'none';document.getElementById('fenetr').style.display = 'none'">X</div>
    <a href="http:/DE LA PAGE ACCUEIL OU AUTRE PAGE "><br /><br />&nbsp; &nbsp; &nbsp;Accueil</a></div>

     

    Le code CSS et explications

    <style><!--

    #fond {/*STYLE DU FOND*/
    position:fixed;
    top:-100px;
    left:-100px;
    min-width:200%;
    min-height:200%;
    background-image:url(http://ekladata.com/ZVzTfs4h6cRSVCNinPSKQ6Xrnn0.png);/*image mise pour le fond, branches cerisiers mosaique*/
    background-color:rgba(0, 0, 0, 0.4);/*couleur opaque mise au fond*/
    z-index:100;
    }

    #fenetr {/*STYLE DE LA FENETRE*/
    display:block;
    position:fixed;
    top:152px;/*distance de la fenetre du bord sup*/
    left:50%;/*fenetre mise au milieu de la largeur*/
    width:458px;/*largeur de la fenetre*/
    min-height:440px;/*hauteur minimale*/
    background-image:url(http://ekladata.com/ig_d6Mx_r7c8FphfD1QTrlcEbY0.png);/*image mise en fond de fenetre: le cercle cerisiers et bienvenue*/
    margin-left:-140px;
    border:4px ridge #7d1931;/*style cadre fenetre*/
    border-radius:14px;/*bords arrondis*/
    background-color:#7d1931;
    color: #eeb8cf;/*couleur du texte dans la fenetre*/
    text-shadow: 4px 1px 2px #670015;/*une ombre de mise sur le texte*/
    padding: 20px;
    font-size: 22px;/*taille police texte*/
    box-shadow:6px 6px 10px black;/*ombre autour de la fenetre*/
    z-index:110;
    }

     #fenetr a {/*STYLE DES LIENS FENETRE*/
    position:absolute;
    top:212px;/*distance du bord sup*/
    left:50%;/*position dans la largeur*/
    margin-left: -84px;
    min-width: 140px;
    min-height: 140px;
    border:1px solid white;/*bordure aux liens*/
    border-radius:82px;
    background: -webkit-linear-gradient(left top, #670015 , #c45e79);/*fond dégradé*/
    background: -moz-linear-gradient(left top, #670015 , #c45e79);
    color:#eeb8cf;/*couleur texte liens*/
    text-shadow: 2px 1px 2px #561506;/*ombre sur texte*/
    padding:5px;
    text-decoration: none;/*liens non soulignes passagesouris*/
    box-shadow:6px 6px 10px #561506;/*encore une ombre */
    transition:0.7s;/*sa, cest pour animation*/
    }

    #fenetr a:hover {/*STYLE LIENS PASSAGE SOURIS*/
    border:1px solid #eeb8cf;
    border-radius:82px;
    background: -webkit-linear-gradient(left top, #c45e79, #670015);
    background: -moz-linear-gradient(left top, #c45e79, #670015);
    color: #7d1931;
    transform:scale(1.1)rotate(1080deg);/*transition scale donne un agrandissement ici de 10pourcent rotate fait tourner*/
    -webkit-transform:scale(1.1)rotate(1080deg);
    -moz-transform:scale(1.1)rotate(1080deg);

     

    #close {/*STYLE BOUTON FERMER FENETRE*/
    position: absolute;
    z-index:200;
    top: 0px;
    right: -13px;
    background-color: #eeb8cf;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    padding: 0px;
    border-radius: 50%;
    margin-top: -15px;
    text-align: center;
    cursor:pointer;
    border:2px solid #734f51;
    text-shadow: 3px 3px 3px #561506;
    box-shadow:6px 6px 10px #561506;
    transition:0.5s;/*pour animation sur le bouton*/
    }

    #close:hover {/*STYLE BOUTON FERMER AU PASSAGE SOURIS*/
    color:#7d1931;
    transform:scale(1.5)rotate(720deg);/*le bouton grossit de 50pourcent et tourne de 720 degr*/
    -webkit-transform:scale(1.5)rotate(720deg);
    -moz-transform:scale(1.5)rotate(720deg);
    }

     /*et pour finir ANIMATION DE LA FENETRECADRE*/

    .animatebox {
    animation-duration: 3s;/*duree anim*/
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-delay: 3s;/*temps depart anim*/
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-iteration-count: 10;/*nombre de fois anim*/
    -webkit-animation-iteration-count: 10;/*infinite si on veut a linfini*/
    -moz-animation-iteration-count: 10;
    }

    @keyframes swing {/*definition de l anim*/

    0% {

    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);

    }

    10% {

    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);

    }


    20% {

    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);

    }


    30% {

    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);

    }

    40% {

    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);

    }

    50% {

    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);

    }


    100% {

    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);

    }

    }

    .swing {/*nomme lanim*/

    transform-origin: top center;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: top center;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    animation-name: swing;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    }
    --></style>

     

     Le code JAVASCRIPT

    <script>// <![CDATA[
    if (!sessionStorage.pageLoadCount) {
    sessionStorage.pageLoadCount = 0;
    }
    sessionStorage.pageLoadCount = parseInt(sessionStorage.pageLoadCount) + 1;
    document.getElementById('count').textContent = sessionStorage.pageLoadCount;document.getElementById('fond').style.display = "none";document.getElementById('fenetr').style.display = "none";
    // ]]></script>

     
     
     

    Pour accéder à l'article, fermer fenêtre

    X


           Accueil
    « Gadget choix couleur des liens par le visiteurMettre un mot de passe à une adresse web »
    Partager via Gmail Yahoo! Google Bookmarks

  • Commentaires

    1
    Samedi 9 Janvier 2016 à 10:01

    wouaaaaaah ! mais en plus c'est suuuuper joli !!

    le carré avec le rond mobile dedans et la jolie branche de cerisier autour c'est vraiment chouette à regarder je trouve : bravo Le bleu lézard !!!

    et du coup je me moque de moi : tes astuces sont top, ça me donne envie de plein de modifs sauf qu'elles s'auto-annulent au fur et à mesure... de tes nouveautés he (et aussi parce que j'arrive pas à me décider sur une refonte visuelle/graphique de La boîte...) 

    Merci beaucoup pour tous ces partages,
    c'est vraiment très agréable  cool

     

    2
    Mardi 12 Janvier 2016 à 16:44

    Bonjour Pipiou, 

    Merci à toi pour tes gentils mots doux qui me font à chaque fois très plaisir !

    En fait, j'ai piqué l'idée à papyrock tongue

    J'essaie de faire d'autres exemples mais je vais les mettre sur un autre blog parce que les fenêtres entrent en conflit entre elles !

    Avec un autre truc, cette fois ci de Papasti, j'ai mis un exemple qui fait apparaitre le contenu du module derniers articles
    là normalement
    http://maxim-34.ek.la/rubr-1-c25984484

    Tu sais, tout changer n'est pas une finalité en soi
    surtout quand on a un super design comme le tien

    mais tu peux aussi installer une fenêtre comme cela de temps en temps.. pour surprendre tes visiteurs habituels ( tu y mets un pipiou qui danse la valse, je suis sur que ça va en scotcher quelques uns !)

     

    3
    Mardi 12 Janvier 2016 à 17:24

    alors merci aussi à Papyrock et à Papasti ;-) Tout ce que vous présentez est vach'ment sympa, à commencer par le fait de partager aussi facilement :  cool

    et merci pour le "super design" chez Pipiou, on m'a aidée parce que moi pas super top en graphisme !  Tu m'as donné une idée de variations : c'est possible d'avoir les codes/manips (de cette fenêtre-messages) pour que je fasse des essais sur mon blog tests ?

    si tu préfères par mail, tu le dis : je t'envoie l'adresse par MP.

    Merci Le Bleu Lézard  smile

     

    4
    Mercredi 13 Janvier 2016 à 19:05

    Bonsoir Pipiou, 

    Puisque que tu es interessée et parce que c'est toi, je vais mettre un p'tite explication dans l'article..

    surement ce soir

    Quand ce sera fait, je mettrai un comm ici  pour t'avertir de la chooose

    A plus

    5
    Samedi 16 Janvier 2016 à 17:07

    hé bin : ça y'en a être quelques lignes de codes, et avec les explications en plus : merciiiiiiiiiiiiiii !

    je te cite "Quand ce sera fait, je mettrai un comm ici  pour t'avertir de la chooose" :  t'as oublié le comm. avertisseur ou... p'têt que c'est pas fini ?  

    6
    Lundi 18 Janvier 2016 à 12:52

    Bonjour Pipiou, 

    Merci de me citer MAIS je ne suis pas encore complètement sénile; je me souviens de ce que j'ai dit qques cms au dessus:

    he

    Les faits marquants de la semaine dernière:
    Alors que je rédigeais cet article --> coupure courant secteur, certainement surtension . résultat:  box grillée , plus d'internet chez moi .
    L'article travaillé en ligne car déjà publié ( donc je ne voulais pas le repasser en brouillon sinon erreur 404: page introuvable) n'étant pas fini, j'ai du trouver qques instants ailleurs pour le compléter..

    MAIS j'aurais du surtout y ajouter  un petit message d'alerte pour dire qu'il était en cours de rédaction car 
    Le week-end a été campagne et out of.... the web glasses

     

    Pour la longueur du code, j'étais certain que cela allait te "surprendre" ( j'espère que ça ne t'arrêteras pas car..)
    les  CSS animations ont toujours beaucoup de lignes: 
    1- parce qu'elles peuvent ainsi être complexes, regrouper plusieurs effets et
    2- une ligne répétée avec préfixe différent pour chaque navigateur afin qu'être prise en compte par tous.

    A plus

     

    7
    Mardi 19 Janvier 2016 à 09:08

    lol : mééééé non t'es pas sénile ! c'était + pour expliquer le point d'interrogation qui suivait ;-) 

    Grand merci, et t'as bien fait d'aller à la campagne : ça permet de décompresser de la surtension   

    Je m'en vais emporter tout ça sur mon blog-test pour faire mes essais : je te tiens évidemment au courant. T'inquiète pas si tu vois rien venir dans le mois : j'ai un peu de marge temporelle quant à ce à quoi je pense. (quel suspense ! he) (1)

    MERCI Le Bleu Lézard ! 


    (1) : non non : c'est pas pour Noël !

     

    8
    Dimanche 31 Janvier 2016 à 14:02

    Un  coucou pour te dire que j'ai fini par y arriver (blog-tests) mais la fenêtre-message restait statique (pas très grave) (croix de fermeture ok)

    J'ai peaufiné à ma sauce... 2h de réglages ou plutôt d'essais divers zé variés... et je me déconnecte pour vérifier que rien ne plante nulle part.
    C'est quoi ce code qui apparait en bas de la page sous mot de passe ????? Donc un par un je vire pour voir si l'affichage disparait : toujours là !
    J'ai fini par virer TOUT ce que j'avais fait de la fenêtre/message à l'ouverture, merdoum !
    D'autant plus merdoum que finalement c'était pas du tout ce code qui posait problème !!!!!!!!!
    quelle nouille !!!!!!!!!!

    Tant pis, je recommencerai. pour info y'a un p'tit souci dans le CSS
    dans ANIMATION DE LA FENETRE CADRE
    cette ligne :
    --> webkit-animation-iteration-count: 10;/*infinite* si on veut a linfini/ 
    il manque une étoile juste avant le slash de fin

    Bon bin... pause et @ refaire !

    Bon dimanche à toi

     

    9
    Dimanche 31 Janvier 2016 à 17:42

    Coucou Pipiou

    Alors tu es pour le travail le dimanche ?!

    J'ai bien ri en lisant ton comm, t'imaginant en train de pester ...sur moi et mes effets...de style...

    Mais dis donc ?  le code sous le mot de passe, c'ét'y pas être le message de marynord sur le forum !!!????

    Merci d'avoir vu l'astérisque qu'il est parti se balader sur la ligne (j'ai du rajouter du comm un peu trop vite- je rectifie tt de suite-). Cela prouve que , après tout le temps que tu as passé sur cette foutue fenêtre, tu es rodée pour les grands travaux chez toi !

     

     

    10
    Mardi 2 Février 2016 à 17:34

    J'y crois pas !!!!!!!!!!!!!!!!!!!!!!!!!

    une pôv' ligne vide via un return (dans le css)... et tout s'améliore : la fenêtre-message se ferme, et direction la bonne page !!! Truc de ouf !!!

    1h que je farfouillais parce que la fenêtre-message ne se fermait plus du tout ! Alors que (évidemment) elle se fermait parfaitement avant-hier  he

    Je n'arrive pas à centrer le texte dans le rond du milieu, d'autant que le rond du milieu a disparu !?  mais où qu'il est ? c'est pas grave mais j'aimerais arriver à centrer le texte (un peu plus long que "accueil", c'est pour ça que c'est pas grave si y'a plus de rond au milieu ;-)

    Je continue mes essais, c'était pour te tenir au courant smile  Donc @ suivre...

     

    11
    Vendredi 5 Février 2016 à 18:06

    Heureusement que tu es là, Pipiou,  pour tester mes articles he

    Yavait quelques erreurs dans mes codes ..

    il en reste peut-être encore quelques unes !!

    allez, on cherche encore happy

    12
    Vendredi 5 Février 2016 à 18:08

    Bon, et bien, ici aussi la fenêtre revient à chaque fois que l'on rafraichit ou revient sur la page..Je crois que la seule chose qui la ferme définitivement, c'est le clic sur la croix de fermeture..

    J'y vais essayer de réchéflir à une solution...

    13
    Vendredi 5 Février 2016 à 18:13

    so so , un autre petit essai

    14
    Lundi 29 Août 2016 à 23:56

    bonjour bravo pour votre blog pleins d astuce merci yesje vais regarder tout cela 

    15
    Mercredi 31 Août 2016 à 12:50

    Coucou  smile

    tu sais que ça serait bien si on avait de tes nouvelles Maximum34 ? parce que là ça commence à m'inquiéter ce silence...

     

    16
    Mercredi 24 Mai 2017 à 08:03

    Bonjour , grâce à toutes ces configurations personnalisées , on ne se croirait plus sur eklablog , ça change vraiment tout !

    la fenètre "Bienvenue" je connais grace à Papyrock , chez ki j'ai testé beaucoup de ces astuces !

    Peut etre ke je testerai aussi certaines de chez toi !

    en tout cas tres beau travail de code , ce fut un plaisir de visiter, je reviendrai kan j'aurai + de temps

    Bonne journée

    17
    Samedi 25 Décembre 2021 à 07:50

    Bonjour,

    Merci beaucoup et joyeux Noêl à tous



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl