Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Ce script permet d'ouvrir des notifications, sortes de petites fenêtres pop up, qui disparaissent d'elles-mêmes

Testez, le résultat est très sympa : cliquez sur les liens et regardez en haut à droite le résultat



Etape 1 :

Allez sur Window.Growl

Cliquez sur Download Window.Growl 2.0 with MooTools 1.2beta2

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers

Etape 2 :

Dans l'administration de votre blog, Documents, Autres Fichiers :
  • créez un répertoire : growl
    • dans lequel vous enregistrez les images :
    •  
      • bezel.png
      • smoke.png
    • vous notez leur adresse
Etape 3 :

Sur votre PC, vous ouvrez votre bloc-note et appelez le fichier growl.js :
  • vous mettez à jour les adresses des images :
    • bezel.png
    • smoke.png
vous les avez noté à l'Etape 2
  • vous enregistrez le fichier sous le même nom
Etape 4 :

Dans l'administration de votre blog, Documents, Autres Fichiers, growl :
  • vous enregistrez les fichiers :
    • mootools-1.2b2.js
    • growl.js
  • vous notez leur adresse
Etape 5 :

En HTML de votre article, vous collez : 

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/growl/mootools-1.2b2.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/growl/growl.js" type="text/javascript"></script>

<script type="text/javascript">//Window.Growl 2.0 with MooTools 1.2beta2

Growl.Smoke({
    title: 'Window.Growl By Daniel Mota',
    text: 'http://icebeat.bitacoras.com',
    image: 'growl.jpg',
    duration: 2
});
</script>
<ul>

        <li><a href="#" id="smoke" title="Show msg Smoke">Show Growl Smoke.</a></li>
        <li><a href="#" id="bezel" title="Show msg Bezel">Show Growl Bezel.</a></li>
       
    </ul>

<script type="text/javascript" charset="utf-8">
        $('smoke').onclick = function() {
            Growl.Smoke({});
            return false;
        };
       
        $('bezel').onclick = function() {
            Growl.Bezel({
                title: 'Window.Growl<br />By Daniel Mota'
            });
            return false;
        };
        var Log = {
          save: function() {
              new Request.HTML({url:'/log/save'}).post({'refer':document.referrer,'title':document.title});
          }
        };
        Log.save();
    </script>

Vous personnalisez :
  • en rouge, l'adresse de vos fichiers js, vous les avez noté à l'étape 4
  • en bleu, le contenu de la fenêtre
  • en vert, le nom du lien
commentaires (4)    ajouter un commentaire
Retour à l'accueil

Publicité

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Sommaires

Dernières Astuces

liste complète

Commentaires

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus