04 novembre 2008
Titre défilant dans la barre du navigateur
Etiquettes: animé, normal ou avancé, titre
Je ne suis pas fan des trucs qui bougent sur internet (gifs animés, flash ou autres) car ça perturbe l'oeil, détourne l'attention du contenu et s'avère vite pénible.
Mais bon, comme on me l'a demandé et que c'est pas compliqué à faire, voici un petit tuto pour rendre le titre de votre blog défilant dans la barre de titre et l'onglet du navigateur.
On va utiliser un script Javascript trouvé ici (il va de soi que le javascript doit être activé dans le navigateur du visiteur pour que ça fonctionne).
On va juste le modifier pour qu'il affiche le titre du blog, ça va donner ça au final:
<script type="text/javascript">
var titre = " <$BlogPageTitle$> - ";
function bougerTitre() {
titre = titre.substring(1, titre.length) + titre.substring(0, 1);
document.title = titre;
setTimeout("bougerTitre()", 100);
}
bougerTitre();
</script>
<$BlogPageTitle$> c'est pour récupérer automatiquement le titre de la page, mais vous pouvez mettre tout autre chose, n'importe quel chaîne de caractères.
On n'oublie pas les espaces avant et/ou après <$BlogPageTitle$> (ou la chaîne de caractères) pour éviter que ce ne soit collé.
La valeur 100 défini la vitesse de défilement. Plus la valeur est élevée, plus le défilement sera lent.
Bon, c'est bien gentil ça, mais maintenant je le mets où mon code?
En mode avancé,
dans le head de la page,donc avant la balise </head>. A recopier sur toutes les pages si on veut que ça marche sur toutes les pages.
En mode normal,
on peut mettre ça en place sur la page d'accueil, en insérant le code dans un message d'accueil qu'on maintiendra au début du blog. Le code est à insérer en mode html (bouton 
).
J'ai inséré le code dans ce message,avec une valeur de défilement à 200, vous devriez voir le résultat en haut de votre navigateur
26 juillet 2008
Lightbox 2 dans Canalblog
Etiquettes: album, avancé, images, lightbox, photos
Mode: avancé
Voir ici pour télécharger, utiliser et personnaliser Lightbox v2.04 (version francisée).
Je sais qu'il y a déjà des tutos sur Lightbox, notamment chez demolite.
Mais:
- le tuto de Demolite utilise la version originale de Lightbox, en anglais donc.
- elle utilise des fichiers hébergés chez elle ou peut-être même chez quelqu'un d'autre, donc pas de possibilité de personnalisation si vous vous contentez de suivre ce tuto. De plus, si ce quelqu'un supprime un jour son blog ou ces fichiers, a p'us de Lightbox pour vous.
- je vais aller un peu plus loin en parlant de l'application aux albums photo.
Mon but dans mes tutos est qu'autant que possible tout se fasse en autonomie, et que ça laisse le plus de libertés possible. Je vais donc détailler 2 façons d'intégrer Lightbox dans Canalblog:
Avec un hébergement tiers - en hébergeant Lightbox sur Canalblog.
Ensuite, nous verrons comment intégrer lightbox:
Dans un message - dans les albums photo.
Par souci de clarté, je vais utiliser des exemples concrets, avec des adresses réelles (celles que j'ai utilisées). Ces adresses sont évidemment à corriger pour s'adapter à votre cas.
Avec un hébergement tiers
C'est la solution la plus simple à mettre en oeuvre, et la plus souple pour des modification ultérieures.
Il vous faut un hébergement sur lequel vous pouvez créer des dossiers et sous-dossiers, et où vous pouvez avoir les adresses directes des fichiers.
Par exemple, j'ai choisi archive-host, un service gratuit d'hébergement en ligne.
Après avoir télécharger Lightbox 2 (version FR), vous dézippez l'archive. Vous procédez alors aux modifications que vous souhaitez, sur votre ordi, en regardant ce que ça donne grâce au fichier index_fr.html. Gardez de préférence les même noms d'images, ainsi vous n'aurez pas à modifier les adresses dans le fichier lightbox.css.
Une fois que vous avez vos fichiers définitifs, téléchargez-les tous, sauf lightbox.js, sur votre hébergement, en gardant la même structure de dossiers.
On ne met pas le fichier lightbox.js à ce stade, car il faut d'abord modifier les adresses des images de chargement et "fermer". Ne me demandez pas pourquoi ça ne marche pas avec les adresses relatives, je ne sais pas.
Donc, on récupère les adresses absolues des fichiers loading.gif et closelabel.gif et on les mets dans notre fichier lightbox.js là où il faut c'est à dire:
fileLoadingImage: 'http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/images/loading.gif',
fileBottomNavCloseImage: 'http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/images/closelabel.gif',
Maintenant, on peut télécharger le fichier lightbox.js dans le dossier js.
La mise en place sur Canalblog
Comme le dit Manuel, on va ajouter les fichiers javascript dans le header de nos pages.
Entre les balise <head> et </head>
- des pages d'accueil, des archives et d'un message pour utilisation dans les messages
- de la page de présentation d'un album ou d'une photo d'un album selon l'utilisation qu'on voudra dans les albums photo (voir plus loin)
on va mettre ceci (en gras les adresses des fichiers, à changer par les vôtres):
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/js/prototype.js"></script>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/js/lightbox.js"></script>
<link rel="stylesheet" href="http://sd-1.archive-host.com/membres/up/152282661762569155/lightbox204_fr/css/lightbox.css" type="text/css" media="screen" />
Note: rien ne vous empêche d'utiliser mes fichiers, et donc les adresses ci-dessus, si vous ne souhaitez pas faire de personnalisation. Cependant, et bien que je n'ai à priori pas de raison de les modifier ou de les supprimer, je ne garantis pas la conservation de ces fichiers.
En hébergeant sur Canalblog
Là c'est un chouilla plus complexe, à cause du renommage des fichiers par Canalblog et de l'impossibilité de créer des dossiers.
De plus, si on souhaite modifier un fichier par la suite, il changera obligatoirement d'adresse.
Donc, faites tout ce qui suit une fois que vous avez bien terminé vos personnalisations.
On va commencer par envoyer les images. Soit on les envoie une par une dans un message, soit on peut utiliser un album photo qu'on ne rendra pas public. Voir ce tuto pour les détails.
Maintenant qu'on a les adresses des images, on va pouvoir les mettre dans les fichiers lightbox.css et lightbox.js.
Dans le css:
#prevLink:hover, #prevLink:visited:hover { background: url(http://storage.canalblog.com/10/32/445046/28007721_m.gif) left 90% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://storage.canalblog.com/60/76/445046/28007716_m.gif) right 90% no-repeat; }
Dans le js:
fileLoadingImage: 'http://storage.canalblog.com/96/77/445046/28007715.gif',
fileBottomNavCloseImage: 'http://storage.canalblog.com/27/96/445046/28007712.gif',
Bien, on va pouvoir envoyer ces 2 fichiers, ainsi que le fichier prototype.js sur Canalblog. Voir ce tuto pour les détails.
Bon, il nous reste maintenant les fichiers scriptaculous.js, effects.js et builder.js.
Je ne sais pas si vous avez remarqué, mais dans les codes à insérer dans le header, le fichier scriptaculous.js appelle le chargement des fichiers effects.js et builder.js. Là:<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
Ca, ça marche si les 3 fichiers sont dans le même dossier.
Hors c'est impossible à faire sur l'hébergement de Canalblog.
Donc, on va pas s'emmerder, on ouvre nos fichiers avec le bloc-note, on copie tout le contenu du fichier effects.js et on le colle à la fin du fichier scriptaculous.js. On fait de même avec le fichier builder.js.
Et là je vous préviens tout de suite, j'y connais que dalle en javascript et je ne sais pas si le fichier obtenu est correct du point de vue langage. Mais en tout cas, ça marche.
Y a plus qu'a héberger notre nouveau fichier scriptaculous.js sur Canalblog.
La mise en place sur Canalblog
On va toujours ajouter les fichiers javascript dans le header de nos pages.
Entre les balise <head> et </head>
- des pages d'accueil, des archives et d'un message pour utilisation dans les messages
-
de la page de présentation d'un album ou d'une photo d'un album selon
l'utilisation qu'on voudra dans les albums photo (voir plus loin)
on va mettre ceci, avec dans l'ordre d'apparition: prototype.js, scriptaculous.js, lightbox.js, lightbox.css (en gras les adresses des fichiers, à changer par les vôtres):
<script type="text/javascript" src="http://storage.canalblog.com/45/34/445046/28110890.js"></script>
<script type="text/javascript" src="http://storage.canalblog.com/69/27/445046/28110895.js"></script>
<script type="text/javascript" src="http://storage.canalblog.com/00/58/445046/28110882.js"></script>
<link rel="stylesheet" href="http://storage.canalblog.com/82/80/445046/28294521.css" type="text/css" media="screen" />
Note: ici aussi vous pourriez utiliser mes fichiers et donc ces adresses, mais là je vous le déconseille car:
- la présentation a été un peu personnalisée pour coller au design de mon autre blog et ne vous conviendra pas forcément.
- Ces fichiers là sont beaucoup plus susceptibles d'être modifiés, et donc de changer d'adresse.
Intégration dans un message
On va suivre le mode d'emploi, c'est à dire ajouter un attribut rel="lightbox" aux liens.
Donc, on insère notre image, en cochant "créer une miniature..." et "afficher l'image à la taille original..."
On passe en mode html (bouton <>) et on a un code qui ressemble à ça:
<p> <a target="_blank" href="http://storage.canalblog.com/26/99/445046/28296141.jpg"><img width="300" height="206" border="0" src="http://storage.canalblog.com/26/99/445046/28296141_p.jpg" alt="inser_image" /></a></p>
On va le modifier pour activer notre lightbox.
A la place de target="_blank", on va mettre rel="lightbox". On peut ajouter un attribut title pour mettre une légende à la photo. Par exemple, ici, je vais mettre title="insertion de l'image".
Voilà le code modifié:
<p> <a rel="lightbox" title="insertion de l'image" href="http://storage.canalblog.com/26/99/445046/28296141.jpg"><img width="300" height="206" border="0" alt="inser_image" src="http://storage.canalblog.com/26/99/445046/28296141_p.jpg" /></a></p>
Cliquez sur la capture d'écran ci-dessus pour voir ce que ça donne.
Si on veut créer un groupe d'image, comme un album où sur chaque image agrandie on aura un lien suivant et / ou précédent, on ajoute une mention entre crochets à l'attribut rel, qui deviendra par exemple rel="lightbox[groupe 1]" sur toutes les images qu'on veut intégrer au groupe 1.
Intégration dans les albums
Les modifications seront apportées à tous les albums du blog. Il va y avoir 2 façons d'utiliser Lightbox dans les albums photo.
1 - sur la page d'une photo d'un album
Cette méthode est intéressante uniquement si vos photos ont une dimension plus grande que 500px, car cela revient finalement à faire agrandir la photo.
On va donc activer lightbox au niveau de la photo affichée en créant un lien vers la photo à taille originale(*).
On cherche le code suivant:
<img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" />
Et on y ajoute le lien avec les attributs rel et title.
<a href="<$BlogPhotoURL$>" rel="lightbox" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" /></a>
Démonstration sur les albums de ce blog, comme ici.
(*)En réalité la photo redimensionnée à 800 px maximum pour la plus grande dimension.
2 - sur la page de présentation d'un album
Cette méthode est intéressante dans tous les cas, elle remplace totalement la navigation de Canalblog, mais la fonction diaporama sera toujours opérationnelle.
Le principe: un album constitue un groupe Lightbox. En cliquant sur une vignette de la page de présentation, on obtiendra l'image agrandie aves les liens suivant et / ou précédent.
On va donc trifouiller au niveau du lien de la vignette:
<a href="<$BlogPhotoPageURL$>" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>" width="75" height="75" /></a>
On va modifier ce lien pour qui'l pointe non pas vers la page de la photo, mais vers la photo elle-même, et on y ajoute l'attribut rel.
<a href="<$BlogPhotoURL$>" title="<$BlogPhotoTitle$>" rel="lightbox[]"><img src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>" width="75" height="75" /></a>
On peut se permettre de ne rien mettre entre les crochets après lightbox, car ce code va s'appliquer sur toutes les vignettes de l'album, et il n'y a qu'un album sur la page.
Une page de démonstration ici.
Et voilà, amusez vous bien avec votre Lightbox!
25 juillet 2008
Album photo: que les vignettes en page de présentation
Etiquettes: album, avancé, images, photos
Mode: avancé
La page de présentation d'un album a le même aspect que celle d'une photo:
Une photo, l'image de couverture, sur une grande partie à gauche, et les miniatures dans une colonne à droite.
Seulement si on a beaucoup de photos dans l'album, cette présentation n'est pas terrible car on va se retrouver avec une colonne de miniatures très longue.
L'utilité de l'image de couverture étant discutable, on va la supprimer purement et simplement, pour que les vignettes s'étalent sur toute la largeur de la page
Voici la portion de code qui va nous intéresser dans la page de présentation d'un album:
<div id="album-content"><div class="albumbody"><CBAlbum>
<h2><$BlogAlbumTitle$></h2><img src="<$BlogAlbumCoverURL$>" width="<$BlogAlbumCoverWidth$>" height="<$BlogAlbumCoverHeight$>" /><BlogAlbumDescription><p><$BlogAlbumDescription$></p></BlogAlbumDescription>
</div></div>
<div id="album-nav"><div class="albumcol">
<h3><$BlogAlbumPhotosCount$> photo(s)
<BlogAlbumSlideShowURL> - <a href="<$BlogAlbumSlideShowURL$>" onclick="window.open(this.href, 'diaporama', 'width=500, height=375, location=0, resizable=0, scrollbars=0, status=0, toolbar=0, directories=0'); return(false);" title="Visionnez un diaporama de cet album">Diaporama</a></BlogAlbumSlideShowURL></h3>
<CBPhoto>
<a href="<$BlogPhotoPageURL$>" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>" width="75" height="75" /></a>
</CBPhoto>
</div></div>
</CBAlbum>
On va simplement supprimer tout ce qui permet d'afficher cette couverture, et ce qui met les vignettes dans une colonne à droite, c'est-à-dire tout ce qui est en gras ci-dessus.
On va obtenir le code suivant:
<h2><$BlogAlbumTitle$></h2><BlogAlbumDescription><p><$BlogAlbumDescription$></p></BlogAlbumDescription>
<div class="albumcol">
<h3><$BlogAlbumPhotosCount$> photo(s)
<BlogAlbumSlideShowURL> - <a href="<$BlogAlbumSlideShowURL$>" onclick="window.open(this.href, 'diaporama', 'width=500, height=375, location=0, resizable=0, scrollbars=0, status=0, toolbar=0, directories=0'); return(false);" title="Visionnez un diaporama de cet album">Diaporama</a></BlogAlbumSlideShowURL></h3>
<CBPhoto>
<a href="<$BlogPhotoPageURL$>" title="<$BlogPhotoTitle$>"><img src="<$BlogPhotoThumbNailURL$>" alt="<$BlogPhotoTitle$>" width="75" height="75" /></a>
</CBPhoto>
</div>
</CBAlbum>
Et voilà:
On peut bien sûr définir des styles pour le titre et la description qu'on retrouve dans le code là
<h2><$BlogAlbumTitle$></h2>
<p><$BlogAlbumDescription$></p>
Evidemment, cette modification sera pour tous les albums.
22 juillet 2008
Nuage de tags
Etiquettes: normal ou avancé, nuage, tags
Mode: normal et avancé
Une nouvelle fonctionnalité viens de faire son apparition sur Canalblog: le nuage de tags.
Un tag est une étiquette, un mot clé qu'on applique à un article.
Donc cette fonction complète et peut même remplacer les catégories. Le gros avantage par rapport aux catégories est qu'on peut donner plusieurs tags à un même article.
Désormais, sous la fenêtre de rédaction du message vous avez une nouvelle ligne pour entrer les tags à associer au message:
A noter que lors de la frappe, ils vous est proposé les tags commençant par les mêmes lettres déjà utilisés sur le blog, il suffit alors de cliquer sur celui souhaité pour l'ajouter.
Par la suite, pour ajouter ou supprimer des tags, il suffit d'éditer le message et d'ajouter ou supprimer des mots de ce champ. vous pouvez donc taguer toutes vos archives même si ça va être long pour certain ;). Heureusement, dans la rubrique contenu > messages, il y a également une nouvelle fonction la gestion rapide des tags qui peut permettre de gagner du temps.
Et maintenant, comment mes lecteurs vont voir ces tags?
En mode normal, il s'agit d'un bloc à placer dans une colonne (comme le bloc album, liens d'amis, etc.). On trouvera donc à le placer dans apparence > blocs.
Cela ajoutera un élément dans la colonne choisi, où apparaîtront sous forme de liens les tags utilisés sur le blog, avec une taille plus ou moins grosse suivant leur fréquence.
Un nouvel élément apparaîtra en pied des messages: tags. Ceci apparaîtra même si le bloc "nuage de tag" n'est pas placé dans une colonne. Vos lecteurs pourront donc accéder à tous les articles associé à un tag en cliquant sur le lien en bas d'un article.
Voilà un aperçu de ce que ça donnera sur le blog:
En mode avancé, ben on peut le placer où on veut. Voici le code:
<div class="title">Tags</div><ul class="tagcloud"><CBTags>
<li><a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$>message(s)" rel="tag"><$BlogTagName$></a></li>
</CBTags>
</ul>
Attention, il faut insérer ce code en respectant bien les retours à la ligne après <CBTags> et avant </CBTags>, sinon il risque d'y avoir un bug d'affichage, le nuage se prolongera hors de la colonne et sera coupé. Donc vous mettez ce code par exemple dans votre colonne gauche, et vous regardez ce que ça donne:
Ah mais!... Ca ressemble pas du tout à un nuage ce truc! Les liens sont tous les uns au-dessous des autres! Et pis où il est le tag en pied de message, hein? Non mais c'est quoi c't'arnaque?
Du calme!
Ben oui, en mode avancé, plus rien n'est automatique, il va donc falloir ajouter à la main les codes qui se mettent tout seul en mode normal.
Pour le nuage, il faut indiquer dans la feuille de style qu'on veut que la liste de lien s'affiche en ligne.
On va ajouter ça:
ul.tagcloud {
text-align: left;
margin-top: 10px;
}
ul.tagcloud li {
line-height: 200%;
display: inline;
margin-right: 0.5em;
}
Evidemment, rien ne vous empêche d'appliquer d'autres styles (couleur de police, taille de la police de départ, marges ou autres).
Par exemple, si vous voulez diminuer la taille de police de départ, dans les attributs de ul.tagcloud li vous ajoutezfont-size: 80%;
Pour les tags en pied de message, il va falloir ajouter ça dans les différentes pages (accueil, archives, message), au niveau du "itemfooter" des messages. On va donc rechercher ça:
<div class="itemfooter"> Posté par<$BlogItemAuthorNickname$> à <$BlogItemDateTime$><BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>"title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
et ajoutez à la fin, juste avant </div>, ceci:
<BlogItemTags><br/>Tags : <$BlogItemTagsList$></BlogItemTags>
Le <br/> est un retour à la ligne, il n'est pas obligatoire. Si vous préférez que tout soit sur la même ligne, alors mettez plutôt ceci:
- <BlogItemTags>Tags : <$BlogItemTagsList$></BlogItemTags>
Et voilà ce que ça peut donner:
(là le retour à la ligne après "tag : " en pied de message c'est juste parce que la colonne n'est pas assez large).
Sur ce blog, j'ai mis le nuage de tag sur ma page d'accueil.
Ajout suite au commentaire de Maryse:
Si vous voulez supprimer la fonction qui agrandi la taille des liens en fonction de la fréquence des tags, dans le code du nuage de tags il faut supprimer ceci:
style="font-size:<$BlogTagFontSize$>;"
Mais il faut savoir que la présentation du nuage de tags est déjà entrée dans les moeurs des internautes, et c'est ça qui le rend identifiable au premier coup d'oeil.
Nouvel ajout suite à des remarques sur le forum de Canalblog et à l'article de l'aide officielle:
Le nombre de tags affiché dans le nuage est limité à 30. Ce sont d'abord les plus utilisés puis les derniers ajoutés.
Si vous avez plus de 30 tags sur votre blog, il n'y a que sur la page d'index des archives qu'il est possible d'afficher tous les tags.
Voici le code html, à placer dans la page de l'index des archives donc:
<h2>Tous les tags</h2>
<ul class="taglist">
<CBTags>
<li><a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$>message(s)" rel="tag"><$BlogTagName$></a></li>
</CBTags>
</ul>
Vous pouvez remarquer qu'en dehors du titre et de la classe, le code est exactement le même que pour le nuage, la différence se fait donc au niveau de la page, je ne sais pas comment.
Pour le style, 2 possibilités principales.
vous pouvez ajouter ceci à la feuille de style:
ul.taglist {
text-align: left;
padding: 0px;
margin-left: 0px;
}
ul.taglist li {
line-height: 200%;
display: inline;
margin-right: 0.5em;
}
Ou bien utiliser le même style que pour le nuage (classe tagcloud) en remplaçant taglist par tagcloud dans le code html.
La seule différence entre les 2 styles par défaut (ceux que je vous donne ici), c'est qu'avec tagcloud le nuage présente un retrait à gauche et pas avec taglist.
Enfin, pour clarifier les choses pour le visiteur, on pourra sous le nuage de tags des pages d'accueil, d'archives et d'un message, ajouter un lien "tous les tags" envoyant sur la page d'index des archives.
Sur la page d'index des archives, on va ajouter une ancre juste avant le bloc de tags.
<a name="tags"></a>
<h2>Tous les tags</h2>
Ceci permettra de créer un lien qui pointera directement vers cette partie de la page.
Reste plus qu'à ajouter le lien dans les pages d'accueil, d'archives et d'un message avec ce code:
<a href="<$BlogArchiveFileName$>#tags">tous les tags</a>
19 juillet 2008
Hébergement de fichiers sur Canalblog
Etiquettes: hébergement, normal
Mode: normal
Canalblog offre un espace illimité pour stocker images et fichiers qu'on souhaite partager via le blog.
Les seules limites concernent:
- le poids des fichiers, 4 Mo maximum pour les images, 1 Mo maximum pour les autres fichiers.
- la taille des images, Canalblog réduit automatiquement les images à 800px maximum pour la plus grande longueur (mais ceci peut être contourné, on verra ça plus loin).
On peut détourner - sans en abuser bien sûr ;) - l'usage premier de cette hébergement (à savoir l'affichage dans des messages du blog) pour stocker des fichiers qui vont nous servir par ailleurs, par exemple des fichiers html, css, textes, des images, des scripts javascript, etc. L'utilité sera évidemment plus importante en mode avancé.
Cependant il faudra prendre en compte les contraintes suivantes:
- Les fichiers sont automatiquement renommés par une série de chiffres (mais conservent leur extension).
- Il est impossible de remplacer un fichier donc impossible d'en modifier un en conservant le même nom de fichier.
- On ne peut pas créer de dossiers.
Maintenant, nous allons voir comment télécharger des fichiers et récupérer leurs adresses.
La fonction première étant l'insertion dans un message, il va falloir passer par là.
LES IMAGES
On crée donc un nouveau message et on clique sur l'icône d'insertion d'image 
.
On arrive sur l'interface d'insertion d'une image
On clique sur parcourir pour aller chercher l'image sur son disque dur, on décoche "créer une miniature..." et "afficher l'image à la taille originale..." pour obtenir directement l'image dans sa taille normale.
Attention, Canalblog réduit les images à 800 px maximum. Si on veut héberger une image de taille supérieure et qu'on en a besoin à la taille originale (une bannière par exemple de plus de 800 px de large), il faudra insérer l'image comme un fichier (avec un poids alors limité à 1 Mo).
Si vous utiliser des png transparents, je vous conseille d'insérer l'image comme un fichier également, car j'ai constaté que IE7 pouvait supporter la transparence dans ce cas, mais jamais quand on l'insère comme une image.
Récupérer l'adresse
1) Là, on peut directement récupérer l'adresse de l'image en passant l'éditeur de message en mode html par le bouton .
Le code ressemblera à ça:
<img width="480" height="337" border="0" src="http://storage.canalblog.com/44/10/445046/28073486.gif" alt="insertion_image" />
L'adresse de l'image est l'attribut src, c'est donc qui se trouve entre guillemet après src= et qui commence par http://, dans mon exemple, il s'agit de http://storage.canalblog.com/44/10/445046/28073486.gif
2) La deuxième façon de récupérer l'adresse est d'aller dans la gestion des fichiers. Il est inutile de sauvegarder le message, tout fichier envoyé est conservé, même si le message n'est pas sauvé ou s'il est supprimé.
On va donc aller dans outil > gestion des fichiers > images.
On a la liste de toutes les images envoyées sur le blog, qu'on peut classer par nom, date ou taille croissant ou décroissant en cliquant sur l'en-tête de colonne correspondante.
Il suffit de cliquer sur le nom d'une image pour l'afficher, on a alors son adresse dans la barre d'adresse du navigateur.
On peut aussi faire clic droit > copier l'adresse du lien (variable suivant les navigateurs).
Le cas des albums
On peut aussi héberger des images dans un album, ce qui permet de classer un peu et de palier à l'impossibilité de créer des dossiers. Attention cependant, par cette méthode il sera impossible d'avoir des images de taille supérieure à 800 px.
On va aller dans Contenu > album photos > ajouter un album
On indique non pour "rendre cet album accessible au public" afin qu'il ne s'affiche pas sur le blog. On fini par "ajouter ce nouvel album", il apparaît dans la liste des albums, il n'y a plus qu'à y ajouter les images.
Récupérer les adresses des images d'album
Là aussi plusieurs méthodes.
1) Dans la liste des albums, on clique sur "voir l'album". On parcourt l'album, et à chaque image soit on affiche l'image en cliquant dessus et on copie l'adresse de la barre d'adresse du navigateur, soit on clique droit sur l'image > copier l'adresse du lien.
2) Dans la liste des albums, on clique sur le lien qui indique le nombre de photos
Ensuite, dans la liste des photos, on clique sur "modifier" ou sur la vignette. On arrive alors ici
En cliquant sur la vignette ou sur "taille réelle" on affiche la photo de l'album (ou on récupère l'adresse par clic droit).
Dans les 2 cas, l'adresse récupérée sera du type:
http://storage.canalblog.com/91/22/445046/26259153_m.jpg
Il s'agit de l'image réduite à 500 px maximum utilisée dans l'affichage des albums.
Si votre image originale est plus grande, il faut impérativement supprimer _m du nom de fichier pour avoir l'image originale (qui comme je l'ai dit sera quoi qu'il arrive réduite à 800 px maximum)
La bonne adresse sera donc du type:
http://storage.canalblog.com/91/22/445046/26259153.jpg
LES FICHIERS
Comme pour les images, on crée un nouveau message et on insère le fichier en cliquant sur le bouton 
Récupérer l'adresse
1) Comme pour les images, immédiatement en passant en mode html . On aura un code de la forme
<a href="http://storage.canalblog.com/09/23/445046/25482675.html">mp3_deezer</a>
exemple avec un fichier html.
L'adresse est l'attribut href, ici http://storage.canalblog.com/09/23/445046/25482675.html
2) Dans la gestion des fichiers, dans le répertoire docs.
30 juin 2008
Inclure un moteur de recherche Google sans pub sur son blog
Etiquettes: google, normal ou avancé, recherche
Mode: normal et avancé
Note: ce qui suit n'est utilisable que si votre blog est indexé par Google. Donc vous ne pourrez pas mettre cela en place à la création du blog.
Pour vérifier que votre blog est indexé, tapez son adresse complète dans la page de recherche Google, s'il vous trouve, c'est bon.
Sinon, vous pouvez soumettre votre adresse ici.
Google propose un service appelé "moteur de recherche personnalisé".
Il permet d'intégrer très facilement un moteur de recherche sur un site, selon plusieurs méthodes.
Je vais décrire celle que j'utilise ici, un champ de recherche sur la page, et l'affichage des résultats sur une page hébergée par Google.
Tout d'abord, il faut avoir un compte Google. Si vous n'en avez pas déjà un, c'est ici que ça se passe pour s'inscrire.
Ensuite, on va se rendre sur cette page et cliquer sur le gros bouton "créer un moteur de recherche personnalisé".
On arrive sur la page de création où il suffit de remplir les champs.
Il faut au moins un nom, une description et un site à explorer.
Pour que le moteur ne recherche que sur son propre blog, sous types de recherches on laisse coché le bouton "uniquement les sites que je sélectionne" et en-dessous dans site à explorer on mets l'adresse de son blog, par exemple http://webbricolo.canalblog.com (exemple pris totalement au hasard).
Enfin, sous sélectionner une édition, on va laisser cocher "standard" pour avoir la version gratuite. Si vous ne voulez pas voir les liens commerciaux dans les résultats de recherche, cochez la case "Ne pas diffuser d'annonces sur les pages de résultats". Il faut juste avoir conscience qu'on n'en a pas le droit en tant que personne individuelle (option réservée
aux organisations à but non lucratif, aux établissements d'enseignement
et aux administrations) et qu'il peut donc y avoir des conséquences (reste à savoir lesquelles).
La page suivante vous propose de tester votre moteur, cela permet de voir s'il n'y a pas eu d'erreur dans la saisie de l'adresse du site par exemple (note, cela peut demander un peu de temps avant d'être opérationnel, si ça ne fonctionne pas du premier coup tentez une deuxième fois avant de revenir en arrière).
Si c'est ok, on clique sur "terminer" et on est redirigé vers la page d'administration de ses moteurs de recherche. Cette page se présente comme ça:
Vous remarquerez qu'on peut créer plusieurs moteurs personnalisés (un pour chaque blog qu'on possède par exemple).
Pour chaque moteur on a le menu:
page d'accueil:
lien vers la page d'accueil du moteur. En effet, on peut utiliser une page à part au lieu d'intégrer un champ de recherche sur son blog. Cette page indique le nom du moteur, et diverses autres infos. Une image valant mieux qu'un long discours:
Cela peut être utile à ceux qui sont en mode normal et qui ne veulent pas s'embêter à essayer de placer le code dans une colonne. Il suffit de mettre un lien vers cette page.
Panneau de configuration:
C'est là qu'on va choisir la façon d'intégrer le moteur à son site, et qu'on va pouvoir personnaliser un peu l'apparence de la page de résultats.
Une fois dans le panneau de configuration, on va aller dans "éléments graphiques" dans le menu horizontal du haut.
En premier on peut choisir l'apparence du champ de recherche.
Ensuite, on va définir les couleurs de la page de résultats, et on peut y ajouter un logo.
Pour récupérer le code du champ de recherche, on va aller dans "code".
Là on trouve un truc qui ressemble à ça:
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="007086346091578081264:zxeg9uy-4f8" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Rechercher" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box〈=fr"></script>
size="31" défini la largeur du champ de recherche, à adapter suivant là où vous mettez le vôtre. Par exemple, moi j'ai mis size="25" pour qu'il entre dans la largeur de ma colonne.
value="rechercher" défini le texte qui s'affiche sur le bouton. Moi j'ai mis value="Trouver".
On peut mettre une valeur par défaut dans le champ, qui s'effacera quand on cliquera dessus (ça aura aussi l'avantage de faire disparaître le logo Google si on a choisi la présentation avec filigrane). Pour cela, on va ajouter les attributs value et onclick à l'input adéquat, par exemple:
<input type="text" name="q" size="25" value="recherche" onclick="if (this.value=='recherche') this.value=''"/>
Enfin, on peut appliquer un style sur le div afin de le positionner, ou d'ajouter un fond, etc.
Au final, et pour exemple, voici le code utilisé sur ce blog:
<form action="http://www.google.com/cse" id="cse-search-box">
<div >
<input type="hidden" name="cx" value="007086346091578081264:zxeg9uy-4f8" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="25" value="rechercher dans ce blog" onclick="if (this.value=='rechercher dans ce blog') this.value=''"/>
<input type="submit" name="sa" value="Trouver sur ce site" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box〈=fr"></script>
Bien sûr, il faudra recopier le code sur toutes les pages où on veut que le champ apparaisse.
Lien complémentaire: comment placer un code dans une colonne en mode normal chez Alérion.
31 mai 2008
Agrandir les images des albums photo
Etiquettes: album, avancé, images, photos
Mode: avancé
Quand on crée un album photo, Canalblog redimensionne automatiquement les images pour les réduire à 500px sur la plus grande dimension.
Et il n'est malheureusement pas proposé l'agrandissement de l'image.
En mode avancé, on peut corriger ça (*).
On pourrait tout simplement annuler le redimensionnement, mais si on a des images plus grandes que la zone où elles s'affichent, elles seront tronquées.
On va donc préférer créer un lien vers l'image à taille originale.
On va donc aller dans "éditer les fichiers de ce modèle" et sélectionner la page d'une photo d'un album.
On va y rechercher le code suivant:
<h2><$BlogPhotoTitle$></h2><img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" />
<img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" />
est le code qui affiche l'image.
<$BlogPhotoMediumURL$>
est le code qui appelle l'adresse de l'image réduite.
Le code qui appellera l'adresse de l'image originale est <$BlogPhotoURL$>.
On va donc créer un lien vers cette adresse. On va le mettre sur l'image, comme je l'ai fait pour l'album de ce blog.
On va modifier le code pour ajouter ce qui est en gras:
<h2><$BlogPhotoTitle$></h2>
<a href="<$BlogPhotoURL$>">
<img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" />
</a>
On peut à la suite mettre des indications et proposer d'ouvrir l'image agrandie dans une nouvelle fenêtre.
Voici le bout de code qui va donner ce que j'ai fait sur cette page:
<h2><$BlogPhotoTitle$></h2>
<a href="<$BlogPhotoURL$>">
<img src="<$BlogPhotoMediumURL$>" width="<$BlogPhotoMediumWidth$>" height="<$BlogPhotoMediumHeight$>" alt="<$BlogPhotoTitle$>" />
</a>
<br/>cliquer sur la photo pour l'agrandir<br/>
<a href="<$BlogPhotoURL$>" target="_blank">cliquer ici pour l'agrandir dans une nouvelle fenêtre</a>
On pourrait tout aussi bien faire ouvrir l'image agrandie dans une nouvelle fenêtre directement par le lien sur l'image réduite, en ajoutant target="_blank" au niveau du premier <a href="<$BlogPhotoURL$>">.
Mais je trouve qu'il est toujours préférable de laisser le choix au visiteur, ou tout au moins de le prévenir du comportement du lien.
19 mai 2008
Redirection de la page d'accueil
Etiquettes: accueil, avancé
Mode: avancé
Par défaut, la page d'accueil du blog commence soit par le dernier billet écrit, soit par le premier selon l'ordre d'affichage choisi.
Il se peut que vous souhaitiez modifier cela. Par exemple en créant un message d'accueil spécifique (voir ici).
Ou alors, en choisissant une catégorie particulière.
Par exemple, sur le forum de Canalblog, quelqu'un a demandé ceci:
Comment ouvrir le blog sur la catégorie "news" et faire que les autres catégories ne soit accessibles que par les liens dans le menu?
Et bien, en mode avancé, on va simplement faire une redirection. On va indiquer au navigateur que lorsqu'on lui demande l'adresse http://blog.canalblog.com, il faut aller à l'adresse http://blog.canalblog.com/archives/news/index.html.
Pour cela, on va:
1) Récupérer l'adresse de la page qu'on veut définir comme page d'accueil
2) Supprimer le contenu de la page d'accueil (en prenant soin quand même de le sauvegarder avant, on sait jamais) et le remplacer par ceci:
<html>
<head>
<meta http-equiv="refresh" content="0; url=http://blog.canalblog.com/archives/news/index.html">
</head>
<body>
</body>
</html>
0 est le délai de changement de page en seconde, on met 0 pour que cela soit immédiat.
http://blog.canalblog.com/archives/news/index.html est bien évidemment à remplacer par l'adresse réelle.
Cette astuce peut être utilisée pour rediriger la page d'accueil vers n'importe quel page du blog (une catégorie ou un message spécifique) et constitue donc une autre alternative à ce que j'expliquais dans mon article sur la page d'accueil.
On peut par exemple créer une catégorie "accueil", avec un ou plusieurs messages et rediriger vers cette catégorie. Cela fait qu'on aura en plus un lien "accueil" dans les catégories.
12 mai 2008
Lecteur mp3 dans une nouvelle fenêtre
Etiquettes: mp3, normal ou avancé
Mode: normal ou avancé
Nota: ce tuto a pour objet de créer un lien proposant d'ouvrir un lecteur mp3 dans une nouvelle fenêtre, et non d'ouvrir automatiquement ce lecteur à l'ouverture du blog.
Beaucoup sont ceux qui ajoutent de la musique sur leur blog.
Une question qui revient souvent est comment faire pour que la musique ne s'interrompt pas lors de la navigation sur le blog
Une solution consiste à ouvrir le lecteur dans une autre fenêtre. Cela peut être fait de façon automatique par un pop-up mais cela demande un script javascript et surtout ne laisse pas le choix au visiteur. De plus, nombreux sont les internautes qui utilisent un bloqueur de pop-up.
Selon moi, une bonne solution est de proposer un lien "ouvrir le lecteur dans une nouvelle fenêtre". Cela laisse sa liberté de choix au visiteur et n'est pas entravé par des bloqueurs de fenêtre intempestive.
De plus, cela peut être mis en place très facilement, uniquement avec du html.
Voici comment nous allons procéder, avec par exemple une playlist Deezer (mais cela fonctionnera pour n'importe quel code de lecteur).
1) Tout d'abord, on récupère le code.
<div style="width:180px;height:236px;">
<object width="180" height="220">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2005670〈=FR&colorBackground=0x525252&colorButtons=0xDDDDDD&textColor1=0xFFFFFF&textColor2=0xCCCCCC&autoplay=0&autoShuffle=0&id=671635"></param><embed src="http://www.deezer.com/embedded/widget.swf?path=2005670〈=FR&colorBackground=0x525252&colorButtons=0xDDDDDD&textColor1=0xFFFFFF&textColor2=0xCCCCCC&autoplay=0&autoShuffle=0&id=671635" type="application/x-shockwave-flash" width="180" height="220">
</embed>
</object>
<a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" border="0" style="border:none;margin:0;padding:0;" /></a>
</div>
2) On va copier ce code dans un fichier texte, avec le bloc-note, et on va enregistrer ce fichier avec une extension .html.
Par exemple mp3_deezer.html (note: avec le bloc-note de windows, le fichier s'enregistrera automatiquement avec l'extension .txt, il faudra le renommer ensuite. Avec tout autre bloc-note digne de ce nom, vous pourrez l'enregistrer directement avec l'extension .html).
3) Ensuite, on va envoyer ce fichier mp3_deezer.html sur les serveurs de Canalblog, en l'insérant dans un message, par le bouton . Dans la rédaction du message, on va passer en html par le bouton pour voir le code et récupérer l'adresse du fichier, on aura quelque chose qui ressemble à ça:
<p><a href="http://storage.canalblog.com/09/23/445046/25482675.html">mp3_deezer</a></p>
4) Dernière étape, l'insertion dans le blog.
En mode avancé, quelque soit l'endroit où on veut insérer son lecteur, il suffit d'y coller le code du lecteur et le lien vers la page externe en ajoutant un attribut le forçant à s'ouvrir dans une nouvelle fenêtre:
<p><a target="_blank" href="http://storage.canalblog.com/09/23/445046/25482675.html">ouvrir le lecteur dans une nouvelle fenêtre</a></p>
Voilà ce que ça donnera:
ouvrir le lecteur dans une nouvelle fenêtre
En mode normal, le plus simple est de faire l'opération ci-dessus dans un message qu'on maintiendra en début de page d'accueil en jouant sur la date.
Si vous tenez à mettre votre lecteur dans une colonne, alors il vous faudra suivre le tuto d'Alerion pour mettre un widget dans la colonne de gauche et mettre le lien vers la nouvelle fenêtre dans les liens d'amis.
On mettra ce lien dans une catégorie nommée de sorte qu'elle soit en premier (par exemple "[espace]Lecteur mp3"). Dans le champ "adresse internet (URL)" il faudra entrer:
http://storage.canalblog.com/09/23/445046/25482675.html" target="_blank
à modifier bien sûr en fonction de l'adresse récupérée à l'étape 3).
On peut aussi simplement laisser ce lien dans le message d'accueil qui est nécessaire pour appliquer le tuto d'Alerion.
Si on change sa playlist, il faut penser à changer tous les codes et remplacer le fichier mp3_deezer.html. Il faudra à nouveau envoyer ce fichier sur les serveurs de Canalblog et modifier les liens avec la nouvelle adresse.
On peut aussi utiliser une solution autre d'hébergement gratuit pour ce fichier html, nous évitant de modifier l'adresse du lien.
Un autre exemple sur mon autre blog.
29 avril 2008
Bannière réactive
Etiquettes: avancé, bannière
Mode: avancé
Prérequis: savoir utiliser un logiciel de retouche d'image pour la création de votre bannière ;)
Vous remarquerez que le texte "blog de test" de la bannière en haut de cette page devient "retour à l'accueil" quand on passe la souris dessus. Maaaaaagiiiiie :D. Non, non, CSS.
En fait, il n'y a pas que le texte qui change, mais toute l'image. C'est ce qu'on appelle un rollover, ou une image réactive au survol.
Ceci est faisable en javascript, mais comme j'y connais rien là-dedans, j'utilise la technique CSS présentée sur ce tuto de l'excellent site Alsacréations.
Je vais donc reprendre ce tuto, appliqué à ma bannière.
On va utiliser en fait une seule et même image comportant les 2 images à afficher, l'une au dessus de l'autre:
En pointillés, la séparation entre les 2 images (à ne pas faire figurer sur l'image utilisée bien sûr), qui doit se trouver pile au milieu.
Il faut connaître la hauteur de notre image en pixels. La mienne fait 260px de haut au total, soit 130px pour chaque image (l'image ci-dessus est réduite).
Ensuite, on va insérer la bannière, comme une bannière normale, dans la feuille de style. Mais on ne va pas la mettre au niveau du topbar-logo, comme cela se fait en mode normal. On va placer l'image en fond du lien du div .logolink. En effet, c'est ensuite le comportement de ce lien qui va nous permettre de changer l'image.
#topbar-logo {
height: 130px; /*hauteur de la bannière correspondant à la moitié de la hauteur totale de l'image*/
width: 900px; /*largeur de la bannière correspondant à la largeur de l'image et du blog*/
background-color: #EFF6F7;
}
div .logolink a {
display: block;
background: transparent url('http://storage.canalblog.com/08/88/445046/24475608.png') 0 0 no-repeat;
/*ici, on a l'adresse de l'image.
Ensuite 0 0 place l'image à 0px du bord gauche et 0 pixel du bord haut.
Ou si vous préférez, le coin haut gauche de l'image sera dans le coin haut gauche du conteneur.
no-repeat pour que l'image ne se répète pas*/
height: 130px; /*hauteur de la bannière, on ne verra que la moitié supérieure de l'image*/
width: 900px; /*largeur de la bannière*/
}
Pour changer l'image au survol, on va définir les attribut de ce lien au survol.
On va donc ajouter ceci:
div .logolink a:hover{
display: block;
background: transparent url('http://storage.canalblog.com/08/88/445046/24475608.png') 0 -130px no-repeat;
/*ici, on a toujours l'adresse de l'image, qui est la même.
Ensuite 0 -130px déplace l'image de 130px vers le haut.
Ou si vous préférez, le coin haut gauche de l'image sera 130px au dessus du coin haut gauche du conteneur.*/
height: 130px; /*hauteur de la bannière, cette fois on ne verra que la moitié inférieure de l'image*/
width: 900px;
}
Voilà, ce n'est pas plus compliqué que cela et c'est applicable dans n'importe quel contexte (pour un menu sur le tuto de Alsacréations, pour une bannière ici...).
Sur ma page d'accueil, j'ai appliqué la même méthode, mais en plus j'ai divisé ma bannière en 3, pour avoir 3 liens les uns à côté des autres (profil, accès au blog, contact).
Il faut pour cela utiliser 3 images, et au lieu d'avoir un seul div de class logolink, en faire 3 de 3 class ou id différentes, placés les un à côté des autres dans le topbar-logo (avec un attribut float: left;).
Voici les images utilisées (en 2 fois plus petit):
Voici le code html de ma bannière de la page d'accueil:
<div id="topbar-logo">
<div id="profil"><a href="<$BlogOwnerProfileURL$>" title="Bonjour, je me présente!"></a></div>
<div id="blog"><a href="http://webbricolo.canalblog.com/archives/p0-1.html" title="accès au blog"></a></div>
<div id="mecrire"><a href="<$BlogOwnerNoSpamEmailLink$>" title="m'écrire"></a></div></div>
Note: les attributs title permettent d'afficher en plus une info-bulle.
Et enfin, ce qui est ajouté dans la feuille de style:
#profil a {
display: block;
float: left;
width: 360px;
height: 130px;
background: url('http://storage.canalblog.com/35/67/445046/24482428.png') no-repeat 0 0;
}
#profil a:hover {
display: block;
width: 360px;
height: 130px;
background: url('http://storage.canalblog.com/35/67/445046/24482428.png') no-repeat 0 -130px;
}
#blog a {
display: block;
float: left;
width: 240px;
height: 130px;
background: url('http://storage.canalblog.com/89/40/445046/24482438.png') no-repeat 0 0;
}
#blog a:hover {
display: block;
width: 240px;
height: 130px;
background: url('http://storage.canalblog.com/89/40/445046/24482438.png') no-repeat 0 -130px;
}
#mecrire a {
display: block;
float: left;
width: 300px;
height: 130px;
background: url('http://storage.canalblog.com/92/62/445046/24482412.png') no-repeat 0 0;
}
#mecrire a:hover {
display: block;
width: 300px;
height: 130px;
background: url('http://storage.canalblog.com/92/62/445046/24482412.png') no-repeat 0 -130px;
}
Vous pouvez voir un autre exemple d'application sur mon autre blog, avec des images qui "bougent" au lieu d'avoir un changement de texte.
