les bidouillages de kyungjin

test lecteur Deezer

kyungjin — Sun, 20 Sep 2009 13:27:00 GMT

test google map

kyungjin — Sun, 24 May 2009 07:36:00 GMT

Afficher Itinéraire Ben&Simon sur une carte plus grande

fichier flash dans une colonne en mode normal

kyungjin — Mon, 19 Jan 2009 10:27:00 GMT

l'animation flash ci-dessous est déplacée dans la colonne de droite grâce au script d'Alérion
Ici elle est insérée 2 fois dans le message pour qu'elle apparaissent aux 2 endroits.

Une fois normalement, la deuxième fois en utilisant l'astuce d'Alérion.

test overflow dans un seul message

kyungjin — Thu, 08 Jan 2009 15:09:00 GMT

blabla bla
blallal vlalkqfsff fsdqfs dfs dsgs qgsqdg gqg gsd gfdq gfd
gsdqgsqdfg
gqsdgdfqgqg gjghdhsghjkhq sejhgsqgtliml kkkkkdkdkdkd,x;v d dsqgdsqgsdfqgh
sdfqdg

dgsgfdg g dfgdg df fqsf fqsfq f fsqff fsdqf sdqfsfsdffd fdsgqg sdg

sdggsdgsdg

sgdgsdgsdgg
sggggggggggggsg
sdgsdggsddgsg

et voilà.

test yahoobabelfish

kyungjin — Sat, 03 Jan 2009 20:42:00 GMT

pour voir si ça fonctionne. voiture achat maison

Titre défilant dans la barre du navigateur

kyungjin — Tue, 04 Nov 2008 09:47:00 GMT

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

test albums

kyungjin — Sat, 02 Aug 2008 10:19:00 GMT

Albums photos

bla
tets

Personnaliser Yahoo! Babelfish

kyungjin — Fri, 01 Aug 2008 20:43:00 GMT

Mise à jour 20 janvier 2009
Je viens de constater un souci que je ne m'explique pas encore avec ce tuto: si je recrée un nouveau code les traductions n'ont pas l'air de fonctionner correctement, pourtant mon code exemple de ce tuto fonctionne parfaitement, alors qu'il est basé sur exactement la même chose.
Si vous avez essayé d'utiliser ce tuto, merci de me faire part de vos retours.

Yahoo Babelfish est un service de traduction automatique.
Il propose un outil à insérer dans son site, pour proposer à ses visiteurs de traduire directement la page sur laquelle ils sont.

Evidemment, cet outil a tous les défauts d'un traducteur automatique, au mot par mot. Mais ça peut servir quand même.
Côté design, c'est pas folichon, Yahoo propose une seule apparence par défaut, celle-ci:

Et c'est là que vous me remerciez d'exister car je vais vous dire comment personnaliser tout ça pour mieux l'intégrer à votre site :)

Cela va se faire en plusieurs étapes:
1) Récupérer le fichier à personnaliser
2) Modifier le fichier et les images
3) Héberger le nouveau fichier
4) Modifier le code de l'outil

1) Récupérer le fichier à personaliser
Pour insérer cet outil, Yahoo nous donne le code suivant à mettre dans nos pages html:

<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://fr.babelfish.yahoo.com/free_trans_service/babelfish2.js?from_lang=fr&region=fr"></script>

Et c'est quoi là-dedans qu'on va pouvoir personnaliser, hein?
Là, pas grand chose. Mais dans le fichier javascript qui est appelé par ce script, plein de choses.
Donc, première étape, récupérer le fichier babelfish2.js, surtout son contenu. Vous embêtez pas, je l'ai fait pour vous.

document.write('<div style="background:#7F9DB9;width:131px;padding-bottom:1px">    <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0">    <div style="background:#FFF;margin:0 1px 0px 1px;padding:2px;">    <div style="font:12px arial">Choisissez une <b>langue de traduction</b></div>    <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0">    <br>    <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">    <option value=\'\'>Choisir la langue</option><option value="en_en">anglais</option><option value="en_de">allemand</option><option value="en_el">grec</option><option value="en_es">espagnol</option><option value="en_it">italien</option><option value="en_nl">néerlandais</option><option value="en_pt">portugais</option>    </select>    </div></div>')<!-- fe01.bff.search.re1.yahoo.com uncompressed/chunked Fri Aug  1 12:29:11 PDT 2008 -->

Si vous tenez à savoir comment faire: vous vous rendez à l'adresse http://fr.babelfish.yahoo.com/free_trans_service/babelfish2.js qui est indiquée dans le code de Yahoo, et vous faites afficher la source.

2) Modifier le fichier et les images
On voit dans ce fichier babelfish2.js qu'il génère en fait un code html, celui qui va faire afficher l'outil de traduction.
Voici ce code, mis en forme:

