Onion Head - des smileys délirant dans les commentaires et les messages Blogger


Après un long travail, je vous présente aujourd’hui un tutoriel complet pour utiliser les Onion Heads dans votre blog.
Commençant avec quelques explications sur ces Onions:
  • Les images sont transparentes, au format PNG et de taille 30x30 px (assez petites pour ne pas déformer votre texte et assez grande pour être clairement visibles).
  • Les images sont hébergées dans mon espace perso avec une bande passante illimitée et le script est hébergé dans "Google Code", donc fiabilité et performances assurées.
  • J’ai bien galérer redimensionner les images et certains smileys sont un peu flou. Je vais essayer d’améliorer la qualité des images et la mise à jour se fera automatiquement, sans intervention de votre part.
  • J’ai gardé la plupart des codes des Smileys Yahoo et j’ai essayé d’être les plus cohérant possible dans l’attribution des codes aux Onion Heads.
  • Pour rappel, Onion Head est une série d'images (avatar, smiley, mangas, etc) créée par Onion Club et s'inspirant de la culture et de l'humour Japonnais.
    Premier Pack : 24 Onions
    Onion Head
    Ce pack est celui que vous voyez en bas de cette page. Pour l’installer dans votre blog c’est très facile, il suffit de faire deux copier-coller.
    Le premier va servir à indiquer le code de chaque smiley juste en dessus du formulaire des commentaires. Le deuxième est le fichier JavaScript qui va dire au navigateur de remplacer chaque code par l’image correspondante.

    Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant:
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    Entre ces deux lignes (ou après le première ou avant la deuxième), ajoutez le code suivant:
    <div style='background:#F8F8FF; border:2px solid #EDEDED; display:block; padding: 1px 1px 1px 1px; margin: 1px 3px 1px 3px;text-align: center; color:#ccc;'><b><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger1.gif' width='30'/> :)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger2.gif' width='30'/> =))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger3.gif' width='30'/> :-T<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger4.gif' width='30'/> =((<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger5.gif' width='30'/> :-L<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger6.gif' width='30'/> b-(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger7.gif' width='30'/> :)(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger8.gif' width='30'/> ;))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger9.gif' width='30'/> :(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger10.gif' width='30'/> :x<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger11.gif' width='30'/> :z<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger12.gif' width='30'/> ;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger13.gif' width='30'/> :D<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger14.gif' width='30'/> :a<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger15.gif' width='30'/> :((<a href='http://wwww.leblogger.com' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif' width='30'/> x(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger17.gif' width='30'/> ;;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger18.gif' width='30'/> =)(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger19.gif' width='30'/> :p<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger20.gif' width='30'/> :))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger21.gif' width='30'/> :-o<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger22.gif' width='30'/> :-*<a href='http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger23.gif' width='30'/> 8-)<a href='http://www.leblogger.com/2009/06/smiley-emoticone-commentaire-blogger.html' style='display:none;'>Smiley</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger24.gif' width='30'/> 8-(</b></div>
    Maintenant recherchez le code </body&gt (c'est l'avant dernier mot de votre code HTML) et juste avant, ajoutez le code suivant :
    <script src='http://leblogger.googlecode.com/files/LeBloggerOnions30.js' type='text/javascript'/><noscript><a href="http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html">Onion</a><a href="http://www.leblogger.com">blogspot</a></noscript>
    Deuxième Pack : 11 Onion + les autres smileys Yahoo

    11 des meilleurs Onion Heads que j’ai ajouté au pack Yahoo Smiley, c'est-à-dire que j’ai remplacé 11 des 23 Yahoo smileys.

    Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant:
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    Entre ces deux lignes (ou après le première ou avant la deuxième), ajoutez le code suivant: (Ce code affichera les 11 Onion Heads en dessus du formulaire des commentaires)
    <div style='background:#F8F8FF; border:2px solid #EDEDED; display:block; padding: 1px 1px 1px 1px; margin: 1px 3px 1px 3px;text-align: center; color:#ccc;'><b><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!haha!.gif' width='30'/> :))<a href='http://www.leblogger.com' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!hho!.gif' width='30'/> ;))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!hi!.gif' width='30'/> ;;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/@@.gif' width='30'/> :D<a href='http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!kwa!.gif' width='30'/> ;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!lov!.gif' width='30'/> :p<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!nnn!.gif' width='30'/> :((<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!noo!.gif' width='30'/> :)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!plz!.gif' width='30'/> :(<a href='http://www.leblogger.com/2009/06/smiley-emoticone-commentaire-blogger.html' style='display:none;'>Smiley</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!ouk!.gif' width='30'/> =((<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/OnionSmiley30/!hey!.gif' width='30'/> =))</b></div>
    Maintenant recherchez le code </body&gt (c'est l'avant dernier mot de votre code HTML) et juste avant, ajoutez le code suivant :
     <script src='http://leblogger.googlecode.com/files/LeBloggerOnionSmiley1.js' type='text/javascript'/><noscript><a href="http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html">Onion</a><a href="http://www.leblogger.com">smiley</a></noscript>
    Comment afficher les Onion Heads à l’intérieur de vos articles
    Le moyen le plus simple pour afficher des smileys dans vos messages est d'ajouter une image (non cliquable). Par exemple, pour avoir ce smiley: j'ai simplement ajouté ce code :
    <img src="http://lewordpress.com/Blogger/Image/Onion30/LeBlogger3.gif" />
    Donc pour ajouter un smiley dans votre message, il suffit de copier/coller son code:
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger1.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger2.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger3.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger4.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger5.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger6.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger7.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger8.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger9.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger10.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger11.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger12.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger13.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger14.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger15.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger17.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger18.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger19.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger20.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger21.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger22.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger23.gif' width='30'/>
    <img border='0' alt="" height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger24.gif' width='30'/>
    Voilà  Testez les Onions en laissant un commentaire et n’hésitez à partager cet article avec vos amis
    65 Commentaires
    1. Comme dab je suis la première ici =)) ils sont vraiment trop cool ces smilies :D merci soufien :p et à la prochaine 8-(

      RépondreSupprimer
    2. Salut bien merci je vais donc essayer et on verra car je me demande si je vais y arriver avec ces codes. Je pense que tu vas bien ici il pleut merci

      RépondreSupprimer
    3. Le code body oui je le vois mais pas le gt?

      RépondreSupprimer
    4. Bonsoir Soufiane,
      L'affichage des Smileys dans les messages est un plus bien "rigolo"
      Je ne vous remercie plus pour tout votre travail : si vous deviez passer en Alsace, prévenez-moi et je vous ferai un bon gueuleton****** en famille .....ou un resto sympa :))

      RépondreSupprimer
    5. Ca marche aussi de mon coté un grand merci :P, jvais faire tourné ca du coté de la blogosphère poker dans mon prochain billet :D :D :D

      RépondreSupprimer
    6. @SimEFP
      Tu devrais utiliser le premier ou le deuxième pack, tu ne peux pas ajouter les deux :))

      RépondreSupprimer
    7. Bonjour oui tout marche lol
      Comment vas tu ?

      RépondreSupprimer
    8. Ils sont super tes smileys, surtout pour une fan de chat comme moi ! :D
      Un grand merci !!

      RépondreSupprimer
    9. France
      C'est cool trankil :d et toi ;)
      Merci 8-(

      RépondreSupprimer
    10. Je vais voir ! :)
      En attendant, je t'ai fait un clin d'oeil sur mon blog :
      http://dessinchat.blogspot.com/2009/11/des-boucles-doreilles-encore-toutes-en.html
      8-(

      RépondreSupprimer
    11. Arf je sais pas ce qui c'est passé x( mon blog est en un seul blog, au lieu d'avoir des preview et un read more pour lire le billet. J'ai du faire une fausse manip... Et bon je ne comprend pas grand chose au code :z. Si tu peux me donner un ptit coup de main...

      RépondreSupprimer
    12. Problème résolu j'ai juste recoché la case développer les widgets et sauvegardé =)) :))

      RépondreSupprimer
    13. Salut soufaine, comment ca va?
      J'ai quitté Blogger pour Wordpress, Blogger ne m'offrait pas assé de possibilités, je voulais un forum, et un référencement claire net et précis, puis l'interactivité a plus poussé aussi.

      Tu peux allé faire un tour voir l'évolution ;) http://www.only-iphone.fr/

      RépondreSupprimer
    14. @Laurent
      Oui oui je sais pour WP ton blogger fait une redirection JS. Pourquoi tu ne fait pas une redirection permanente ;) Tu es chez quel hébergeur, moi c'est 1and1 :D

      RépondreSupprimer
    15. @Nicole Barrière Jahan
      Merci Nicole :)

      Faut que j'ajoute des style="...." au image pour casser les CSS prédéfini dans vos blog =((

      RépondreSupprimer
    16. Juste un petit bonjour tu vas bien ? :p

      RépondreSupprimer
    17. Petit coucou je viens de le faire à flo super tout marche que du bonheur de t'avoir

      RépondreSupprimer
    18. @flo
      Oui ça roule merci et toi ça farte ;)

      RépondreSupprimer
    19. @France
      C'est cool :D j'a pas pû répondre plutôt b-(

      RépondreSupprimer
    20. Rien de gravze tu sais nous sommes là et ns pouvons patienter bye

      RépondreSupprimer
    21. Bonjour alors ou es tu cette fois ci? Tu sais sur blogger je cherche pour avoir mes photos plus grandes bonne journée

      RépondreSupprimer
    22. Hello Soufiane,

      Comment faire une redirection permanente ?

      Je suis allé chez Oxito, selon les avis c'est pas génial comme hébergeur mais j'ai trouvé leur tarifs pas cher et javais besoin d'un hebergeur basé en suisse pour faire un paiement par CCP. ;)

      RépondreSupprimer
    23. @France
      Oups me voilààààà
      Qaund tu ajoutes une image il faut aller dans modifier le code HTML Tu recherche le code de l'image qui se termine par ..../s320/....jpg"/>
      tu le remplaces par ..../s1600/....jpg" width="???" height="???"/>

      RépondreSupprimer
    24. http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif

      RépondreSupprimer
    25. Si quelqu'un si connait en html et javascript je veux bien un coup de main, j'ai du péter un bout de code html pour l'option commentaires en ajoutant les ptits oignons http://www.theblogpoker.com (sous blogger). Merci d'avance pour votre aide :( contact : simefp@gmailpointcom

      RépondreSupprimer
    26. @@SimEFP
      Je t'avais dit que tu as ajouté les codes en double =(( mais là tu as supprimer beaucoup de choses =(( ce qui fait que les commentaires ne s'affichent pas :(

      Si tu as des sauvegarde de ton blog c'est le moment de t'en servir, sinon essai ça :
      Dans ton code HTML recherche:
      <div id='backlinks-container'>
      <div expr:id='data:widget.instanceId &quot;_backlinks-container&quot;'>

      Et juste Avant ajoute ce code :
      <b:if cond='data:post.embedCommentForm'>
      <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='comment-form'/>
      <b:else/>
      <data:post.noNewCommentsText/>
      </b:if>
      <b:else/>
      <b:if cond='data:post.allowComments'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
      </b:if>
      </b:if>

      </p>
      </b:if>


      Dit moi ce que ça donne :))

      RépondreSupprimer
    27. Ca remarche :a :a Encore 1000 merci :-P

      RépondreSupprimer
    28. @@SimEFP
      Ok c'est cool, mais faut faire attention la prochain fois :))
      C'est juste un copier-coller :)

      RépondreSupprimer
    29. Re Bonsoir Soufiane, alors j'ai tester aussi cette astuces pour les smiley oignons.
      et j'ai toujours le même problèmes (que pour les smiley normal), les commentaire ne s'affichent pas ^^ :p

      Aurait tu une solution ? ou c'est impossible a cause de la template que j'utilise ?

      RépondreSupprimer
    30. tu copies le code le premier code pour afficher les symboles au mauvais endroit

      RépondreSupprimer
    31. Bonsoir Soufiane,
      Je t'envoie le code HTLM de mon blog si tu peux essayez de m'aider a integres les smileys et le nuage de mos clées

      http://www.uploadeur.com/download.php?file=938HTLM_Templates_de_TousIllicite.txt

      RépondreSupprimer
    32. Ce commentaire a été supprimé par un administrateur du blog.

      RépondreSupprimer
    33. Ce commentaire a été supprimé par un administrateur du blog.

      RépondreSupprimer
    34. Ce commentaire a été supprimé par un administrateur du blog.

      RépondreSupprimer
    35. http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif

      RépondreSupprimer
    36. oooh quelle idée géniale ! j'ai bien suivis la procédure et malheureusement j'ai le même problème que Tousillicite, les petits onions ne sont pas là et les commentaires ne s'affichent pas.

      RépondreSupprimer
    37. ah j'ai recommencé maintenant les commentaires marchent mais toujours pas de onions !

      RépondreSupprimer
    38. bon maintenant j'ai les onions qui s'affichent mais ils ne prennent pas forme quand je poste
      Alalala :-T

      RépondreSupprimer
    39. Si tu as personnalisé les commentaire de l'auteur du blog il se pourrait que les smiley ne s'affichent pas dans tes commentaires, utilises mon code pour personnaliser les commentaires de l'auteur

      RépondreSupprimer
    40. salut soufiane merci pour le poste je les installer ca marche nikel mais en faite quand c sur un poste qui a bcp de coms ca s'affiche tout en haut sur le coter donc pas a leur place si ta une soluce merci

      RépondreSupprimer
    41. les onions ils ne prennent pas forme quand je poste

      merci pour votre effort mon mais

      RépondreSupprimer
    42. Super ! merci !

      Je suppose que si je veux en supprimer certains, il suffit d'effacer les lignes correspondantes ou il y a une manip' supplémentaire ?

      RépondreSupprimer
    43. Yeah merci pour le tips sa fonctionne super bien, jsute un petit truc le 2ème s'affiche pas chez moi

      le smiley >>> =))

      RépondreSupprimer
    44. Funcionou =)) ficou muito bonito, obrigado! :))

      RépondreSupprimer
    45. slaut soufiane , pourkoi les onion smileys ca marcha pas pour un blog arabe est ce que le sens d'écruture est la cause , les smileys s'affiche en haut du rectangle de commentaire mais quand je met un symbole ne fonctionne pas , seulemnt le symbol qui s'affiche , meme si j'ai inversé le sens de symbole pas de resultat , peu tu m'aider a trouver un solution et merci

      RépondreSupprimer
    46. Salut une question : j'ai bien installé comme tu l'a dit, il s'affiche bien dans le formulaire de commentaire ùais quand on écrit le signe correspond au smiley il ne s'affiche pas sur le commentaire, tiens voici mon blog pour l'exemple : http://www.play-and-fun.fr/

      RépondreSupprimer
    47. Zut alors, cette fois ça ne marche pas :(
      Je voulais installer le pack 2 et pas moyen de trouver le code , ni celui ci </body&gt...
      étrange...

      RépondreSupprimer
    48. enfin j'ai reussi a adapter les emoticons avec mon blog ,merci bc soufian

      RépondreSupprimer
    49. Bonjour ^^

      Bon j'ai une bonne nouvelle ça a marché du premier coup ^^
      Mais j'aimerais qu'il deviennent cliquable...
      Y a t'il une solution???

      Et si je veux modifier les smiley et mettre les miens à la place???
      Comment je dois faire.
      Parce que c'est le deuxième code qui pose problème.

      Merci d'avance.

      RépondreSupprimer
    50. Bonjour je viens déjà te dire bonjour et j'ai aussi une petit question
      je ne vois pas ce code </body&gt donc impossible de modifier le code
      Mais je vais encore chercher bonne journée

      RépondreSupprimer
    51. à la place de </body.
      sois dite en passant je l'ai essayé mais il marche pas, dommage :/ ca aurait été cool d'avoir ces smiley.

      http://www.op-stream.com

      RépondreSupprimer
    52. bonjour je ne trouve pas le code body

      RépondreSupprimer

    Copyright 2015 Soufiane.fr