-
Chatbox en dehors
qu'est-ce que c'est ?
C'est tout simplement la chatbox qui se trouve en bas à gauche de mon blog.
Enfin, elle est NORMALEMENT en bas à gauche, je dis bien normalement.
Bref, passons.
comment faire ?Alors pour faire apparaître cette petite chatbox sur votre blog deja, il faut la créer.
Moi personnellement je l'ai faite sur chatango parce que j'aime bien le design de leur
boîtes et puis les couleurs sont entierement personnalisables. Donc pour ça vous allez
à cette adresse puis vous faite votre petit bordel comme vous le sentez. Quand c'est fait
vous cliquez sur Continue et vous copiez le code que l'on vous donne.
Maintenant, revenons à votre blog. Créez un module simple (Pour mettre un module vous devez avoir un menu normalement, hein. On ne le voit pas chez moi, parce que sa largeur est égale à 0px. Non, j'ai pas triché.) Cliquez sur l'icône HTML de l'article, collez votre code et laissez la fenêtre ouverte. Au tout début de votre code ainsi qu'à sa fin vous allez devoir rajouter ce qui se trouve ci-dessous.
Au début vous ouvrez cette balise<div id="chatbox">La balise <div> (div pour Division) permet d'ajouter une structure à ce qu'il encadre (Plus comunément il encadre un bloc de texte mais dans notre cas ce sera la chatbox). L'attribut id (id pour Identifiant) après notre div permet de nommer ce qu'il encadre afin de pouvoir travailler dessus dans le CSS. La balise <div> a de nombreux autres attributs mais seul l'attribut id sera utilisé dans ce tutoriel.
Et tout à la fin vous refermez cette même balise en ecrivant</div>Lorsque l'on tape un code HTML, chaque balise ouverte doit obligatoirement être refermée, sinon, rien de ce que l'on veut faire ne marchera ou bien pas correctement. On referme une balise en rajoutant un / devant son nom.
Vous pouvez enregistrer votre module, la partie HTML est terminée. Maintenant on va se concentrer sur le CSS. Je rappelle que pour éditer le CSS de votre blog, dans la barre de navigation vous allez dans Apparence > Modifier le thème > Ajouter du CSS
Copiez le code qui suit dans votre CSS puis j'explique tout ça.#chatbox{position: fixed;bottom: 0px; left: 0px;}Alors, le chatbox, c'est le nom qu'on a donné à votre id et c'est ce qui va permettre de travailler uniquement sur la chatbox que vous avez encadrée au préalable, j'espère que c'est tout bon pour ce point là. En ce qui concerne le position, inutile de traduire ça en français vous avez compris, ce qui nous interesse c'est plutôt le fixed derriere lui. lorsque l'on écrit l'attribut fixed derriere position, cela signifie que la chatbox bougera en même temps que vous si vous descendez la page, pour fixer votre chatbox à un seul et même endroit sans qu'elle ne vous suive, vous remplacez fixed par absolute. bottom représente le bas de votre page, ça veut dire que la chatbox sera en bas de votre page, si vous la voulez en haut, vous remplacez bottom par top. La valeur en px qui suit bottom c'est la marge entre le bas de la page et votre chatbox, là il n'y en a pas donc votre chatbox sera collée aux bords de la page. Enfin, left, left, si vous avez bien révisé votre anglais cet été, signifie gauche, vous l'aurez compris, ça signifie que votre chatbox se trouvera à gauche, si vous la voulez à droite, vous remplacez par l'attribut right. La valeur en px qui suit left a les même propriétés que celles de bottom sauf que là, la marge se fera par rapport au bord gauche de la page.
Si vous avez des questions n'hésitez surtout pas car cela vous sera surement très utile si vous souhaitez vous perfectionner dans l'apprentissage du codage CSS & HTML.
Petite astuce : Si vous n'avez qu'un seul menu sur votre blog, créez en un deuxième et cachez le en réduisant sa largeur à 0px, les textes présents dedans à 0px et la marge qui le sépare du contenu à 0px également. Cette petite astuce vous rendra bien des services.
-
Commentaires
Coucou Sugar♥ !
Alors oui, pour les modules, la procédure est légèrement différente, la voici :
Donc, lorsque tu vas sur ton blog et que tu fais Ctrl+U, tu obtiens normalement la page du code source. Fais ensuite Ctrl+F et recherche le nom du module que tu souhaites faire sortir de la page, tu devrais obtenir ce type de ligne, j'ai pris l'exemple de mon module "Partenaires" ici (http://ekladata.com/ZEg8feeEgt55_BVaP-4rgIeNIq8/code.png), essaie de repérer le premier bout surligné en jaune, il est situé un peu plus au dessus du titre du module. Copie ensuite de bout, puis, dans ton CSS, insère-le dans ce code-là :
li#colletonboutdecodeici {
position: absolute;
top: 50px;
left: 5px;
}
Le tour est joué ! Il ne te reste plus qu'a changer les différentes positions, selon l'endroit où tu veux placer ton module, soit les valeurs 50px et 5px. :)Je voulais de dire merci pour le code CSS que tu m'avais donnée ! :) Par contre on peut mettre à la place un autre module ?
A c'est pour ça alors ! je viens de lui envoyer un message maintenant il faut que j'attende quel me réponde.
Tant que le javascript n'est pas activé sur ton compte, la chatbox ne s'affichera tout simplement pas !
Tu n'a pas à t'excuser ce n'est pas grave ;D . J'ai marquer forum? Pardon si j'ai marquer ça car j'ai plutôt un blog eklablog moi aussi. :D
Fiofio Haruno, je m'excuse !! Je n'avais pas vu ton message précédent, encore pardon. Un forum ? Tu appliques donc ce tutoriel sur un forum ? J'aimerais t'aider mais je ne sais pas comment, étant donné que ce tutoriel est prévu pour être appliqué à un blog eklablog. Si je peux t'aider de quelque façon qu'il soit, je t'aiderais volontier !
Pourrais-tu me donner le lien du blog concerné s'il te plaît ? ^^
Effectivement, tu ne peux pas réduire la largeur d'un menu à 0px sans faire disparaître pour le coup l'ensemble des autres modules qui le constituent, mais je pense avoir une solution pour ne rendre invisible que le module qui contient ta chatbox. J'ai par contre besoin de savoir sur quel blog est ce module, car j'ai besoin de le voir pour pouvoir constituer le code qui permettra de le cacher. :)Pardon j'ai deux menus et j'aimerais savoir comment faire pour mettre le module chatbox en 0px
C'est très gentil ce que vous faites pour m'aider mais encore une dernière choses (enfin j'éspère car je n'ai pas envie de trop vous embeter) mais ou est le javascript dans mon forum ? Vous n'êtes pas obliger de me répondre toute suite car je pense que vous avez déjà beaucoup de chose à faire.
Ça y est, je pense savoir d'où vient le problème. Le javascript est-il activé sur ton compte ? Je ne l'ai pas précisé dans le tutoriel car je pensais qu'il n'était pas nécessaire d'avoir le javascript activé pour insérer une chatbox, mais maintenant que je vois le code, je pense que le problème vient effectivement de là. Si l'utilisation du Javascript n'est pas autorisée sur ton compte, envoie un message à Stéphanie pour lui en demander l'activation.
voila j'ai reussi grace à toi a mettre le texte dans le message :
<script id="sid0010000033843536435">(function() {function async_load(){s.id="cid0010000033843536435";s.src='http://st.chatango.com/js/gz/emb.js';s.style.cssText="width:250px;height:360px;";s.async=true;s.text='{"handle":"dreammulticolor","styles":{"a":"FF0099","b":100,"c":"66FFFF","d":"FFFFFF","e":"990099","g":"333333","j":"333333","k":"FF0099","l":"FF0099","m":"993333","n":"66FFFF","q":"FF0099","r":100,"s":1,"aa":1}}';var ss = document.getElementsByTagName('script');for (var i=0, l=ss.length; i < l; i++){if (ss[i].id=='sid0010000033843536435'){ss[i].id +='_';ss[i].parentNode.insertBefore(s, ss[i]);break;}}}var s=document.createElement('script');if (s.async==undefined){if (window.addEventListener) {addEventListener('load',async_load,false);}else if (window.attachEvent) {attachEvent('onload',async_load);}}else {async_load();}})();</script>
Ah, oui, c'est un problème. Alors, fais comme ça, utilise le raccourci clavier Ctrl+V. Au lieu de faire clique droit+coller, fais simplement Ctrl+V dans la case où tu veux coller le code. Essaie de voir si cela fonctionne;
Bas c'est quand je copie et que je fait clique droit pour marquer "coller" ca ne marche pas ça dit: "actuellement non supporté par votre navigateur.Veuiller utiliser les raccourci clavier à la place". Alors je c'est pas comment vous l'envoyer.Mais je vais chercher comment faire mais si vous s'avez comment je peut envoyer le code sans que ça ne marque ça et que cette fois il y a le code que je veut vous envoyer.Vous pouvez me dire comment le faire merci.
Bas c'est bien ça le problème je fait tout ce qui a marquer mais rien ne marche il apparait pas dans le menus que j'ai nommé "Chatbox".Au lieu qu'il est la chatbox il y a le code que j'ai copier/coller dans "HTML".
Est-ce que tu cliques bien sur ce bouton ?
Lorsque tu ouvres ton module, clique dessus et colle ton code.
La chatbox devrait apparaître dans le module. Ensuite, pour la faire sortir du module, il te suffit juste de suivre le tutoriel à la lettre. :)Ah, oui, je crois que tu t'es planté, effectivement. Tu es censée copier-coller un code, et non un lien ! Lorsque tu as terminé ta Chatbox et que tu as cliqué sur Continue, un code t'es donné, en principe. C'est celui-ci que tu dois coller dans le fenêtre d'édition HTML de ton module ! :)
Est ce que tu pourrais m'aidais aussi car je suis aller sur chatengo et j'ai personnalier comme je voulais ma chatbox mais quand je copie le lien et que je veux le mettre sur un module simple que j'ai nommais "chatbox" je le colle dans l'icone html mais quand j'enregistre ça ne marche pas et ça écrit ce que j'avais copier comme lien donc le code mais il n'y a pas de chatbox.Est ce que le code que j'ai copier est mauvais ou c'est moi qui me suis complétement planter XD ?
Alors je pense que l'espace entre le contenu et le header est dû à un tout autre paramètre. Essaie de voir dans Apparence > Modifier le thème > Contenu > Titre > Marges extérieures > Haut et, si ce n'est pas le cas, inscrit le chiffre 5 dans la case de Haut.
ah bin voila, j'y ai passé la journée, suis toute courbaturée, mais c'est déja pas mal, vas voir si tu veux, par contre le contenu, du milieu je n'arrive pas du tout à le remonter sous le header, pour qu'il soit au meme niveau que les colonnes des menus
bises
http://wicca-magie.eklablog.com/
Ah ! Je crois que j'ai eu une petite incompréhension dans ce cas. Lorsque tu parles de menus, tu parles de ceux qui sont alignés en dessous du header ? Je pensais aux colonnes de menu à droite et à gauche du blog, autant pour moi ! Alors oui, dans ce cas tout est plus clair ! On va bien finir par y arriver ! Alors déjà, si le nom de ta classe est #header, essaie de le changer par #header2 par exemple, car la balise #header de base existe déjà, cela peut créer des conflites. Il faut donc changer le nom de cette classe dans le HTML et le CSS. Une fois fait, agrandis la hauteur de l'emplacement du header, agrandis l'espace à faire en sorte de pouvoir rentrer ton menu en bas. Ensuite, dans Apparence > Modifier le thème > En-tête > Menu, clique sur Déplacer à la souris et déplaces ton menu vers l'espace que tu as précédement dégagé en bas du header. J'espère que ce mes explications ne sont pas trop vagues
je l'ai fait et la hauteur est bien 650 px comme mon image, mais le souci c'est qu'on ne voit plus le haut de mes deux colonnes de menus
donc c'est plutot avec la postion des menus, as tu été voir le blog de nightyfairy,
http://nightfairy.eklablog.com/
c'est un entete header comme cela que j'aimerai, mais elle m'a dit qu'on lui avait fait et que donc, elle ne sait pas comment placer le flash qui est ds le header
Mince ! Ce n'est pas normal. Peut-être essayer d'agrandir la hauteur de l'emplacement du header à partir du menu ? Apparence > Modifier le thème > En-tête > Format > Hauteur du header
oupsssssss et non, cela ne marche pas, le header se postionne bien, mais le souci c'est qu'il recouvre le début de mes deux colonnes de menu
merci quand meme de ton aide, amitié
Bonjour !
Alors j'ai tenté quelque chose, mais je ne sais pas vraiment si c'est ce que tu souhaites. C'est vrai que ce n'est pas évident de s'expliquer même si les idées dans la tête sont toutes faites ! Enfin bon ! Une fois que la première étape concernant le HTML est faite, tu peux appliquer ce qui suit et coller cela dans ton CSS. Donc, comme je ne sais pas quel nom tu as donné à ta classe, j'ai écris nomdetaclasse, il faut donc bien penser à le remplacer.
#nomdetaclasse {
position: absolute;
top: 0;
left: 50%;
width: 1150px;
margin-left: -575px;
}
J'espère que cela fonctionne. :)bonjour et merci pour ton (tes) tutos, mon souci, c'est que mon code flash que je veux en "header", ne se place pas bien, quand je place la css, je ne comprends rien à l'emplacement left, right en pixels, moi j'aimerai mon header, donc tout en haut, il fait 1150 sur 650 et que qd je mette la css, je puisse quand mem voir mes menus, hors là, le header mange le début de mes colonnes de menus que je ne vois plus (ah..pas facile de bien expliquer) as tu une solution pour ce code css, merci d'avcne
Merci beaucoup pour ce tutoriel :) J'aimerai savoir par contre si on pouvait rendre invisible le module qu'on à créer pour l'étape du Htlm ?
Ah, il fallait le préciser dès le début. Je ne peux pas le deviner moi.
Bon alors, pour mettre une couleur de fond c'est l'attribut background-color: purple; qu'il faut utiliser, color ne fera que changer la couleur de ton texte. Si tu veux mettre une image c'est background: url("urldel'image') no-repeat; en remplacant urldel'image par l'image de ton choix, si tu veux qu'elle se repète tu met repeat à la place de no-repeat.
Y a t'il autre chose ?Merci beaucoup. *-*
Cette petite astuce nous permet beaucoup de possibilités mine de rien. \o/Ah mais tu ne peux pas mettre d'image.
Normalement ta chatbox tu l'as dejà personnalisée lorsque tu l'as crée.
Tu es censée la créer à cette adresse :
http://chatango.com/creategroup
C'est la première chose qu'explique le tutoriel.oui mettre une couleur ou une image par exemple. J'ai essayé de mettre ça:
.chatbox{position: fixed;bottom: 300px; left: 575px; color: purple}
mais ça n'a pas marché...
Eh bien ? Tu peux le faire en utilisant les outils d'Ekla je pense ?
Tu selectionnes le texte et tu rapetissit sa taille. :OAlors ! Tu crées un module simple et tu insère ceci dans son HTML :
<div id="credits"><span style="text-decoration: underline;">DOUJINSHI . Fansite</span>, <em>b</em>log sur le<em> d</em>oujinshi et la <em>c</em>réation.
<p><strong>Blog créer le </strong> : 22/08/2010</p>
<p><strong>Blog gérer par </strong>: Mokoru, Saku Hime.</p>
<p>Site optimisé sur le moteur de rechercher, <em>Google Chrome.</em></p>
<p><strong><span style="color: #000080;">Ekla<span style="color: #008000;">blog</span></span></strong></p>
</div>
Ensuite, dans ton CSS tu inséres ceci :
#credits{position: absolute; top: 0px; right: 0px;}
Et ça devrait être bon ! :)Alors voilà ce que je veux écrire ^^ le texte en haut à droite. Merci d'avance !
DOUJINSHI . Fansite, blog sur le doujinshi et la création.
Blog créer le : 22/08/2010
Blog gérer par : Mokoru, Saku Hime.
Site optimisé sur le moteur de rechercher, Google Chrome.
Eklablog
Sur cet ordi je ne peux pas accéder à ton blog car il m'est bloqué mais je peux te fournir les codes dont tu as besoin.
Dis moi où tu veux placer ton texte par rapport aux cotés du blog et ce que tu veux écrire.Effectivement, l'erreur provient de mon tutoriel en fait. Mes excuses.
au lieu de <div class="chatbox"> c'est en fait <div id="chatbox">Okey : <div class="chatbox"><object id="obj_1317202007531" width="320" height="400" data="http://httpheavenlylogs.chatango.com/group" type="application/x-shockwave-flash"><param name="wmode" value="transparent" /><param name="allowScriptAccess" value="never" /><param name="AllowNetworking" value="all" /><param name="AllowFullScreen" value="true" /><param name="flashvars" value="cid=1317202007531&a=9B6469&b=60&f=50&k=9B6469&l=9B6469&q=9B6469&r=100&s=1" /><param name="src" value="http://httpheavenlylogs.chatango.com/group" /><param name="allownetworking" value="all" /><param name="allowfullscreen" value="true" /></object><br />[ <a href="http://httpheavenlylogs.chatango.com/clonegroup?ts=1317202007531">Copy this</a> | <a href="http://chatango.com/creategroup?ts=1317202007531">Start New</a> | <a href="http://httpheavenlylogs.chatango.com">Full Size</a> ]</div>
Je peux avoir l'HTML de la chatbox s'il te plait ?
Car le CSS me paraît bon, donc l'erreur est surement dans le HTML.J'arrive pas à mettre le texte en haut T.T j'ai fait ce qu'il fallait mais ca ne marche pas =(
3Xx-Lou-xXMardi 23 Août 2011 à 19:56Vous devez être connecté pour commenter
Merci c'est super sympas ! Et encore merci pour le tuto :)