Décoration de Noël sans neige
Pour vous aider à décorer vos blogs à l'occasion des fêtes, exemple de placement des images aux 4 coins, sur chaque bord et dans le texte.
Ce genre de présentation est utilisable dans toutes les versions, la seule différence réside en la possibilité de l'accès aux bordures dans les versions Silver et Gold. En version gratuite seule la page contenant ce code sera décorée, dans les autres versions toutes les pages seront décorées en mettant le code dans la bordure gauche/droite.
Ces divers codes sont à insérer dans le composeur en mode HTML, en cochant la case indiquée en-dessous, surtout n'oubliez pas de la décocher avant de valider.
Les codes des images des 4 coins et des 2 bordures sont à mettre en début d'articles. Les autres images se placent dans le texte de la page, donc le code de chaque image sera à insérer à l'endroit où vous souhaitez qu'elle s'affiche.
Vous pouvez copier ces codes, même les images mais je vous demande de les héberger sur votre espace, de toutes façons il est évident que seul le principe de placement est intéressant pour tous, en mettant votre sélection d'images vous personnaliserez votre blog.
Pour compatibilité des navigateurs, les images des coins hauts et des bords sont en position absolute, celles du bas en position fixed. La position fixed n'est pas reconnu par certains navigateurs (ex: ie6), les images se mettaient en bas de page, pas en bas de l'écran. Donc pour limiter les dégâts, j'ai opté pour un système mixte. Avec certains navigateurs les images des coins bas seront toujours en bas de l'écran, pour les autres en bas de page.
Angle gauche en haut
Angle gauche en bas
Angle droit en haut
Angle droit en bas
Bord gauche
<DIV style="LEFT: 5px; POSITION: absolute; TOP: 250px; BACKGROUND-COLOR: transparent"><IMG src="https://static.blog4ever.com/2008/05/205392/artimage_490_804664_20100415333347.gif" border=0></DIV>
Bord droit
<DIV style="RIGHT: 5px; POSITION: absolute; TOP: 250px; BACKGROUND-COLOR: transparent"><IMG src="https://static.blog4ever.com/2008/05/205392/artimage_490_804664_20100415333347.gif" border=0></DIV>
Image alignée à gauche à l'emplacement, où vous placerez le code.
Image alignée à droite à l'emplacement, où vous placerez le code.
Image au centre de la page à la suite du texte, à l'emplacement où vous la mettrez.
Les 3 images suivantes ont été insérées et alignées en les sélectionnant une à une, puis en cliquant sur un des boutons d'alignement dans la barre d'outils du composeur.
Le Père Noël en haut à droite
TOMBE LA NEIGE ...
Suite à de nombreuses demandes, pour faire tomber de la neige sur les pages des blogs, je fais cette petite mise à jour de ma page spéciale "Décoration de Noël". Le gros souci était qu'il fallait passer par le Javascript, donc réservé absolument aux versions Silver et Gold, en plus ce script ralentissait énormément le chargement des pages, auxquelles bien évidemment on ajoutait beaucoup d'images.
Une bloggueuse sympathique a eu l'heureuse idée de regrouper sur son blog, des glitters, des floaties, gifs animés, et surtout la gentillesse de bien vouloir nous en faire profiter. Rendez lui visite Le blog de KRIS
Quand vous aurez trouvé l'image qui vous convient, enregistrez la sur votre disque dur pour l'héberger sur Internet dans votre espace. Notez son adresse pour la placer comme image de fond, dans le Diz Perso, partie "Page", plus l'attribut "repeat" valeur "oui".
De cette façon toutes vos pages auront ce fond, mais pour qu'il soit visible, il vous faudra rendre les fonds des autres parties transparentes, ce qui parfois est très gênant pour la lisibilité de vos pages.
Pour éviter d'avoir tout à modifier, j'ai, comme sur cette page qui est unique dans DizTest, créé un "mini-style". Ainsi il est possible de mettre ce style uniquement sur la page d'accueil, ce qui permet d'avoir moins de modifications à faire.
Ce qui est sage de faire avant de ce lancer, une copie de votre page d'accueil, je l'ai fait dans ce blog de différentes manières, mode texte, mode HTML(en texte), mode HTML(en Html), tout simplement dans 3 articles, que j'ai laissé visibles pour l'exemple, mais que vous pourrez mettre en statut "brouillon", invisibles pour vos visiteurs.
Voici le code (Diz Perso) de ma page, à placer au début de la page d'accueil, dans le composeur en mode HTML(cochez la case), surtout ne pas oublier la première ligne <p> </p>, :
<!--
body{
background: #000066;
background-image: url(https://static.blog4ever.com/photos/490/big430607434900443.jpeg);
background-repeat: no-repeat;
background-attachment : fixed;
color: #CCFFFF;
}
#haut{
background:transparent;
border:none;
}
#haut h1 a{
color: #CCFFFF;
}
#cadre{
background:transparent;
background-image: url(http://DizTest.blog4ever.com/blog/url_artimage-205392-2391784-8458.html);
background-repeat: repeat;
color: #CCFFFF; border:none;}
#contenu{
background:transparent;
color:#CCFFFF;
font-size:13pt;
}
#menu ul li {
background:transparent;
color: #FFFFFF; border:none;
}
#menu ul li a {
background:transparent;
color: #FFFFFF;
}
#menu ul li a:hover {
background:#CCFFFF;
color: #000066;
}
#bas {
background:transparent;
color: #FFFFFF;
}
-->
</STYLE>
C'est évidemment un exemple, dans vos blogs chacun de vous fera ses modifications. Vous supprimerez certaines lignes de ce code :
- si vous avez une bannière supprimez #haut et #haut h1 a
- pour laisser le menu gauche supprimer les lignes #menu etc...
Un seul souci demeure, la publicité, encore à étudier.
J'espère que cette page vous aidera pour le concours "La plus belle déco de Noël ". En attendant je vous souhaite à tous de joyeuses fêtes de fin d'année.
Une variante en place actuellement, comme fond de partie page, j'ai mis une image "Le traineau du Père Noël dans le ciel" et l'image de la neige comme fond de la partie cadre. Ce qui donne l'impression de chute de neige sur le Père Noël, une astuce, voir le résultat, qui peut s'employer dans d'autres occasions de déco.
