Insérer une horloge Clocklink, en local, valide XHTML, sous Firefox et Internet Explorer

Depuis quelques jours, le site Clocklink ne répondait plus et Fiuuu, ayant inséré une horloge de ce type dans sa sidebarre, avec placement par CSS, se retrouvait avec un décalage désagréable de tout le contenu vers le haut.

Pourquoi ne pas alors insérer cette horloge en local ?

(Je prends en exemple l'horloge qu'avait choisi Fiuuu)

Commencez par regarder le type de votre horloge : c'est quelque chose du genre "0012-DkBlue.swf"

Allez ensuite télécharger cette animation flash sur leur site à l'adresse suivante :

http://www.clocklink.com/clocks/0012-DkBlue.swf

Uploadez cette animation chez votre hébergeur.

Ensuite, il ne vous reste plus qu'à l'insérer avec du code valide XHTML pour que l'animation fonctionne aussi bien sous Firefox, Internet Explorer qu'Opera.

Ce code va bien :


<div class="clock">
<object type="application/x-shockwave-flash" data="http://votre URL/0012-DkBlue.swf?TimeZone=CET" width="200" height="200">
<param name="play" value="true" />
<param name="movie" value="http://votre URL/0012-DkBlue.swf?TimeZone=CET" />
<param name="menu" value="false" />
<param name="width" value="200" />
<param name="height" value="200" />
<param name="quality" value="high" />
<param name="scalemode" value="noborder" />
<param name="wmode" value="transparent"/>
<p> Horloge ClockLink </p>
</object>
</div>

Il ne reste plus qu'à adapter son positionnement avec la class "clock" que vous définissez dans votre feuille de style (style.css).

