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

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

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.

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.