Décoration de Noël
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="http://bricabrac.blog4ever.com/blog/url_artimage-490-804664-4282.html" border=0></DIV>
Bord droit
<DIV style="RIGHT: 5px; POSITION: absolute; TOP: 250px; BACKGROUND-COLOR: transparent"><IMG src="http://bricabrac.blog4ever.com/blog/url_artimage-490-804664-4282.html" 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
Voir la version sans neige, plus lisible
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(http://gfx.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 qui peut s'employer dans d'autres occasions de déco.
Commentaires
site/blog
le 07-12-2008 à 13:19:45
Merci pour toutes ses actuces que j'ai bien sur appliquées sur tous mes blogs.
Bisous
Bonne journée
site/blog
le 13-12-2008 à 08:11:33
Super ton article d'aide pour que la neige tombe un peu partout sur la plateforme, mdr il va falloir sortir les luges et les skis. En temps voulu j'essaierai le code pour ma nouvelle page d'accueil après les fetes. Sapristi , que ferait on sans ton blog
? un grand merci pour toutes tes astuces mais aussi pour la tite pub laissée au passage. Belle journée. Bisous
le 15-12-2008 à 17:25:05
Gros bisous.
site/blog
le 15-12-2008 à 18:10:21
Je m'y mets...
Merci et bravo pour les explications !
Christian
site/blog
le 17-12-2008 à 21:03:56
Joyeuses Fêtes à toutes et tous !
site/blog
le 19-12-2008 à 09:21:45
et onvore bravo pour ton aide
joyeuses fêtes vous tous
site/blog
le 19-12-2008 à 09:36:56
Joyeuses Noel à toutes et tous !!!!
site/blog
le 22-12-2008 à 12:28:11
Joyeuses Fêtes.
site/blog
le 22-12-2008 à 12:31:17
site/blog
le 08-01-2009 à 19:59:19
le 08-01-2009 à 22:14:23
J'ai vu ton sujet sur le forum B4e, tu as eu des réponses qui devraient te permettre de réaliser ce que tu veux faire. Je viens de regarder ton code source je n'ai pas vu le code pour ces images de coins. Où les as-tu mises ?
Remets les si tu les as enlevés et j'irai voir si tu as fait des erreurs, préviens moi par mail.
A plus
site/blog
le 07-12-2009 à 06:48:02
C'est gentil de ta part, c'est déja mon cadeaux de Noël
Amitiés
Michel (la classe)
ca nous rajeunit pas :)))
le 17-12-2009 à 09:35:54
chocapic (isabelle et christophe)
le 17-12-2009 à 11:02:30
Ce n'est pas du HTML, uniquement du code CSS, qui se trouve dans "Tombe la neige", vous faites défiler le code, pour la neige c'est dans la partie cadre donc la règle #cadre.
C'est peut-être plus lisible sur l'article sans neige.
Si vous voulez mettre la totalité du code c'est possible, j'explique comment le placer en début de la page d'accueil ou article, en mode HTML.
Bonne continuation et joyeux Noël
site/blog
le 22-12-2009 à 12:52:12
Que de bonnes découvertes ! Je les utiliserais sûrement, mais là, grâce à tes découvertes pour les positions d'images d'Halloween, j'ai déjà fais quelques choses !
Merci pour tout ce que tu fais, Joyeux noel et bonne fin d'année !
Khawla.
site/blog
le 15-11-2010 à 12:23:54
site/blog
le 16-11-2010 à 17:20:46
moi juste un tit problème, les déco passent derrière la colonne de droite.
en plus je m'évertue à trouver comment changer la couleur de police des mes liens de la colonne de droite, possible que j'ai fait une ânerie ;-)
Merci de votre aide à l'avance
site/blog
16-11-2010 à 19:44:35
J'ai fait une modification dans le codes des images de droite, en les mettant au-dessus du menu avec l'attribut z-index qui les superpose au calque de base.
Pour la couleur des liens que tu as mis dans le blocdroit entre les balises titre h2, j'ai créé une règle dans ton CSS. Mais en principe ces titres sont des modules les liens se mettent sans les balises h2, regarde bien mon tuto.
Bonne continuation
site/blog
le 17-11-2010 à 03:40:49
bonjour et merci PapyClic, c'est super !
merci pour les tuyaux sur les lien
bonne journée