Décoration de Noël

Retour page Accueil
Page précédente
Bas de page
Haut de page
Page suivante
Envoyer un mail à PapyClic le webmaster de DizTest

 

 

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

<DIV style="LEFT: 1px; POSITION: absolute; TOP: 1px; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-804722-12524.html" border=0></DIV>

Angle gauche en bas

<DIV style="LEFT: 1px; BOTTOM: 1px; POSITION: fixed; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-804724-12350.html" border=0></DIV>

Angle droit en haut

<DIV style="RIGHT: 1px; TOP: 1px; POSITION: absolute; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-806483-12530.html"></DIV>

Angle droit en bas

<DIV style="RIGHT: 1px; BOTTOM: 1px; POSITION: fixed; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-806488-12346.html"></DIV>

Bord gauche

<DIV style="LEFT: 5px; POSITION: absolute; TOP: 100px; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-804664-4282.html" border=0></DIV>
<DIV style="LEFT: 5px; POSITION: absolute; TOP: 250px; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-804664-4282.html" border=0></DIV>

Bord droit

<DIV style="RIGHT: 5px; POSITION: absolute; TOP: 100px; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-804664-4282.html" border=0></DIV>
<DIV style="RIGHT: 5px; POSITION: absolute; TOP: 250px; BACKGROUND-COLOR: transparent"><IMG src="https://bricabrac.blog4ever.com/blog/url_artimage-490-804664-4282.html" border=0></DIV>

 

 

Image alignée à gauche à l'emplacement, où vous placerez le code.

 

<IMG  align=LEFT hspace=10 src="https://DizTest.blog4ever.com/blog/url_artimage-205392-2395518-5529.html" vspace=5 border=0>

 

 

 

Image alignée à droite à l'emplacement, où vous placerez le code.

 

<IMG  align=right hspace=10 src="https://DizTest.blog4ever.com/blog/url_artimage-205392-2395518-5529.html" vspace=5 border=0> 

 

 

Image au centre de la page à la suite du texte, à l'emplacement où vous la mettrez.

<DIV align=center><IMG hspace=10 src="https://DizTest.blog4ever.com/blog/url_artimage-205392-2395518-5529.html" align=right vspace=5 border=0> </DIV>


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

<DIV style="RIGHT: 200px; POSITION: absolute; TOP: 3px; BACKGROUND-COLOR: transparent"><IMG src=http://DizTest.blog4ever.com/blog/url_artimage-205392-2395500-16207.html"" border=0></DIV>

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>&nbsp;</p>, :

 

<STYLE type=text/css>
<!--
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.

 



25/11/2008
22 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso