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-->

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