Hiver - Neige sur le blog - Les ficelles d Anna K.

Publié dans : Effets d'Images et diaporamas - Tous blogs

Hiver - Neige sur le blog

Puisque la neige sur le blog est le grand thème d'actualité : voici des idées.

Il suffit de mettre un gif de neige en background.

Le cas général : neige sur tout le blog

body {background-image:url(adresse de l'image);}

Sur 95 % du blog

#global {background-image:url(adresse de l'image);}

Si vous avez déjà un background dans le body qui s'y oppose, ne désespérez pas, il reste la solution de mettre cette neige spécifiquement dans l'entête, les articles, les modules.

Positivez : la méthode a plusieurs avantages : vitesse accrue de chargement de la page et moins de lassitude visuelle pour le visiteur.

Ne vous compliquez pas la vie, si un background est déjà présent, choisissez un autre lieu pour mettre cette neige.

Je vous propose 2 types de neige. Vous pouvez prendre ces adresses, ce sont des images hébergées.

Neige drue et fine

http://www.casimages.com/img/gif/07091203422662651215190.gif

Neige éparse et épaisse

http://www.casimages.com/img/gif/07091203413662651215184.gif

Si vous décidez de faire une animation sur une partie seulement de votre blog, pourquoi ne pas être original et tenter de mettre d'autres objets animés sur votre blog ?

Des étoiles scintillantes

http://www.hiboox.com/images/2006/9bkoe9t.gif

Des feux d'artifice

http://www.hiboox.com/images/4406/c1c56601.gif

On va maintenant placer cette image dans les différentes parties du blog. Mettez l'adresse qui vous convient au lieu de celle présente.

L'entête (dans le CSS)

#top {background-image: url(adresse de l'image); }

Les articles (dans le CSS)

.article {background-image: url(adresse de l'image); }

Les modules (dans le CSS)

. box {background-image: url(adresse de l'image);}

Les 3 colonnes centrales (dans le CSS)

#ln_1 {background-image:url(adresse de l'image);}

Attention : réservé Privilège et Premium

Pour avoir la même neige que sur cette page, collez en mode source/HTML d'un module texte Libre ce code

MàJ : Janvier 2009

Voir les 52 commentaires - Ecrire un commentaire
Recommander

Précédent : Fonction Lire la suite Retour à l'accueil

Commentaires

Bonjour Anna,

je viens de créer deux articles pour les décos et bricolages de Noêl. J'indique sur ma page d'accueil ces deux titres, et j'ai un petit soucis : lorsque l'on passe dessus, leur couleur ne changent pas pour indiquer qu'il y a un lien. Que faut-il que je modifie pour obtenir ce changement de couleurs ... merci pour les nounours

Commentaire n° 1 posté par Pascaly le 06/12/2006 à 10h52

Bonjour Pascaly, oui, c'est étrange, surtout que les autres liens de l'accueil sont opérationnels. Alors, si tu n'as rien mis en mode source qui provoque cela,

Essaye de rajouter dans le CSS :

#articleAccueil a:hover { color : red; }

Je n'ai pas testé, mais par déduction, ça devrait marcher. Tu me diras ?

Réponse de Anna K le 06/12/2006 à 11h46

Alors là, je garde cette page car j'ai tenté de faire tomber des croix de vie et ce fut un fiasco complet ! ! lol ! ! Bon mercredi et gros bisous en espérant que poster des commentaires soit plus facile qu'hier ! ! lol ! ! @nne marie

Commentaire n° 2 posté par

@nne marie

le 06/12/2006 à 11h03

Bonjour Anne-Marie :) comme tu as accès au javascript, donne moi l'adresse de ta croix, je te transformerai le code.

Réponse de Anna K le 06/12/2006 à 11h52

Ca marche pour les autres liens plus bas, ils passent au rouge quand on passe dessus , mais toujours pas pour les "trucs" de Noël

Commentaire n° 3 posté par Pascaly le 06/12/2006 à 12h04

C'est déjà bon signe ;) Je crois alors que le problème doit se situer dans le mode source. Tu as dû entrer involontairement une couleur de police. Tu sais regarder et "analyser" le mode source ? sinon, fais moi une copie, mais seulement du début, jusqu'à chanson de Noël.

Réponse de Anna K le 06/12/2006 à 12h52

Annak, il neige dans mon cerveau, mais bon, tu as l'habitude avec moi. En fait si je savais tout faire, tes idées me permettraient d'avoir le plus beau Blog !

Je suis contente, tu viens quand même me voir. Bisous Annak

Commentaire n° 4 posté par stella

le 06/12/2006 à 12h58

Bonjour Stella :) ton blog est déjà très bien :)

Réponse de Anna K le 06/12/2006 à 14h57

En fait, c'était un souci d'ordre ... j'avais du changer le style, la couleur avant de mettre le lien ... maintenant ça fonctionne !!

Merci pour ton aide toujours aussi précieuse !!

Alors , ces achats ??

Commentaire n° 5 posté par Pascaly le 06/12/2006 à 13h37

Pascaly :) c'était donc bien dans le mode source ;)

Réponse de Anna K le 06/12/2006 à 15h14

Concerant la neige: oui, j'ai suivi tes conseils, à savoir : si on a déjà un fond, le mettre ailleurs . Je l'avais donc mis dans mon article de noël, la neige reste en haut

Commentaire n° 6 posté par Pascaly le 06/12/2006 à 19h44

Bonjour Pascaly :) actuellement, je vois de la neige statique sur toute la page. Si la neige restait en haut, il devait y avoir un ordre demandant à ce qu'elle ne soit pas répétée. Tu peux essayer dans le mode source selon la même méthode que si c'était un article seul.

Réponse de Anna K le 07/12/2006 à 06h49

Bonsoir AnnaK, il neige dans mon dernier article, j'aime beaucoup, merci et bonne soirée

Commentaire n° 7 posté par

miriel le 06/12/2006 à 20h19

Bonjour Miriel :) Tu as dû te tromper dans l'adresse de ton blog, c'est celle de celui sur skyblog que tu m'as laissé ;)