<div style="background:#7F9DB9;width:131px;padding-bottom:1px">
    <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0">
    <div style="background:#FFF;margin:0 1px 0px 1px;padding:2px;">
        <div style="font:12px arial">Choisissez une <b>langue de traduction</b>
        </div>
        <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>
        <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">
            <option value=\'\'>Choisir la langue</option>
            <option value="en_en">anglais</option>
            <option value="en_de">allemand</option>
            <option value="en_el">grec</option>
            <option value="en_es">espagnol</option>
            <option value="en_it">italien</option>
            <option value="en_nl">néerlandais</option>
            <option value="en_pt">portugais</option>
        </select>    
    </div>
</div>

Et voilà la structure en image:

Le logo Yahoo, c'est http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif.
L'image du poisson, c'est http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif.
Pour changer ces images, il suffit de modifier les adresses pour mettre celles de ses propres images.
On peut aussi purement et simplement les supprimer en supprimant les codes correspondants
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0"> et
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>

Mais on peut aller plus loin. En effet, vous remarquerez qu'un attribut style est déclaré dans chaque div, on va pouvoir modifier ces attributs, en enlever, en ajouter... Il suffit de connaître un peu le css.
Je vous conseille de créer un fichier html où vous copierez le code, en l'ouvrant avec votre navigateur vous verrez directement ce que ça donne. Vous pouvez ainsi faire tous vos essais en local.
Pour l'exemple, voici le code que j'ai utilisé (en gras ce qui est modifié):

<div style="background:#324B65;width:150px;padding:1px 0 1px 0;">
    <img src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/babelfish.png" border="0">
    <div style="background:#F7F9FF;margin:0px 2px 2px 2px;padding:2px;">
        <div style="font:12px arial">Traduire en:
        </div>
        <!--<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>--image supprimée-->
        <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">
            <option value=\'\'>Choisir la langue</option>
            <option value="fr_en">english</option>
            <option value="fr_de">deutsch</option>
            <option value="fr_el">ελληνικός</option>
            <option value="fr_es">español</option>
            <option value="fr_it">italiano</option>
            <option value="fr_nl">nederlands</option>
            <option value="fr_pt">portugueses</option>
        </select>
    </div>
</div>

Note: pour que les caractères spéciaux (grec, lettres accentuées) apparaissent bien, il faut que votre fichier soit encodé en UTF-8, chose totalement impossible avec le bloc-note basique de windows. C'est (entre autres) pour ça que pour tout ce qui est développement web, il faut utiliser un bloc-note plus évolué (personnellement j'utilise Notepad++).

Une fois que vous avez fait vos modifications, vous mettez tous sur une seule ligne (important) et vous ajoutez document.write(' au début et ') à la fin, et vous enregistrez ce nouveau fichier avec une extension .js.
Voilà ce que ça donne pour moi:

document.write('<div style="background:#324B65;width:150px;padding:1px 0 1px 0;">    <img src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/babelfish.png" border="0">    <div style="background:#F7F9FF;margin:0px 2px 2px 2px;padding:2px;"><div style="font:12px arial">Traduire en:</b></div>        <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">    <option value=\'\'>Choisir la langue</option>        <option value="fr_en">anglais</option>            <option value="fr_de">allemand</option>            <option value="fr_el">grec</option>            <option value="fr_es">espagnol</option>            <option value="fr_it">italien</option>            <option value="fr_nl">néerlandais</option>            <option value="fr_pt">portugais</option>        </select>    </div></div>')

3) Héberger le nouveau fichier
Il faut maintenant héberger ce nouveau fichier sur un hébergement qui nous permette d'avoir une adresse directe. Pour les utilisateurs de Canalblog, ça marche très bien avec l'insertion de fichier (voir d'autres solutions ici).

4) Modifier le code de l'outil
Enfin, il ne reste plus qu'à mettre l'adresse de notre nouveau fichier dans le code du script de Yahoo.
Par exemple, pour moi:

<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/w_babelfish.js?from_lang=fr&amp;region=fr"></script>

Et voilà le résultat:

test Yahoo Babelfish

kyungjin — Fri, 01 Aug 2008 15:48:00 GMT

Bonjour
Ceci est un message de test.
Pour essayer la personnalisation d'image du logo Yahoo Babelfish.

test image de fond

kyungjin — Thu, 31 Jul 2008 15:25:00 GMT

dsfgkqgf
sdqfjsdjks
sdgjlsqdghlg
sdgqdgsdqg
sdgqgdsdgsdfg

test lire la suite

kyungjin — Wed, 30 Jul 2008 15:46:00 GMT

Ceci est un message d'essai.

Lightbox 2 dans Canalblog

