21 mars 2007 - Smileys
Comment faire
a toute première chose: être en "mode avancé"
La deuxième: éditer la "page d'un message"
Les étapes:
Prémière étape: le code situé en entête,
deuxième étape: Repérer l'Id et la Class
Troisième étape:Insérer le code pour afficher les smileys
Quatrième étape: Insérer le code pour pouvoir choisir dans le commentaire un smiley
Notas: diverses utilisations
Première étape:
Dans l'entête juste avant la balise </head> insérer ce code:
<script src="http://contesdeweb.free.fr/emoticon.js" type="text/javascript"></script>;
cette ligne est le coeur du système c'est ce qui permet de gérer les fonctions d'affichage.
-Bon moi j'ai créé un petit tableau de gif, mais rien ne vous empêche de le modifier pour y ajouter vos propre gif,
il suffit de modifier ou ajouter cette ligne:
list[list.length] = new Array("Nom du gif","adresse url du gif");
La liste des "gifs" ci dessous:
<script type="text/javascript">
<!--
function TableauGif() {
var list = new Array();
list[list.length] = new Array("Ange","http://storage.canalblog.com/79/23/108589/9712481.gif");
list[list.length] = new Array("Attend","http://storage.canalblog.com/56/43/108589/9712485.gif");
list[list.length] = new Array("Baver","http://storage.canalblog.com/08/79/108589/9712498.gif");
list[list.length] = new Array("bon ok","http://storage.canalblog.com/96/12/108589/9712508.gif");
list[list.length] = new Array("Bouquet","http://storage.canalblog.com/30/38/108589/9712519.gif");
list[list.length] = new Array("Bravo","http://storage.canalblog.com/57/80/108589/9712543.gif");
list[list.length] = new Array("c est bon","http://storage.canalblog.com/59/33/108589/9712550.gif");
list[list.length] = new Array("Clin d oeil","http://storage.canalblog.com/12/61/108589/9712564.gif");
list[list.length] = new Array("Coder","http://storage.canalblog.com/19/43/108589/9712576.gif");
list[list.length] = new Array("copain","http://storage.canalblog.com/38/90/108589/9712590.gif");
list[list.length] = new Array("Danser","http://storage.canalblog.com/49/90/108589/9712611.gif");
list[list.length] = new Array("Héééhooo","http://storage.canalblog.com/24/24/108589/9712617.gif");
list[list.length] = new Array("Help","http://storage.canalblog.com/65/15/108589/9712634.gif");
list[list.length] = new Array("holalala","http://storage.canalblog.com/67/17/108589/9712646.gif");
list[list.length] = new Array("olléééé","http://storage.canalblog.com/44/76/108589/9712653.gif");
list[list.length] = new Array("houuuuu","http://storage.canalblog.com/13/19/108589/9712683.gif");
list[list.length] = new Array("mdr","http://storage.canalblog.com/93/74/108589/9712693.gif");
list[list.length] = new Array("mmm","http://storage.canalblog.com/39/82/108589/9712699.gif");
list[list.length] = new Array("Bouée","http://storage.canalblog.com/82/42/108589/9712711.gif");
list[list.length] = new Array("Non","http://storage.canalblog.com/22/36/108589/9712726.gif");
list[list.length] = new Array("Oui","http://storage.canalblog.com/84/63/108589/9712745.gif");
list[list.length] = new Array("Youpiii","http://storage.canalblog.com/01/34/108589/9712735.gif");
list[list.length] = new Array("Sais pas","http://storage.canalblog.com/69/64/108589/9712761.gif");
list[list.length] = new Array("Salut","http://storage.canalblog.com/05/96/108589/9712768.gif");
list[list.length] = new Array("Trinquer","http://storage.canalblog.com/37/37/108589/9712786.gif");
list[list.length] = new Array("Victoire","http://storage.canalblog.com/93/09/108589/9712796.gif");
list[list.length] = new Array("YoupYoup","http://storage.canalblog.com/51/36/108589/9712807.gif");
list[list.length] = new Array("dingding","http://storage.canalblog.com/51/24/108589/9712815.gif");
list[list.length] = new Array("Chaud","http://storage.canalblog.com/37/64/198257/9669546.gif");
return list;
}
// -->
</script>
Deuxième étape
Ensuite, et là ça devient plus délicat, il faut bien repérer le <div id="..."> qui permet l'affichage des commentaires,
par défaut pour canalblog c'est "content" mais des plaisantins (comme moi) changent ce genre de truc.
Repérer également la class <Div class="..."> dans lesquels sont affichés les commentaires,
par défaut pour canalblog c'est "blogbody" mais des .../... trucs. :)
pour ceux et celles qui n'ont rien modifié ça se trouve dans ces lignes
</head>
<body><div id="container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div><div id="topbar"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1><h2><$BlogDescription$></h2></div><div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
et plus particulièrement juste avant <Blogger> <BlogDateHeader> .
pour ceux qui ont changé, bon et bien ils savent où trouver donc. :)
Troisième étape:
Il faut maintenant repérer:
</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
<h2>Poster un commentaire</h2>
et insérer un code java juste après </CBControlForm>, comme ça:
</CBControlForm> (<===ça c'est l'existant, on y touche pas hein!!! On rajoute ce qu'il y a en dessous)
<script type="text/javascript">
<!--
SwapCodeEmoticon("content","blogbody");
// -->
</script>
<h2>Poster un commentaire</h2> (<===ça c'est l'existant on y touche pas non plus, oki?)
cette partie remplace tous les codes utilisés par les smileys dans la class déclarée de id déclaré aussi
donc si <div id=...> est différent de "content" ainsi que class de "blogbody" il faut mettre votre définition, sinon ça ne marchera pas
Quatrième étape:
Juste avant le formulaire pour entrer les commentaires nous allons mettre en place "la fenêtre de vision":
Repérer :
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
et juste avant y insérer:
<hr> <div id="visu"></div> <hr>
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">(<===ça c'est l'existant à ne pas modifier)
Dans la partie de renseignement du titre, on va insérer la barre d'outils:
<input id="commentTitle" name="commentTitle" value="" maxlength="128" />(<===ça c'est l'existant à ne pas modifier)
insérer:
<script type="text/javascript">
<!--
AffBOutils();
// -->
</script>
<br />
dans la partie de saisie de commentaire juste en dessous du texte area à repérer:
<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea>
</p>
il faut y insérer :
<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea> (<===ça c'est l'existant à ne pas modifier)
</p><p>
<script type="text/javascript">
<!--
ListeEmoticon();
// -->
</script>
</p> (<=== ça aussi c'est l'existant à ne pas modifier)
ce texte permet d'insérer les émoticons en bas de la zone de saisie (et le cas échéant de mettre le code dans notre texte lorsqu'on clique dessus)
Notas:
pour afficher également les gif dans la liste des 10 derniers commentaires, il faut modifier "content" par "rigthbar"
(ou "leftbar" selon où se trouvent la liste des 10derniers commentaires) et "blogbody" par "navlinks"
exemple cette ligne
SwapCodeEmoticon("content","blogbody");
sera remplacée par
SwapCodeEmoticon("rightbar","navlinks");
et le code complet
<script type="text/javascript">
<!--
SwapCodeEmoticon("rightbar","navlinks");
// -->
</script>
à placé dans la rightbar après la balise </ul> qui permet d'afficher les commentaires ;)
(et dans les pages de texte, il est parfaitement faisable, en utilisant les code [le gif], de faire afficher les bons gif :))))
toujours grâce à : SwapCodeEmoticon("content","blogbody");
Voilà ça marche bien normalement.
en rapport (lointain, j'en conviens),allez voir Comment se passer d'une adresse mail dans les commentaires
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=272783&pid=4378659
Liens vers des weblogs qui référencent ce message :
Commentaires
Salut Alérion...
Effectivement je viens de m'apercevoir, que mes commentaires sont coupés par la colonne de droite...
Sais tu quelles Valeurs je dois changer ?
merci de ton aide...
demolite.
Oup's
Salut Alérion...
C'est bon j'ai réparé...c'est saoulant toutes ces différences d'une navigateur à l'autre ;-(
encore merci.
Presque réussi ...
Salut Alérion,
Bon, j'ai presque réussi. Quel travail! [Chaud] Bon, la barre est affichée à côté du titre plutôt qu'à côté de commentaire, mais ça fonctionne tout de même.
Je me suis permis de garder tes liens, i.e. que je vais chercher ta barre et tes smileys. Pour le moment seulement j'espère. Pas trop grave, j'espère.
Ce qu'il me plairait, c'est de pouvoir avoir la fonction hyperlien vers un site par exemple.
Ouais, y a des gens comme ça qui en ont jamais assez. Arrrg.
Merci beaucoup pour tout ce travail techique. [Danser]
salut je voudrais savoir comment on fait pour trouver son propre http://storage.canalblog.com/num/num/num/num.js
Merci
tu le sauvegardes dans tes documents,
pour cela tu le mets en document téléchargé dans un nouveau message que tu sauvegarde en tant que brouillon[Clin d oeil]
Salut Alérion
[Salut] J'ai eu ton message sur mon blog [mmm] je veux bien rajouter "la petite barre" aux commentaires pour les "gras" etc...mais je vais avoir besoin de toi pour faire le post, car j'ai aucune idée des codes qu'il faut ajouter...[Attend]
bye
Demolite.
Merci Alérion!!!! j'ai maintenant un super espace commentaires grâce à toi!!!! [Bouquet] bravo et merci pour ce tuto!!!
au secours
aprés avoir placer ce que j'ai compris de vos indications, j'essaye et quand
je veux mettre un commentaire , sur cette page, toute la partie droite se
retrouve en dessous des commentaire....( calendrier, liste des catégories) alors
à l'aide
merco
nel
supprimé
j'ai supprimé toutes les indications ci dessus, et cela à remis mon blog d'aplomb....
je reéssayerai une autre fois
nel
Salut Alérion [Salut]
Je me permets de te relancer...je t'avais demandé dernièrement si tu pouvais me donner la partie de "codes" qu'il me manque pour ajouter aux commentaires "la barre avec la police en gras, souligné, italique etc..."
On vient encore de me le demander sur mon blog, et je n'en sais rien [mmm]
ça pourrait m'éviter des heures de recherches sur le net...
Je compte sur toi [Clin d oeil]
je n'oublierais pas de te remercier sur le post bien sur
A+
Demolite.
oup's pardon, je suis complètement miro !
je n'avais pas vu que c'était noté plus haut !
toute mes confuses...[mdr]
merci
je me suis aussi faite aider par demolite, et voilà ça marche maintenant j'attends les messages.... 5000visites et peu de commentaires ....
nel
bon j'essaierais de t'en mettre [Bouquet]
merci
un post sur mon blog pour te remercier ainsi que Demolite..il paraitra demain aprés 8 h
[olléééé][Salut]
nel
merci ce tuto m'a bien servi
Merci, Nel :)
heurreux que ça serve Aérobulle :)
A l'aiiiiiiiiiiiiiiiiiiiiide !!!
Bonjour,
voilà je viens d'essayer la méthode, mais ça ne fonctionne pas !
Je pense que c'est à cause du fameux lien avec les numéros !
Comment le sauvegarder ? je ne vois pas comment le mettre en document télécharger.
Comment trouver son propre lien ?
Merci beaucoup en tout cas !
ouf
Enfait c'est bon, je viens de trouver la solution.
J'ai trouver le lien a télécharger qui marche ! [Youpiii]
Merci pour tes infos en tout cas c'est bien utile
coucou
je viens de le faire et j'ai un petit souci...... j'ai bien la barre italique, gras etc qui s'affiche avec tes codes mais pas de smileys....... comment çà ce fait? Qu'est ce que j'ai merdé!!!
J'ai pris ton fichier de smileys, je l'ai pas modifié....
Merci pour tout
Céline
gagné
comme quoi quand on cogite un peu on y arrive!!! j'ai réussi merci pour ce tuto!!! [Bouquet]
Grrrrrrr
Salut Alérion [Héééhooo]
Je dois être vraiment nul, je n'y arrive pas, j'ai essayé une nouvelle fois avec ton tutau ici, j'ai bien uploader le .js sur mon blog et modifier l'adresse. le resultat, aucun de smiley dans les commentaire et en dessous encore mieux, toute l'architecte de mon blog !!!!!! [mmm]
Je vais réessayer encore une fois [Ange]
Reussi !!!!
Ca y'est, j'ai reussi !!!!!!! [Bravo]
Après 15000 essais il était temps ! Merci Alérion [Ange]
Bon, j'ai pas la barre que tu as à droite de "Commentaire" mais c'est pas grave !
J'ai retiré pas mal de smiley car après c'est un peux trop le binz !
Bon, j'ai plus qu'a trouver des smileys...
Merci tout plein pour ton tuto [olléééé]
Z
Ca y est presque !
Salut Alérion !
Désolé de te déranger, j'ai un petit souci avec ton code : quand je demande la prévisualisation, c'est nickel, mais lors du post en lui même, ça ne fonctionne pas ! Pour le moment, à par en changeant carrément le code dans le [textarea] du commentaire, je ne vois pas de méthode. Pourtant, tu ne le fais pas, toi ! Un petit indice ? [Ange]
Merci beaucoup de ton aide pour m'aider à corriger les commentaires postés dans mon blog. Malheureusement, j'aurais encore besoin de ton aide un instant pour m'aider à cibler le SwapCodeStyle qui permettra d'appliquer les effets des balises aux messages postés.
Pour faire court, j'ai rajouté un [div id="idDeCommentaire"] pour encadrer le contenu de [CBComments] mais quand je fais SwapCodeStyle("idDeCommentaire","unCommentaire"), la fonction ne semble pas s'appliquer. Pourtant, idDeCommentaire est bien une ID et unCommentaire une classe !
[mmm]Qu'est-ce que je sera quand je voudrais appliquer aussi le style aux messages du blog en eux-même... Sans "blogbody" ni "content", on sent tout de suite la difficulté débarquer...
[Help]
[Bravo] mais ça focntionne bien tontruc :)
t'en fais pas, si tu veux vraiment une réorganisation (en fonction du temps- [I]non pas celui qui fait dehors[/I]) je pourrais te faire un JavaScript spé pour ton site :)tu me maileras à ce moment là[Coder]
Merci beaucoup !
Oui, j'ai effectivement fini par trouver une astuce : rajouter 2 faux [div], un pour l'id et l'autre pour la classe. Maintenant le blog a triplé le nombre de visiteurs par jour. Merci beaucoup [Bouquet] Alérion.
Logiciel gratuit
je chercher un logiciel pour faire des cadres à mes images, mais que des cadres..... j'en avais un que tu, ou quelqu'un du net m'avait signalé , il à disparu[Chaud] avec le coup de surtension mon ordi à pris ... bien sur pas de sauvegarde [Baver]!!!! si tu sais ..... ou si vous savez ....merci[Bouquet]
nel
Photofiltre Nel :), c'est gratuit et tu peux effectuer plein de "trucs" sur les photos:)
merci
[Salut]je l'utilise aussi, mais le logiciel de cadre me plaisait bien[dingding]
[Bouquet][Bouquet]nel
L'insertion de smiley
Bonjour Alérion,
je viens de créer mon blog, et je voulais insérer les smiley, comme tu l'as si bien expliqué, mais je tombe sur un os dès le début...
ça fais des heures que je lis et relis, et rerelis tes explications afin de savoir comment sauvegarder ça sur canalblog: http://storage.canalblog.com/77/88/198257/13901288.js Je suis sûre que cela doit être d'une simplicité même, mais bon ...[Help]please.
Merci d'avance pour l'aide que tu pourras m'apporter.
A bientôt.
pourquoi?
tu as besoin de le modifier?[Clin d oeil] sinon tu le laisse là où il est autrement tu le sauvegardes dans tes documents,
pour cela tu le mets en document téléchargé dans un nouveau message que tu sauvegarde en tant que brouillon[olléééé]
Ah ok. J'étais a côté de la plaque.
Je viens de réessayer , et devinne : ça marche !!!!! [Youpiii]
Merci beaucoup pour ton aide, et surtout ton tuto.
A bientôt...
Hello Alérion
Je viens d'installer les smileys sur mon blog. Mais il y a un truc que je ne comprends toujours pas c'est la même chose que la dame du dessus. Ce bout de script j'ai toujours pas compris où il faut le charger, je l'ai rentré tel quel dans ma page et ça marche. Il faut le charger en tant que doc sur notre blog? Mais il corresponds à quoi? Je comprends pas ce point précis et ça m'agace un peu de ne pas comprendre.
Sinon tout grand merci [Bouquet]
Ce script est le moteur, pas besoin de le modifier, sauf si tu t'y connais et veux ajouter ou retirer des choses...
bon, je supprimerai la phrase qui autorise sa modif :)
merci bcp
j'avais pris les explications sur le blog de demolite, mais il me manquait un détail. grâce à toi, tout fonctionne!!!
maintenant je m'en vais télécharger de jolis smileys!!
[Bouquet]merci!
Bonsoir,
J'ai essayé ce tuto, mais les smileys ne s'affichent pas dans les commentaires (pourtant, dans mes articles ça fonctionne bel et bien). Je ne comprends pas pourquoi parce que cela fait plusieurs fois que je relis et compare les codes et tout me semble bon. [Triste ouin]
Comment faire ? :'(
La quatrième étape est-elle obligatoire ? (pas compris ce que ça changeait véritablement).
Merci
@ l'aide
Coucou
j'ai suivi tes explications les smileys sont inseres [Bravo]mais ils n'apparaissent pas dans derniers messages en page d'accueil par contre ils y sont sur page messages !!!,et le pire c'est que ma colonne de droite se retrouve tout en bas [Triste ouin][Triste ouin]
peux tu m'aider STP [Bisou][Bouquet]
[Img]http://storage.canalblog.com/70/92/125452/26371046.gif[/Img]
[G]Super[/G] tes modifs dans les commentaires [Bravo]
C'est du [S]travail de pro[/S] [Chaud]
Patrick
[Img]http://storage.canalblog.com/70/92/125452/26371046.gif[/Img]
[G]Super[/G] tes modifs dans les commentaires [Bravo]
C'est du [S]travail de pro[/S] [Chaud]
[G]Patrick[/G]
test image ?
[Img]http://storage.canalblog.com/12/03/125452/26371516_p.jpg[/Img]
test image ?
[Img]http://storage.canalblog.com/51/72/125452/26371456.jpg[/Img]
test image ?
[Img]http://storage.canalblog.com/51/72/125452/26371456.jpg[/Img]
ça n'a pas fonctionné - l'image n'apparait pas !
J'ai pourtant extrait l'URL (de la formule suivante:
Y'a un truc ?
tiens...
effectivement [mmm] faut que je vois ça de [G]plus près [/G][Coder]
bon, v'la aut'choz
si je parle d'un lien? http://index.html ou d'une image? sur un nofollow? [Img]http://storage.canalblog.com/12/03/125452/26371516_p.jpg[/Img]
bon, je pige plus
il y a un bug sur les images[Non][Triste ouin]
[img]:url:storage.canalblog.com/12/03/125452/26371516_p.jpg[/Img]
voyons là
[Img]:url:storage.canalblog.com/12/03/125452/26371516_p.jpg[/Img]
merci
merci beaucoup pour votre aide[Bouquet]
Poster un commentaire