Réponse de Anna K le 07/12/2006 à 08h05

Bonsoir ma belle. Voila l'url de ma croix de vie : http://195.20.15.207/0/25/70/80/gifs/animankh.gif.
J'ai essayé ton système et cela marche parfaitement: bravo et merci ! J'ai mis de la neige sur mon article pour Noel donc il ne sera pas visible avant le 24..lol ! ! !
Bisous de la nuit
@nne marie

Commentaire n° 8 posté par

@nne marie

le 07/12/2006 à 01h24

Bonjour Anne-Marie :) ouf je suis le 24, je pourrais venir voir

Réponse de Anna K le 07/12/2006 à 09h30

Et bin grand merci Annak ça fait une plusieurs jours que je cherche à mettre uniquement de la neige sur mon article d'accueil ... cette fois ci ça marche grace à toi ... bisous et bonne soirée.

Commentaire n° 9 posté par Jean Michel le 07/12/2006 à 18h09

:) Bonne soirée Jean-Michel

Réponse de Anna K le 07/12/2006 à 19h24

bonsoir

je m 'appelle babette et je voulais mettre la neige mais j\\\'ai un messenger qui a un background incorporé apparemment maintenant je ne peux plus faire ce que je veux dommage j\\\'aime beaucoup votre blog très intéressant surtout que je débute merci d\\\'une réponse a bientôt amicalement babette

Commentaire n° 10 posté par babette le 08/12/2006 à 00h58

Bonjour Babette :) c'est à voir, il y a peut-être possibilité de mettre de la neige quand même dans un endroit particulier : l'entête ou un article. Ca ne coûte rien d'essayer

Réponse de Anna K le 08/12/2006 à 10h00

Super info ! Merci !

Commentaire n° 11 posté par

Bibi le 08/12/2006 à 16h14

Merci Bibi :) mais tu aurais pu laisser l'adresse de ton blog.

Réponse de Anna K le 08/12/2006 à 17h31

Ouin...j'ai essayé mais j'ai du oublier de faire quelque chose...merci à toi c'est sympa à toi de nous donner tous ces trucs...je n'ose jamais changer grand chose de peur de tout faire foirer ;o)

Commentaire n° 12 posté par Francine le 10/12/2006 à 11h01

Francine, il n'y a pas de risque. Ose ;)

Réponse de Anna K le 10/12/2006 à 11h32

Merci de ta visite !!! et c'est quand ton anniversaire ????