Si vous ne souhaitez pas avoir votre horloge en local (pas d'hébergement par exemple / plateforme de blog), vous pouvez tout de même utilisez ce code valide XHTML en remplaçant, aux deux endroits,
http://votre URL/0012-DkBlue.swf
par
http://www.clocklink.com/clocks/0012-DkBlue.swf

Attention :

votre URL, c'est l'endroit où vous avez stocké votre animation
0012-DkBlue.swf, ce n'est qu'un exemple, il faut aussi le remplacer par l'équivalent pour l'horloge que vous avez choisie.
<p> Horloge ClockLink </p> c'est le texte que vous souhaitez qui apparaisse si vos visiteurs n'ont pas le plugin flash (à adapter si vous le souhaitez)
Sous certraines versions de Wordpress, je crois qu'il faut mettre tout le code bout à bout pour que cela fonctionne correctement (pas de passage à la ligne entre chaque <param name...)

Cela permet d'obtenir ceci :

Merci qui ?

Syndication / Autres

WebAnalytics solution by

Commentaires

1. Le mercredi 3 janvier 2007 à 14:21, par thanos aka mr brightside

help (je plaisante.. quel geek ce 1loup tout de même !!)

2. Le mercredi 3 janvier 2007 à 19:02, par fiuuu

merci iiiiiiiiiiiiii loup !! euh c'est possible d'enlever la pub clocklink ??
oui je sais j abuse de ton, savoir

3. Le mercredi 5 mars 2008 à 14:30, par Loïc

Comment inserer une orloge sur mon site ???

4. Le mercredi 5 mars 2008 à 16:51, par 1loup

>Loic: Ne connaissant pas la plateforme sur lequel tu as installé ton blog (Wifeo), il faut d'abord que je m'informe si c'est possible sur cette plateforme. Actuellement je n'ai pas trop le temps. Je verrais cela ce week-end...

5. Le dimanche 16 mars 2008 à 21:16, par Francois

"Il ne reste plus qu'à adapter son positionnement avec la class "clock" que vous définissez dans votre feuille de style (style.css)."

C'est bien loup mais qu'est-ce que j'écris dans mon style.css??
Moi et le CSS c'est deux.
Je suis sur DC 1.2.7.1

6. Le lundi 17 mars 2008 à 00:31, par 1loup

>Francois: Après avoir mis le <div class="clock"> au niveau du code, dans le style.css, il faut rajouter un :

.clock {

}

Entre les accolades, tu rajoutes les règles en fonction de ce que tu veux obtenir.
C'est plus facile de travailler avec des exemples :
- Pour ma clocklink, je n'ai rien rajouté dans le style.css, une fois dans ma sidebarre, elle est au bon endroit !
- Pour Fiuuu, je te conseille d'aller voir son blog pour comprendre, le code une fois dans la sidebarre, cela ne lui convenait pas.
J'ai donc mis un :

.clock {
text-align: center;
margin-top: -35.5em;
margin-bottom: 4em;
}

le "text-align: center;" sert à aligner horizontalement la clocklink au milieu de la sidebarre

la "margin-top: -35.5em" (marge supérieure) sert à remonter la clocklink (la faire sortir par le haut de la sidebarre, pour qu'elle vienne se caler au niveau de son bandeau, par la marge négative)

la "margin-bottom: 4em;" (marge inférieure) sert à rabaisser ce qu'il y a dessous la clocklink (le reste de la sidebarre) pour revenir au niveau "normal" de la sidebarre sinon le reste est collé et se positionne en plein sur son Menu horizontal (.../Galerie/Musique/Liens)

C'est à toi de faire des essais suivant ce que tu recherches...
Est-ce plus clair ?

7. Le lundi 17 mars 2008 à 00:54, par Francois

Tu dis n'avoir rien ajouté à ton style.css mais pourtant tu déclare ceci dans ton template.php?

<div class="clock" style="text-align:center; margin: 0 auto;">

Tu définis une class et tu dis ne pas la crée dans le fichier css???

8. Le lundi 17 mars 2008 à 01:42, par 1loup

Oui oui !
Oups, quand je t'ai répondu tout à l'heure, je n'ai pas fais gaffe mais comme ce blog propose 3 thèmes différents au choix dans la sidebare, j'ai regardé le code d'un thème où la clocklink est absente.

N'empêche que oui, je n'ai pas mis de règle dans le style.css puisque le style="text-align:center; margin: 0 auto; directement dans le template me convenais. Un puriste te dirait que ce n'est pas bien de faire cela et qu'il faudrait plutôt faire : <div class="clock"> dans le template puis mettre dans le style.css un :

.clock {
text-align: center;
margin: 0 auto;
}

mais le fait de définir une classe "clock" dans le template et de ne rien mettre dans le style.css n'est pas gênant en soi. Si elle n'existe pas dans le style.css, c'est qu'elle n'a pas de propriété particulière. Si je change d'avis et que je modifie la présentation, il me suffira de rajouter les modifications dans le style.css !

9. Le jeudi 5 février 2009 à 11:25, par clock4blog

Il existe aussi Clock4blog,
Qui a le mérite d'être plus simple à installer.
Concu par un francais qui plus est !
En même temps, c'est mon site, donc je ne suis pas très objectif

10. Le jeudi 5 février 2009 à 18:51, par 1loup

>Clock4blog: Pas du tout ! Ton code <embed> est invalide XHTML, tu ne respectes pas les normes du W3C et c'est donc bien plus compliqué encore à transformer pour un non initié. De plus, je ne vois rien pour tenir compte du fuseau horaire ! Exemple : j'ai un lecteur Québécois. Quand il vient me lire, j'aimerais qu'il voit l'heure d'ici, en France (parce que l'heure chez lui, il l'a sur son PC hein...). Si tu veux devenir meilleur, il y a encore du travail

Les commentaires de ce billet peuvent être suivis sur ce fil RSS

Ajouter un commentaire

Nom / Pseudonyme :

Email (Non publié) :

Site Web / Blog (Publié) :

Calculette Captcha anti-spam : dans le nombre "391428", quel chiffre vient après trois ?

Commentaire :

Le code HTML dans le commentaire sera affiché comme du texte, les adresses internet seront converties automatiquement.

Informations supplémentaires :

Ici, c'est chez moi, compris ?
Je ne fais pas de prémodération, le captcha devrait éliminer les spammeurs.
Mais je dis non au langage SMS.
Essayez d'être compréhensible. Je préfère des fautes de frappes, de grammaires, d'orthographes à "KiC Kifè KK".
Pour le reste, ensuite, je fais ce que je veux avec VOS commentaires. Je peux très bien les modifier (je mettrais "Edit") ou les censurer si je l'estime nécessaire.

(Adresse IP enregistrée même derrière un proxy !)

Se souvenir de mes informations