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 :
Etape 3 :
Sur votre PC, vous ouvrez votre bloc-note et appelez le fichier growl.js :
- vous mettez à jour les adresses des images :
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
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