Puis-je mettre un lien vers ton blog ?

Commentaire n° 13 posté par Francine le 10/12/2006 à 11h53

Gloup lol le 13. Si tu veux ;)

Réponse de Anna K le 10/12/2006 à 12h48

bonjour Annak

pour mettre de la neige dans mon entête qui est comme ça :

/* entete */

#top { padding:0px; border-bottom: 1px solid gray; }

#top h1 { padding:0px; margin:0px;color:black; }

.topLien{text-decoration:none;}

.topLien:hover {text-decoration:none;}

où dois-je mettre :

{background-image: url(http://www.hiboox.com/images/4906/68d99cb7.gif); }

il faut mettre l'adresse http ..... comme ça ou aller chercher autre chose sur ce site ?

Commentaire n° 14 posté par chiffonnette le 10/12/2006 à 18h05

Bonjour Chiffonnette, tu remplaces cette ligne

#top { padding:0px; border-bottom: 1px solid gray; }

par

#top {padding:0px; border-bottom: 1px solid gray;background-image: url(http://www.hiboox.com/images/4906/68d99cb7.gif); }

Tel quel, et ça sera bon ;)

Réponse de Anna K le 10/12/2006 à 19h24

Merci , j'ai essayé mais mon fond est trop clair et ça ne se voit pas !

Je voudrais changer la couleur du fond et mettre un vert le même en vichy j'essaie de retourner chez idata mais impossible ?

je tappe l'adresse mais ... rien ?

comment faire

Commentaire n° 15 posté par chiffonnette le 10/12/2006 à 20h44

Bonjour Chiffonnette : ) dommage j'ai bien ton fond actuel ;) j'essaye de me connecter à http://idata.over-blog.com Ca peine aussi. Réessayer plus tard ?

Réponse de Anna K le 11/12/2006 à 09h50

L'article neige est tellement simple et bien réalisé chez toi que je viens de mettre un lien " article accueil " sur Info PC ... ( c'est aussi d'actualité ) encore bravo , passe une bonne fin de soirée.

Commentaire n° 16 posté par Jean Michel le 10/12/2006 à 21h09

Et une bonne journée maintenant :)

Réponse de Anna K le 11/12/2006 à 09h55

Coucou charmante princesse inconnue et mystérieuse

J'ai mis le script de OF et cela donne un truc rigolo pour la neige.
Bon j'avoue ,je n'ai rien compris (mais est ce important ?), mais c'est marrant.

Bonne soirée princesse

Commentaire n° 17 posté par Un chevalier ébloui par la neige le 11/12/2006 à 19h59

Bonjour chevalier :) c'est du javascript, ennuyeux, mais je vais aussi tester ;)

Réponse de Anna K le 12/12/2006 à 06h20

Pour la neige, ça y est , j'ai enfin réussi .... j'ai compris que "votre texte" c'était tout le texte en html qu'il fallait insérer ....J'ai encore tellement de chose à apprendre !!! En ce qui concerne l'ordre de mes modules, je le laisse ainsi car beaucoup de visiteurs ne viennent pas d'overblog et ne connaissent pas forcèment les modules " articles récents" ainsi quand ils arrivent ils trouvent les infos concernant leurs momes ... et puis j'ai rajouté un "Asterix" sur les articles récents dans mon sommaire ... voilà, et toujours merci pour tes idées et conseils, je suis toujours prenneuse !!!!

Bisous

Pascaly

Commentaire n° 18 posté par Pascaly le 11/12/2006 à 22h56

Bonjour Pascaly :) C'était une idée comme une autre ;)

ah ah ah, j'ai cherché Asterix, le personnage, dans tes articles récents lol

Réponse de Anna K le 12/12/2006 à 09h00

Super, merci beaucoup pour tes idées qui enrichissent les nôtres!

Commentaire n° 19 posté par Snapulk le 12/12/2006 à 01h13

Bonjour Snapulk :)

Réponse de Anna K le 12/12/2006 à 09h46

Bonjour

Je ne suis mais vraiment pas doué car j'ai beau faire ce que tu dit et je pense ou tu le dit et bien rien ne se passe suis une daube en thlm et css ca m'enerve. Mais bon si je savais le faire il neigeré et ca feré beau lol

merci qd meme pour tes conseils

