Le blog de Monkey et Mingchao

tutoriels canalblog, bd, nos illustrations, dofus, wakfu......

07 août 2007

Méthode pour proposer des émoticônes dans ses commentaires de blog !

plong_e

Première étape : Se mettre en "mode avancé"

Deuxième étape : éditer la "page d'un message"

Dans l'entête juste avant la balise </head>

Insérez ce code:

<script src="http://p1.storage.canalblog.com/10/99/287897/15839144.js" type="text/javascript" ></script>
<script type="text/javascript">
<!--
function TableauGif() {
    var list = new Array();   
    list[list.length] = new Array("stp","
http://p8.storage.canalblog.com/80/37/296517/15839592.gif
");
    list[list.length] = new Array("Mdr","
http://p7.storage.canalblog.com/71/27/296517/15839583.gif");
    list[list.length] = new Array("coucou","
http://p7.storage.canalblog.com/79/28/296517/15839548.gif
"); 
    list[list.length] = new Array("ok","
http://p7.storage.canalblog.com/79/04/296517/15839600.gif
");
    list[list.length] = new Array("Cool","
http://p6.storage.canalblog.com/61/36/296517/15839630.gif
"); 
    list[list.length] = new Array("Content","
http://p6.storage.canalblog.com/64/17/296517/15839541.gif
");
    list[list.length] = new Array("J'arrive","
http://p6.storage.canalblog.com/68/24/296517/15839623.gif
"); 
    list[list.length] = new Array("Félicitation","
http://p1.storage.canalblog.com/15/40/296517/15839538.gif
");
    list[list.length] = new Array("classe","
http://p5.storage.canalblog.com/54/89/296517/15839588.gif
");
    list[list.length] = new Array("danse","
http://p7.storage.canalblog.com/70/65/296517/15839561.gif"
);
    list[list.length] = new Array("c'estpasvrai","
http://p9.storage.canalblog.com/97/79/296517/15839575.gif
");
    list[list.length] = new Array("Youpiii","
http://p2.storage.canalblog.com/27/50/296517/15839635.gif"
);
    list[list.length] = new Array("Hero","
http://p5.storage.canalblog.com/55/50/296517/15839580.gif");
    list[list.length] = new Array("dodo","
http://p7.storage.canalblog.com/76/10/296517/15839567.gif");
    list[list.length] = new Array("adorer","
http://p0.storage.canalblog.com/02/32/296517/15839444.gif
");
    list[list.length] = new Array("bisous","
http://p3.storage.canalblog.com/38/80/296517/15839403.gif
");
    list[list.length] = new Array("tousse","
http://p6.storage.canalblog.com/64/39/296517/15839529.gif");
    list[list.length] = new Array("chut","
http://p2.storage.canalblog.com/28/96/296517/15839415.gif
");
    list[list.length] = new Array("raler","
http://p5.storage.canalblog.com/59/17/296517/15839432.gif
");
    list[list.length] = new Array("colère","
http://p2.storage.canalblog.com/28/73/296517/15839423.gif
");
    list[list.length] = new Array("snif","
http://p5.storage.canalblog.com/57/35/296517/15839520.gif
");
    list[list.length] = new Array("pleur","
http://p1.storage.canalblog.com/10/08/296517/15839409.gif");
    list[list.length] = new Array("bravo","
http://p3.storage.canalblog.com/34/50/296517/15839658.gif");
    list[list.length] = new Array("timide","
http://p3.storage.canalblog.com/30/58/296517/15839677.gif
");
    list[list.length] = new Array("ouf","
http://p0.storage.canalblog.com/08/64/296517/15839674.gif");

    list[list.length] = new Array("géné","http://p4.storage.canalblog.com/42/10/296517/15839666.gif
");
    list[list.length] = new Array("moi","
http://p9.storage.canalblog.com/96/70/296517/15839661.gif");
    list[list.length] = new Array("non","http://p6.storage.canalblog.com/66/63/296517/15839671.gif
");
    list[list.length] = new Array("s'endors","http://p3.storage.canalblog.com/33/58/296517/15839653.gif
");
    list[list.length] = new Array("wouhaou","http://p8.storage.canalblog.com/84/74/296517/15839648.gif");
    list[list.length] = new Array("jogging","
http://p5.storage.canalblog.com/55/00/296517/15839459.gif");

    list[list.length] = new Array("bye","http://p4.storage.canalblog.com/49/50/296517/15839411.gif
");      return list;
}
// -->
</script>

cette ligne : <script src="http://p1.storage.canalblog.com/10/99/287897/15839144.js" type="text/javascript" ></script>

permet de charger les fonctions d'affichage. Elle correspond à mon adresse url, vous devez mettre la votre pour que cela fonctionne.

Vous devez donc télécharger le fichier en cliquant dessus et le sauvegarder. Ensuite vous devez récuper l'adresse url de ce lien.

Pour cela créez un nouveau message sur votre blog en y insérant ce fichier. Mettez le en brouillon. Puis en faisant un clic droit sur le lien, faite propriété et vous aurez l'adresse url.

Copiez l'adresse, et collez là à la place de la mienne.

Si vous mettez ce code, vous aurez les émoticônes que j'ai choisi.

Pour mette les émoticônes de votre choix, il suffit de modifier ou d'ajouter cette ligne :

list[list.length] = new Array("Nom du gif","adresse url du gif");
Pas mal de sites proposent des gifs, je vous donnerez les adresses à la fin du tuto.

Troisième étape : Repérez le <div id="..."> qui permet l'affichage des commentaires, par défaut pour canalblog c'est "content". Repérer également la class <Div class="..."> dans lesquels sont affichés les commentaires, par défaut pour canalblog c'est "blogbody".

</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>

puis repérez juste avant <Blogger> <BlogDateHeader> .

</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
<h2>Poster un commentaire</h2>



et insérer un code java juste après </CBControlForm>, comme ceci :

</CBControlForm> (<=== ça c'est l'existant, donc pas touche !!! On rajoute simplement ce qu'il y a en dessous en noir)
<script type="text/javascript">
<!--
SwapCodeEmoticon("content","blogbody");
// -->
</script>

<h2>Poster un commentaire</h2>  (<=== ça c'est l'existant on y touche pas non plus !!)

dans la partie de saisie de commentaire juste en dessous du texte area, repérez ceci: 
<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> (<===à 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)
Vous pouvez maintenant valider et en principe vous devriez avoir de jolis
émoticônes à dispositon pour vos commentaires.

En cas de problème n'hésitez pas à nous contacter ! coucou

Adresses de smileys :

http://nesumi.free.fr/smiley/kaos/divers/index.html
http://perso.orange.fr/safran2b/kaos1.htm
http://www.stci.qc.ca/affiche_kaos.php

Posté par minzamin à 11:11 - Tuto blog - Commentaires [1] - Permalien [#]

Commentaires

    :)

    [wouhaou]Ca m'a l'air compliqué :/
    Mais je vais essayer !
    Merci

    Posté par Monster, 11 juin 2008 à 13:09

Poster un commentaire