Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Twister City
1 mai 2008

Smileys, style et citations dans les coms de Twister City

J'ai rajouté une extension à mon blog qui permet aux lecteurs d'ajouter des smileys à ses commentaires mais aussi du formatage de texte (gras, italique etc) et également de faire des citations (et en particulier de citer des commentaires précédents) !

Je me suis inspiré des smileys courant comme :-) :( ou :-P et aussi de balises de formatage style BBcode (qu'on trouve dans les forums comme [quote])

Comment ça marche ?

Facile...


  • Dans la zone de saisie de commentaire se trouve une barre d'icônes représentant des smileys ou des boutons. Cliquer sur un smiley l'insère à l'endroit du curseur dans la zone de saisie du commentaire.
  • Si vous avez sélectionné du texte dans votre commentaire, cliquer sur un bouton de formatage l'entourera de balises (par exemple [b] et [/b] pour mettre en gras).
  • Les balises fonctionnent par couple. Et si jamais, à l'envoi, vous avez oublié d'en fermer une dans votre commentaire, un message d'erreur s'affichera en gras à côté du bouton d'envoi du commentaire ("Glapir !" quoi).

comment2

  • Il existe un bouton permettant de citer directement un commentaire précédent : Citation. Il se trouve au pied de chaque commentaire. Cliquer dessus insère une citation de ce commentaire dans le champ de saisie.
  • Ce bouton utilise donc le couple de balise [quote] [/quote] avec des options supplémentaires (optionnelles) pour la balise ouvrante. Les citations générées permettent donc d'avoir le nom de l'auteur de la citation, la date du commentaire cité, et ce enrobé d'un lien vers le commentaire idoine.
  • Le format complet de la balise ouvrante de citation est donc [quote Nom;123456;blabla]. Nom étant le nom de l'auteur de la citation, 123456 étant un identifiant unique créer par Canalblog pour identifier un commentaire et blabla pouvant être n'importe quel en-tête additif à la citation (par exemple la date et l'heure du commentaire cité).
  • Comme les paramètres présentés ci-dessus sont optionnels, il est aussi possible de citer une source externe en indiquant le nom avec [quote NomSource].

comment1



Tout ceci représente :

  • Un fichier source Javascript de 350 lignes.
  • Une 20aine de balises HTML modifiées ou insérées.
  • 4 nouveau styles CSS.
  • Une 15aine d'heures de recherchecodage et debug (merci à mon fidèle McFly qui m'a presque beaucoup aidé, héhé).
  • 4 heures pour le graphisme des smileys et les boutons (finalement ceux que j'avais dessinés à l'IRL étaient trop grands).
  • Et je ferai sans doute un manuel d'installation pour les utilisateurs de Canalblog intéressés.

Have fun !

Publicité
Commentaires
L
he tien .. et pourquoi ya des com qui sont hallucinés et d'autres glapis, et d'autres schtroumpfé ?? :shock:<br /> huhu j'adoOOOoore !!! :*<br /> Ca donne envie d'en réécrire plein pour tous les faire !! hihi ;D
L
terrible tes petits renards !! sont à croquer !!:love:<br /> je vais tester ta méthode, voir si j'ai bien tout compris, je reviendrais faire un ptit tour d'ici peu<br /> en tout cas joli travail je suis admirative ;)
A
Je suis tombée sur ton blog grâce à une recherche google sur comment proposer des smileys dans les commentaires, et:<br /> - [b]bravo c'est vraiment magnifique!!![/b]:love:c'est du grand art, un vrai travail d'expert, original et le tout super bien adapté à ton blog!<br /> - au vu des heures de boulot et de l'investissement, je ne sais pas si je parviendrai à t'imiter...:stoned:<br /> Une blogueuse aventurière mais pas trop quand même...;D
J
même en expliquant comme a des Gogols j'ai rien compris!! j'suis vraiment gogolle alors!!!:.(:bad::)
J
bon jvais pas divaguer, car pour moi, c'est pas trop top. Les smileys apparaissent pour faire un commentaire, mais lorsque le commentaire est édité, ils n'apparaissent plus. Kéj fais de mal docteur renard ?<br /> Merci du coup de patte
Publicité