kiss

Commentaire n° 20 posté par Mathieu le 15/12/2006 à 15h29

Bonjour Mathieu :) quand tu modifies ton CSS, tu n'oublies pas d'enregistrer ? tu es bien en mode avancé ?

Réponse de Anna K le 15/12/2006 à 16h10

merci beaucoup ! j'ai réussi à mettre de la neige ! sans toi je n'y serai pas arrivée !!merci merci merci !

Commentaire n° 21 posté par Emeraude le 17/12/2006 à 12h47

Bonjour Emeraude :) je vais venir voir ça

Réponse de Anna K le 17/12/2006 à 15h11

Bien le bonjour merveilleuse brune aux yeux éteincellants (pas facile d'etre un chevalier devant une princesse, que de bidules il faut dire....)
un blogeur a inventer de la neige sous forme de pèer noel.... c'est ici... http://forum.over-blog.com/forum-blog-2-2342904-0.html
C'est mon cadeau pour toi, ho, si replandissante créatrice de beauté informatique.....
Bonnes Fetes princesse AnnaK.

Commentaire n° 22 posté par Le chevalier quipart dans ses montagnes ! le 23/12/2006 à 09h47

Merci Chevalier, j'y ai jeté un oeil, ça en effet pas mal (même si j'en ai un peu marre de la déco de Noël ;)

Réponse de Anna K le 23/12/2006 à 12h55

coucou! je ne savais pas trop où mettre ma question alors je me suis decidee pour là !excuse moi ,ce n'est surement pas la bonne place.

comment annuler le rectangle blanc qui reste desesperement ? comment annuler le surlignage blanc que je n'ai pas voulu...j'ai cliqué trop vite....j'ai fait "annuler" avec la fleche mais ça n'a pas marché(grrr!!! ) et derniere chose(enfin, pour le moment, lol) comment reduire mon en tete?? je ne l'ai pas voulue aussi grande!!!!merci et passe de bonnes fetes!

Commentaire n° 23 posté par aril le 23/12/2006 à 19h29

Bonjour Aril :)

Le rectangle blanc ? lequel ? je n'en vois pas de spécial sur ton blog.

Pareil pour le surlignage blanc :) Ca doit être dans quelquechose que tu as écrit, en allant dans le mot source, tu vas trouver quelque chose comme ça :

<p> <font style="BACKGROUND-COLOR: #ff0000"> Texte</font></p>

Tu effaces ce qui est en rouge

Si tu veux réduire ton entête en hauteur, il faut faire moins de retour à la ligne. Ce n'est qu'une zone texte.

Bonnes vacances à toi aussi :)

Réponse de Anna K le 24/12/2006 à 08h50

c'est bon!!! mon "Emeraude" m'a debarassee des problemes...les jeunes,j'te jure!!! ils savent tout aavant de naitre...lol!

Commentaire n° 24 posté par aril le 23/12/2006 à 19h49

Je suis contente pour toi :)

Réponse de Anna K le 24/12/2006 à 08h52

merci Anna pour la neige eyt le feu d artifice je vais essayer pour mon prochain article

Commentaire n° 25 posté par Sancie le 23/12/2006 à 20h17

Je vais venir voir

Réponse de Anna K le 24/12/2006 à 08h52

Un petit coucou en passant, plein de choses à apprendre...
bises, bon WE
fra

Commentaire n° 26 posté par françoise le 24/11/2007 à 07h26

Bonjour
je possède un blog msn
je voudrais installer de la neige partt sur la page
mais hélas je n'y arrive pas
ou faut il que je mette le lien? et quel lien dois je mettre précisément
je n'ai jamais installé de background donc je n'ai aucune idée sur la manière de s'y prendre

merci d'avance

à bienôt

Clochette

Commentaire n° 27 posté par Clochette03 le 29/11/2007 à 09h28

Bonjour Clochette :) je n'ai pas pu te répondre sur ton blog car je n'ai pas de code Space :(
1) as-tu accès au CSS de ton blog ? Je n'en suis pas sûre.
2) je peux te proposer un code à mettre en HTML pour faire tomber de la neige : http://annak.over-blog.com/pages/Hiver__la_neige_tombe_sur_le_blog-27087.html

Réponse de Anna K le 29/11/2007 à 15h06