kyungjin — Fri, 25 Jul 2008 23:25:00 GMT

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!

En plus: album photo: que les vignettes en première page

Album photo: que les vignettes en page de présentation

kyungjin — Fri, 25 Jul 2008 20:36:00 GMT

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.

Lightbox 2 en français et personnalisation

kyungjin — Wed, 23 Jul 2008 10:50:00 GMT

Note: article basé sur la version 2.04

Vous avez sans doute déjà croisé Lightbox JS dans vos balades sur le web.
Il s'agit d'une application en Javascript permettant d'agrandir une image par-dessus la page en cours, avec un effet d'animation.
Si vous ne savez pas encore ce que c'est, rien de tel qu'un petit tour sur le site officiel.

La meilleure façon de se familiariser avec cet outil est de le télécharger, de décompresser l'archive zip et d'ouvrir le fichier index.html avec votre navigateur.
Vous allez avoir cette page. Et là "argh, mon dieu, tout est en anglais!"
J'ai donc pensé à nos amis anglophobe, et fait une version en français, en ajoutant les exemples du site officiel pour les groupes d'images.
Vous pouvez la télécharger ici:
lightbox 2 en français

Dézipper l'archive et ouvrez le fichier index_fr.html avec votre navigateur, vous aurez cette page.

Les autres fichiers sont à ouvrir avec un bloc-note.
Les fichier css/lightbox.css et js/lightbox.js sont commentés afin que vous puissiez repérer quelques possibilités de personnalisation basique.
Je vais les détailler quand même un peu ici. Ceci est juste une sélection d'éléments facilement modifiables et visibles et n'a pas la prétention d'être exhaustif.

Commençons par les images de chargement, de liens suivant, précédent et fermer.
Dans ma version, par défaut vous aurez ça:
Chargement: loading.gif

Précédent: prevlabel.gif

Suivant: nextlabel.gif

Fermer: closelabel.gif

Vous pouvez vous créer vos propres images avec les mêmes noms ou pas, l'essentiel étant de bien les référencer dans le fichier lightbox.css et lightbox.js.
Vous pouvez modifier la taille des images chargement, précédent et suivant sans problème. Par contre, si vous modifier la largeur de l'image "fermer", il y aura une valeur à modifier dans le css.

Le fichier lightbox.css
justement, parlons en de ce css.
Il défini l'apparence de la lightbox.
Prenons les éléments qui vont nous intéresser dans l'ordre du fichier (en gras les valeurs à modifier si besoin).

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
ici, on va pouvoir changer la couleur des bordures de la photo.

#imageContainer{ padding: 10px; }
Ici, c'est la largeur de la bordure de la photo. Si on change cette valeur, il faudra également la changer dans le fichier lightbox.js.

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
Ici, ce sont les liens précédent et suivant qui apparaissent sur les côtés de la photo, au survol de la souris.
Il faudra vérifier que l'url de l'image est correct.
En changeant la valeur 15%, on déplace ce lien verticalement. La valeur est prise depuis le haut de l'image, donc plus le % sera élevé, plus le lien apparaîtra vers le bas.

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
Ici, il s'agit de la zone d'information sous l'image (celle qui contient la légende, le numéro de la photo et le bouton "fermer").
On pourra en changer la police (font), la couleur (background-color).

#imageData{ padding:0 10px; color: #666; }
Défini les marges intérieur du cadre d'information, et du même coup la position des textes. Ici on a 0 px en haut et en bas et 10 px à droite et à gauche.
Est définie également la couleur du texte. A noter qu'on peut mettre une couleur différente à la légende et au numéro d'image en ajoutant un attribut color à #imageData #caption (légende) ou à #imageData #numberDisplay (numéro).

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
Il faudra changer la largeur (width) si vous modifiez la largeur de l'image "fermer", les 2 doivent être égales.

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Ici on peut modifier la couleur de l'ombre. La transparence se règle dans le fichier lightbox.js.

Le fichier lightbox.js
De même prenons les éléments qui vont nous intéresser dans l'ordre du fichier (en gras les valeurs à modifier si besoin).
Vers le début du fichier:

fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif',
Ce sont les adresses des images de chargement et du bouton "fermer". Vérifiez l'exactitude de ces adresses.

overlayOpacity: 0.8,
Défini l'opacité du fond qui recouvre la page. 0 = transparent, 1 = opaque

animate: true,
Active l'animation. Je ne vous conseille pas de la désactiver, j'ai constaté des problèmes de mise en page (photo pas au bon endroit). Si vous souhaitez accélérer l'agrandissement de la photo, augmentez plutôt la valeur ci-dessous.

resizeSpeed: 7,
Contrôle la vitesse de l'animation (1= le plus lent et 10= le plus rapide)

