Générateur de fenêtre d'accueil
Cette fenêtre qui s'ouvre avant l'affichage de la page d'accueil, est à utiliser ponctuellement, pour garder son efficacité, c'est une annonce flash pour attirer l'attention du visiteur.
Attention !!! ce qui suit est prévu pour les blogs en RapidDesign ou en MasterDesign avec une base RapidDesign. Pour les autres modèles personnalisés, c'est à voir, il faudra peut-être quelques modifications ou revoir l'installation. Vous testez et si vous avez besoin d'aide, que vous êtes membres de mon blog, ouvrez un sujet dans la catégorie "Vos tests" sur mon forum ici.
Ce générateur vous aide à créer le code HTML et Javascript pour l'affichage d'une petite fenêtre avant l'affichage de la page d'accueil, le code généré sera à insérer dans le composeur de la page d'accueil en mode HTML.
Ensuite je joins une feuille de style modèle à insérer dans votre CSS personnalisé. Vous pourrez la modifier par la suite pour mettre les couleurs en harmonie avec le style de votre blog. En fin d'article vous avez un générateur de CSS. Egalement un article à voir "Questions - Réponses". Ce qui vous aidera à personnaliser cette fenêtre d'accueil.
Dans le premier générateur ci-dessous, vous indiquez le titre, le sous-titre et le texte du pied de bloc, l'adresse d'une image, soit comme un Avatar ou une image Unique plus grande, laquelle peut contenir le message.
Egalement le texte du message.
Les exemples de texte dans les champs, que vous voyez ne sont pas pris en compte, pour vous donner le choix de ne rien mettre. Seulement les champs renseignés s'afficheront.
GENERATEUR
Vous pouvez également mettre le CSS au début du HTML de la page d'accueil, avec les balises HTML(en rouge ci-dessous) pour l'insérer. Vous pouvez copier mon modèle ci-dessous.
Image qui vous aidera pour modifier le CSS du modèle.
CSS de mon modèle
Il peut vous servir de guide pour personnaliser votre fenêtre d'accueil.
<style type="text/css">
<!--
#infoModal{
background-color: #663300;
width: 500px;
max-height: 800px;
padding: 10px;
border : 3px inset #F7EF74;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#infoModal .modal-header{
background-color : #99FFCC;
height: 40px;
border-bottom: 2px groove #FFFFFF;
padding: 5px;
}
#infoModal .modal-header h2{
background-color : #FFFFFF;
color : #044711;
width : 250px;
margin: 0 auto;
padding: 0;
font-family : Garamond;
font-size : 30px;
text-align : center;
text-decoration : none;
text-variant : small-caps !important;
border : 3px outset #000000;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
#infoModal .modal-body{
background-image: url('https://static.blog4ever.com/2012/06/704535/artfichier_704535_3634042_201404112431355.jpg');
background-repeat: repeat;
}
#infoModal h4{
background-color : #99FFCC;
color : #044711;
padding: 3px 15px;
text-align : left;
font-size: 20px;
font-style : italic;
font-variant : small-caps;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
#infoModal #bloc_message{
background-color : #FFF2DE;
color : #521412;
padding: 10px;
font-family : Arial;
font-size : 12px;
font-style : normal;
text-align : left;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow:inset 2px 4px 12px #666;
-moz-box-shadow: inset 2px 4px 12px #666;
box-shadow: inset 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
#infoModal #bloc_message img.img-avatar{
float: left;
width: 100px;
margin: 10px 20px 20px 10px;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
#infoModal #bloc_message img.img-unique{
float: center;
max-width: 600px;
margin: 20px auto;
display: block;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
#infoModal .modal-footer{
background-color: #99FFCC;
height: 20px;
padding-top: 10px;
border-top: 2px groove #000000;
text-align: right;
}
#infoModal .modal-footer span{
color: #044711;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
#infoModal .modal-footer button{
background-color: #044711;
color: #FFFFFF;
margin-left: 20px;
margin-right: 20px;
/* bordures ombres */
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}
-->
</style>
Ci-dessus le CSS de mon modèle, si vous le copiez, pour l'insérer dans votre CSS personnalisé, il ne faut pas mettre les balises HTML (en rouge).
J'ai fait cet article pour la page d'accueil, mais vous pouvez également mettre dans le HTML d'un article, le code CSS avec les balises, c'est à dire le deuxième ci-dessus. Puis vous mettez également le code HTML, généré par le générateur plus haut.
Si la gestion de votre blog est ouverte cliquez sur le lien suivant >>> lien pour créer un nouvel article, que vous nommez, par exemple "Test fenêtre accueil" et vous collez les codes comme je viens de vous l'indiquer. Enregistrez cet article comme brouillon, visionnez-le sur votre bloc pour voir le résultat.
De cette façon vous voyez immédiatement le résultat, vous pouvez corriger les codes dans le générateur, puis vous recommenez la même opération, l'article que vous avez créé est normalement dans un onglet pour le modifier.
Quelques captures pour vous montrer comment à insérer les codes dans le composeur d'article en mode HTML, cliquez sur l'icône ci-contre.
Si vous avez des questions au sujet de la personnalisation ou de l'installation de cette fenêtre, posez les questions dans les commentaires de cet article ou dans mon forum.
Si cet article vous a été utile, un petit J'aime me fera plaisir.
N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. Pour plus d'explications poster sur le forum
Inscrivez-vous au blog
Soyez prévenu par email des prochaines mises à jour
Rejoignez les 167 autres membres