bonjour anna k
pour moi cela ne fonctionnne pas que se soit dans le css ou dans les modules mais je suis en confiance donc c'est certainement çà .
Bonne journée à vous guilaine

Commentaire n° 28 posté par GUILAINE le 30/11/2007 à 09h07

Je passe voir

Réponse de Anna K le 30/11/2007 à 09h48

Bonsoir Annak,

Je suis Marquis : j'ai auparavant fait appel à votre aide pour une page d'accueil. J'ai tente de mettre de la neige sur mon second site avec l'adresse donnée pour de la neige drue et fine mais je n'y arrive pas. Je suis sans doute stupide...

Pouvez-vous me conseiller s'il vous plait ?

Merci de vos conseils et de votre aide.

Commentaire n° 29 posté par Maxime le 02/12/2007 à 17h35

En rajoutant
#global {background:url(http://www.casimages.com/img/gif/07091203422662651215190.gif);}

Réponse de Anna K le 02/12/2007 à 18h06

Bonjour ! super les changements ici ! bravo ! J ' ai pris les neiges pour mon overblog merci !

Commentaire n° 30 posté par Danielle le 02/12/2007 à 18h01

Bonsoir Annak,

Malgré le rajout donné je n'y arrive décidément pas. C'est dommage, je trouvais cette idée très sympatique.

Très bonne soirée et merci.

Commentaire n° 31 posté par Maxime le 02/12/2007 à 19h53

Je l'ai fait l'an dernier grâce à toi ... gros bisous

Commentaire n° 32 posté par Pascaly le 02/12/2007 à 21h22

Et hop t'es touchée

Commentaire n° 33 posté par Flo-Avril2 le 03/12/2007 à 14h42

Peste :P :D

Réponse de Anna K le 03/12/2007 à 15h01

Coucou m'AnnaK..... Ton adresse de neige éparse indique "casimage blabla"...... Mais ton lien la dirige vers hiboox, et n'est pas valide.

Commentaire n° 34 posté par Le chevalier très perspicace le 03/12/2007 à 21h20

Oh merci, j'ai changé l'hébergement et mal changé l'adresse :)
J'ai corrigé

Réponse de Anna K le 04/12/2007 à 17h29

C'est bien mais pour moi, il faudrait des petites pyramides ! ! lol ! ! Bon jeudi et bizettes de la mer rouge ! ! @nne-marie

Commentaire n° 35 posté par

@nne marie le 06/12/2007 à 14h00

Il neige déjà chez toi ? :)))))...j'aime bien la neige à Noël :)))...un petit coucou en passant Annak pour te montrer que je ne t'ai pas oubliée :)) gros bisous ...et je vais tester "la neige" sur un article...

Commentaire n° 36 posté par Xoumette le 06/12/2007 à 15h40

Non quand même pas, je suis à l'est, mais pas en Sibérie ;)

Réponse de Anna K le 06/12/2007 à 18h42

ça me rappelle mes débuts de bloggeuse, c'est avec un de ces articles que j'a connu ton super génial blog Anna.....

Bisouuuuu

Commentaire n° 37 posté par miriel

le 06/12/2007 à 17h10

Bonjour, j'aime beaucoup les animations mais je n'arrive pas à les mettre, j'ai essayé dans mon en-tête, j'ai copié collé exactement les codes ça ne marche pas, qu'est ce que j'oublie ??

Commentaire n° 38 posté par Nicole Gispert le 08/12/2007 à 15h20

Bonjour Nicole :) tu es sûre de coller ton code en mode source et non en mode normal ?

Réponse de Anna K le 11/12/2007 à 11h16

Coucou Anna..je voulais d'une part te remercier pour tous les bon "tuyaux" que tu nous donnes sur ton blog, ta gentillesse et ton aide sur le forum, et d'autre part te souhaiter un excellent anniversaire..(grâce à tes explications, j'ai pu en confiance mettre la neige sur mon blog, en "bidouillant" le code source et en y mettant à la place de l'image des flocons bleus, des flocons plus petits trouvés sur le net..et ça fonctionne très bien..un grand merci..ton blog est une mine d'astuces et de trouvailles..) alors je te fais de gros bisous

Commentaire n° 39 posté par jackline le 14/12/2007 à 11h19

Merci Jackline :)

