Attendez le chargement complet de cette page et testez. Vous verrez le résultat est très sympa. Cliquez sur chacun de ces liens :
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 et smoke.png
- vous notez leur adresse
Etape 3 :
Sur votre PC, vous ouvrez votre bloc-note :
- vous appelez le fichier growl.js (que vous avez enregistré à l'étape 1)
- vous mettez à jour les adresses des images (vous les avez noté à l'Etape 2) : bezel.png et smoke.png
- vous enregistrez le fichier sous le même nom : growl.js
Dans l'administration de votre blog, Documents, Autres Fichiers, growl :
- vous enregistrez les fichiers : mootools-1.2b2.js et 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
Ce fichier est impossible à réaliser !
RépondreSupprimerBonne soirée.
Bonjour Sagan :) C'est d'ailleurs pour cette raison qu'il fonctionne dans mon exemple ;)
RépondreSupprimerLe javascript est compliqué à manier. Ce n'est pas parce qu'on n'arrive pas à réaliser quelque chose, quel que soit le domaine, que ce n'est pas possible. Mais c'est un état d'esprit qui dépasse le blogging ;)
Désolée Anna, quand vous parlez de manier le Css, il manque des précisions, ne le prenez pas mal.
RépondreSupprimerJ'ai suivi strictement vos consignes. Pourtant, croyez-moi j'aurais aimé réaliser votre script avec elles....
Quand vous dites :
- En rouge ok : j'ai mis mes propres adresses.
- En bleu : quand je regarde mon PC, l'article est tout bleu hormis le rouge et le vert. Donc, il est très difficile de savoir quels sont les termes qu'il faut modifier exactement.
- En vert : le nom des liens ? je suppose qu'on peut écrire ce que l'on veut, puisqu'il n'y a pas de lien ( bien sûr si j'ai bien compris).
Par contre, que fait-on des deux autres adresses qu'on a notées ? (les adresses de smoke et de bezel), vous ne parlez pas de celles-là, on ne les a pas relevées pour rien mais elles ne sont pas citées. Donc on ne sait pas exactement où il faut les mettre.
Bien sûr, je comprends très bien que vous n'avez pas à nous "mâcher le travail", mais, si je peux me permettre, dans ce cas précis, pour ma petite personne incompétente en matière de CSS, elles sont un peu succinctes, je n'ai pas vos compétences ...
Ceci n'est qu'un encart, bien évidemment, votre blog est une mine de renseignements dans laquelle je me rends chaque jour par rapport à tout ce travail que vous avez fourni pour les blogueurs.
Il n'empêche que parfois on reste sur sa faim.
Bonne soirée Anna.