Onion Head - des smileys délirant dans les commentaires et les messages Blogger
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.
- Si vous avez personnalisé les commentaires du propriétaire du blog en utilisant une autre méthode que la mienne, il se pourrait que les simley ne s’affichent pas dans vos propres commentaires (mais ils s’afficheront pour les autres). Laissez-moi un commentaire et je vous dirais ce qu’il faut faire.
- 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.
- Bien évidement pour utiliser les Smileys dans votre blog, il faut que le formulaire des commentaires soit intégré en dessous des Articles du blog.
Premier Pack : 24 Onions
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'>Entre ces deux lignes (ou après le première ou avant la deuxième), ajoutez le code suivant:
<b:include data='post' name='comment-form'/>
<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>
<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
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'>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)
<b:include data='post' name='comment-form'/>
<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>
<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:
Voilà<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/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'/>
Testez les Onions en laissant un commentaire et n’hésitez à partager cet article avec vos amis
57 Commentaires
Comme dab je suis la première ici =)) ils sont vraiment trop cool ces smilies :D merci soufien :p et à la prochaine 8-(
Marty
Merciiiii :D
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
Le code body oui je le vois mais pas le gt?
OK je viens d'y arriver lol et merci
Je ne les vois pas dans ton blog ;)
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 :))
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
Francine
:a un gueuleton :d Merci....
@SimEFP
Merci Simon =)(
@SimEFP
Tu devrais utiliser le premier ou le deuxième pack, tu ne peux pas ajouter les deux :))
Bonjour oui tout marche lol
Comment vas tu ?
Ils sont super tes smileys, surtout pour une fan de chat comme moi ! :D
Un grand merci !!
France
C'est cool trankil :d et toi ;)
Merci 8-(
@Nicole
:-L toi une fan de chat :-L
T'as vu ça http://www.leblogger.com/2009/07/chat-tchat-tchatche-chatango-blog.html
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-(
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...
Problème résolu j'ai juste recoché la case développer les widgets et sauvegardé =)) :))
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/
@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
@SimEFP
Ok c'est coool =)(
@Nicole Barrière Jahan
Merci Nicole :)
Faut que j'ajoute des style="...." au image pour casser les CSS prédéfini dans vos blog =((
Juste un petit bonjour tu vas bien ? :p
Petit coucou je viens de le faire à flo super tout marche que du bonheur de t'avoir
@flo
Oui ça roule merci et toi ça farte ;)
@France
C'est cool :D j'a pas pû répondre plutôt b-(
Rien de gravze tu sais nous sommes là et ns pouvons patienter bye
Bonjour alors ou es tu cette fois ci? Tu sais sur blogger je cherche pour avoir mes photos plus grandes bonne journée
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. ;)
@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="???"/>
http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif
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
@@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 "_backlinks-container"'>
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 :))
Ca remarche :a :a Encore 1000 merci :-P
@@SimEFP
Ok c'est cool, mais faut faire attention la prochain fois :))
C'est juste un copier-coller :)
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 ?
tu copies le code le premier code pour afficher les symboles au mauvais endroit
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
:)ù
(
Sympa çà! MErci =))
=)(
http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif
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.
ah j'ai recommencé maintenant les commentaires marchent mais toujours pas de onions !
bon maintenant j'ai les onions qui s'affichent mais ils ne prennent pas forme quand je poste
Alalala :-T
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
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
chez moi sa marche pas :(
les onions ils ne prennent pas forme quand je poste
merci pour votre effort mon mais
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 ?
Yeah merci pour le tips sa fonctionne super bien, jsute un petit truc le 2ème s'affiche pas chez moi
le smiley >>> =))
Funcionou =)) ficou muito bonito, obrigado! :))
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