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 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 et un "Questions -Réponses" qui vous aideront à personnaliser cette fenêtre?
Dans le 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
Ci-dessous le CSS de mon modèle que vous pouvez copier, insérer dans votre CSS personnalisé et modifier pour le mettre en harmonie avec le design de votre blog.
/* Style Informations */
#infoModal{
width: 500px;
max-height: 800px;
}
#infoModal h2 {
text-decoration: none;
text-align: left;
border-bottom-style: none;
}
#infoModal h4 {
text-align: center;
}
#infoModal .modal-header{
background-color: #CCFFFF;
height: 40px;
border-bottom: 2px groove #000000;
}
#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: left;
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: #CCFFFF;
border-top: 2px groove #000000;
}
#infoModal .modal-footer span{
font-size: 16px;
font-weight: bold;
font-style: italic;
margin-right: 10px;
}
#infoModal .btn-info{
background-color: #0089FF;
color: #CCFFFF;
}
Vous pouvez également mettre le CSS au début du HTML de la page d'accueil, en ajoutant les balises HTML pour l'insérer. Vous pouvez copier mon modèle ci-dessous.
<style type="text/css">
<!--
/* Style Informations */
#infoModal{
width: 500px;
max-height: 800px;
}
#infoModal h2 {
text-decoration: none;
text-align: left;
border-bottom-style: none;
}
#infoModal h4 {
text-align: center;
}
#infoModal .modal-header{
background-color: #CCFFFF;
height: 40px;
border-bottom: 2px groove #000000;
}
#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: left;
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: #CCFFFF;
border-top: 2px groove #000000;
}
#infoModal .modal-footer span{
font-size: 16px;
font-weight: bold;
font-style: italic;
margin-right: 10px;
}
#infoModal .btn-info{
background-color: #0089FF;
color: #CCFFFF;
}
-->
</style>
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.
Mais avant consultez le "Questions & Réponses" : ICI vous y trouverez peut-être votre réponse. Ce QR s'ouvre dans un nouvel onglet ou nouvelle fenêtre. Ainsi vous l'aurez sous la main pendant que vous travaillerez sur votre fenêtre d'accueil. Je pense qu'il sera mis à jour en fonction des questions que l'on me posera et des mises à jour de l'article en lui même.
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 2 autres membres