[TUTO] Des étoiles sur votre blog

 
  • baba

    Admin développeur

    Hors ligne

    #1 01 Décembre 2009 11:49:04

    J'ai trouvé ça ici : http://www.commentcamarche.net/forum/af … du-curseur

    C'est tout simple.

    D'un côté, vous avez ce code à copier :

    Code:

    <script type="text/javascript">
    // <![CDATA[
    var colour="#808";
    var sparkles=50;
    /****************************
    * Tinkerbell Magic Sparkle *
    * (c) 2005 mf2fm web-design *
    * http://www.mf2fm.co.uk/rv *
    * DON'T EDIT BELOW THIS BOX *
    * topcode adapté *
    ****************************/
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
    }
    set_width();
    sparkle();
    }}
    function sparkle() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
    star[c].style.left=(starx[c]=x)+"px";
    star[c].style.top=(stary[c]=y)+"px";
    star[c].style.clip="rect(0px, 5px, 5px, 0px)";
    star[c].style.visibility="visible";
    starv[c]=50;
    break;
    }
    }
    for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
    }
    function update_star(i) {
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
    star[i].style.top=stary[i]+"px";
    starx[i]+=(i%5-2)/5;
    star[i].style.left=starx[i]+"px";
    }
    else {
    star[i].style.visibility="hidden";
    starv[i]=0;
    return;
    }
    }
    else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
    }
    }
    function update_tiny(i) {
    if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
    }
    if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
    tiny[i].style.top=tinyy[i]+"px";
    tinyx[i]+=(i%5-2)/5;
    tiny[i].style.left=tinyx[i]+"px";
    }
    else {
    tiny[i].style.visibility="hidden";
    tinyv[i]=0;
    return;
    }
    }
    else tiny[i].style.visibility="hidden";
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sdown;
    x=(e)?e.pageX:event.x+sleft;
    }
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    window.onresize=set_width;
    function set_width() {
    if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    div.style.backgroundColor=colour;
    return (div);
    }
    // ]]>
    </script>

    Ensuite, sur blogger, vous devez aller dans "Mise en page" > "Modifier le code HTML"

    Dans les premières lignes, repérer <head> et mettez le code juste APRES.

    C'est tout, vous enregistrez et vous allez sur votre blog et ça marche.

    Zoyeux noel ! :guitare:


    Edit : ça doit être pareil pour les autres système de blog, "suffit" juste de trouver où éditer le code HTML du blog.

  • Goldslayer14

    Guide touristique des librairies

    Hors ligne

    #2 01 Décembre 2009 11:59:05

    Pas trouvé comment faire sur Canablog mais bon c'est pas bien grave.
  • Emeralda

    Bibliothécaire en chef

    Hors ligne

    #3 01 Décembre 2009 15:57:02

    Oui, ça marche !!!! Merci Baba !
  • cacahuète

    Insomniaque des livres

    Hors ligne

    #4 01 Décembre 2009 18:12:20

    ça marche aussi pareil sur canalblog !
    Je viens de mettre des étoiles bleues !......
    Merci pour ce script !......

    Dernière modification par cacahuète (01 Décembre 2009 18:12:43)

  • Aricie

    Casual lecteur

    Hors ligne

    #5 01 Décembre 2009 18:16:43

    @Cacahuète, comment as tu fait pour que cela fonctionne sur canalblog?
  • Goldslayer14

    Guide touristique des librairies

    Hors ligne

    #6 01 Décembre 2009 18:38:15

    J'allais poser la même question.
  • Cynthia

    A la découverte des livres

    Hors ligne

    #7 01 Décembre 2009 18:44:50

    Merci Baba!
    Pour d'autres effets, vous pouvez aller voir : ici
  • Serafina

    Chercheur de mots

    Hors ligne

    #8 01 Décembre 2009 18:45:50

    A utiliser avec parcimonie quand meme...
  • Mallou

    Mécène des éditeurs

    Hors ligne

    #9 01 Décembre 2009 18:46:08

    Il me semble, en voyant le blog de cacahuète, qu'elle est en mode avancée.
    C'est à dire qu'elle peut tripatouillée ce qu'elle veut dans le code HTML.

    Je sais pas si y a cette solution, mais un blog vraiment pratique pour les changements sur canalblog, même des explications en mode normal, c'est Demolituto
    C'est drolement bien expliqué, c'est comme ça que je modifiais mon premier blog qui était sous canalblog.
  • El Jc

    Guide touristique des librairies

    Hors ligne

    #10 01 Décembre 2009 18:51:57

    Merci Baba je vais testé ça ! Et félicitations pour le nouveau thème il est vraiment sympa