Réponse de Anna K le 16/12/2007 à 16h07

salut annak,

quel est l adresse de la neige qui tombe sur tes commentaires??

je sais je suis chieur, mais je la trouve plus belle ;-)

bonne et agréable journée

Vino le roi du vélo

Commentaire n° 40 posté par Vino le 20/12/2007 à 07h53

Bonjour Vincent :) J'ai eu du mal à retrouver, c'est du javascript, donc seulement en privilège et premium.
A coller en mode source

<script src="http://ddata.over-blog.com/xxxyyy/0/09/23/80/flocons/snow.js" type="text/javascript">
</script>

Réponse de Anna K le 21/12/2007 à 09h33

Bonjour Annak,
Je me permet de poster sur cet article, j'ai vu qu'il y avait des commentaires ! Est-ce le bon endroit ?
N'y connaissant rien en Css, je suis venue me renseigner sur ton blog. J'ai beaucoup lu, puis j'ai sauté le pas, j'ai fait des modifications (dans le Css global), d'abord sur un blog test, puis sur le vrai (changement de couleur, de taille de tous les titres) J'ai aussi enlevé le soulignement des liens, du fait je n'en ai plus dans les articles.

Mais j'aimerais faire tomber la neige, j'ai testé les 2 "neige" : trop épaisse, on ne voit plus rienau travers.
Celle que je viens de voir sur cette page est très bien, je n'ose demander comment faire !!!

Merci beaucoup pour tous ces renseignements, je reviendrai;

Commentaire n° 41 posté par Danielle le 20/12/2007 à 23h15

Bonjour Danielle :)
C'est du javascript, si tu es en confiance, pas possible

Réponse de Anna K le 21/12/2007 à 09h56

Bonjour Annak, je suis en confiance, donc pas de neige !!! dommage. Merci et à bientôt.

Commentaire n° 42 posté par Danielle le 21/12/2007 à 12h42

Je n'arrive pas à mettre la neige drue et fine. Est ce que le lien fonctionne toujours ? Merci pour tes trouvailles ...

Commentaire n° 43 posté par Marilou le 21/12/2007 à 15h51

Réponse chez toi :)

Réponse de Anna K le 21/12/2007 à 17h48

dommage Je suis en confiance :-( mais merci d'avoir fait la recherche.
Bonnes fêtes
avec tes conseils, pour moi c'est noel toute l'année :-)

Commentaire n° 44 posté par Vince le 21/12/2007 à 16h06

Enfin j'ai réussi à installer la neige !
Merci et encore merci pour tous tes conseils AnnaK !

Commentaire n° 45 posté par Sydoky le 21/12/2007 à 19h23

Cela devrait être marrant sur les pyramides ! ! ! Bonne journée et gros bisous

Commentaire n° 46 posté par

soleil51

le 02/12/2008 à 11h36

Coucou la neige un classic en cette période sur les blog, je vais peut être m'en passer mes pages sont assez chargées il faut savoir dire stop quelques fois. quand à la déco de noël pour mon blog cette année vu la situation... pour le pourcentage IE ( la daube ) par rapport à firefox j'ai plus vraiment de moyen de vérifié car je suis plus sur Xiti.je peut te dire que le pourcentage est en faveur pour IE ( grr ) même si firefox creuse l'écart!! il ya encore des personnes qui utilise IE6 (et oui je l'ai vu cette semaine encore )bon c'est vrai le magnétoscope existe encore :) Parler de IE pour moi = Grrr il gère mas les png comme mon fond actuel, tant pis comme je suis têtu je garde mon fond. Passe une bone soirée gros bisous :)

Commentaire n° 47 posté par Jean Michel le 02/12/2008 à 18h35

Coucou Annak je viens de passer sur ton blog 57 ou il n'y plus rien c'est normal !! merci pour ton aide problème résolut grâce à toi bonne soirée gros bisous :)

Commentaire n° 48 posté par Jean Michel le 02/12/2008 à 19h42

Arf! T'ai mis une astuce pour faire tomber de la neige dans l'article "Mettre une congère"! lol Que je suis bête! ;-)))

Commentaire n° 49 posté par biloulou le 03/12/2008 à 10h24

ça s'est fait !!!

Commentaire n° 50 posté par houba le 07/12/2008 à 21h21