borderSize: 10,
Si vous changez le padding dans le CSS, il faut mettre à jour cette variable pour qu'elle soit la même

labelImage: "Image", labelOf: "sur",
Dans un groupe d'image cela est utilisé pour afficher: Image # sur #.
Changer les labels pour le personnaliser ;)

Vers le milieu du fichier (ligne 231), vous trouverez ceci:
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
Cela calcule la marge en haut du cadre de la photo.
En fait, ça récupère la zone d'affichage du navigateur et la divise par le nombre en gras pour définir la marge. Donc, plus ce nombre sera grand, plus la marge sera petite. Si on mettait 2, le haut de la photo apparaîtra à la moitié de la fenêtre.

Maintenant que vous l'avez bien personnalisé, vous êtes prêts à intégrer lightbox dans Canalblog.

Nuage de tags

kyungjin — Tue, 22 Jul 2008 20:25:00 GMT

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 ajoutez
font-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>

Hébergement de fichiers sur Canalblog

kyungjin — Sat, 19 Jul 2008 21:23:00 GMT

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.

Inclure un moteur de recherche Google sans pub sur son blog

kyungjin — Mon, 30 Jun 2008 16:24:00 GMT

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.

essai curseur dans message

kyungjin — Fri, 20 Jun 2008 17:01:00 GMT

Message d'essai pour voir si on peut changer le curseur de souris sur un message
Test avec un curseur en forme de X-wing.

Agrandir les images des albums photo

kyungjin — Sat, 31 May 2008 21:34:00 GMT

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.

(*) Avec une limite quand même: Canalblog réduit toutes les images à 800px maximum pour la plus grande dimension.

Lecteur mp3 de Neolao

kyungjin — Thu, 22 May 2008 11:54:00 GMT

Mode: normal ou avancé

Ce qui suit est destiné à un public plutôt averti, c'est-à-dire ayant déjà des bases en html / css.

Neolao est un développeur qui met gentiment à disposition quelques unes de ses créations sous licence libre.
Parmi elles, on trouve un lecteur mp3 en flash extrêmement intéressant.

L'utilisation de ce lecteur implique qu'on dispose d'un hébergement pour le stocker ainsi que les fichiers de configuration et les mp3. Il est d'ailleurs important que le fichier du lecteur .swf et les fichiers de configuration soient hébergés au même endroit, sinon cela risque de ne pas fonctionner. Si vous n'avez pas d'hébergement, vous pouvez lire ceci.

Il en existe plusieurs versions, mais seules les maxi et multi continuent d'évoluer (je ne parlerais pas de la version Javascript que je n'utilise pas).
La version maxi est un lecteur pour un morceau, la version multi gère une playlist.
Le grand avantage de ce lecteur est la possibilité d'en personnaliser l'apparence de façon plus ou moins poussée, par diverses méthodes. Cela permet de l'intégrer de la meilleure façon possible au design d'un site.

Il y a plusieurs façons de le configurer:
- directement dans le code html (je ne vous le conseille pas, lourd à gérer)
- par un fichier externe au format xml
- par un fichier externe au format txt
Personnellement j'ai choisi le fichier .txt très simple d'utilisation et qui ne nécessite aucune connaissance d'un langage particulier.
Dans ce fichier on défini une foule de paramètres concernant le comportement du lecteur et l'aspect.
Je vous laisse vous référer à la documentation sur le site du lecteur, que ce soit pour le maxi ou le multi.
Vous trouverez également des information utiles sur ce site.

Je vais m'attarder sur la personnalisation de l'apparence.
On peut simplement modifier les couleurs.
On peut appliquer une image au format jpg, un skin, qui habillera le lecteur. Cette image sera utilisée en lieu et place des couleurs de fond. La taille de cette image n'étant pas variable, il ne sera pas possible de modifier la taille du lecteur sans modifier l'image.
On peut placer le lecteur sur une image de fond.

Ci-dessous, figurent 4 exemples avec le lecteur multi, illustrant 4 possibilités, avec pour chacune des liens pour voir le code html et Le fichier de configuration correspondant.

1) Le lecteur avec configuration des couleurs

Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)

2) Le lecteur avec un fichier image pour skin:

Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
L'image du skin (note: l'image doit avoir la même taille que le lecteur):

3) Le même lecteur qu'en 1), inclus dans un bloc ayant une image de fond et placé par des marges

Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)

4) Le lecteur placé dans un bloc ayant une image de fond avec transparence, avec un fichier image concordant pour skin

Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
L'image du skin:

Je sais, les images sont moches, elles ont été faites vite fait pour l'exemple ;P

Un petit exemple d'intégration sur mon blog, où j'ai juste utilisé la configuration des couleurs (exemple 1).