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.

Franchement, je suis super contente de celle-ci. *-*

J'ai passé un peu plus d'une heure en tout (En comptant les nombreux moments ou j'ai faillit
cliquer sur la croix rouge tellement ça me saoulait x'D) à faire cette signature. J'ai fait un cadre
assez original comme vous pouvez le constater et puis ben, voila, j'suis fière de moi pour une fois. \o/

Que tous ceux qui aiment Gil lèvent la main ! \o/
*lève les deux mains bien haut*

Bon ben, voila, une signature. Je sais pas trop quoi dire dessus
mis à part le fait qu'il manque quelque chose et que je ne suis pas contente de la typo. @_@

qu'est-ce que c'est ?

comment faire ?

Pour avoir le même genre de cadre que ci-dessus, il vous suffit d'insérer ce code dans la partie HTML de votre article et d'en remplir les valeurs.

*px : Remplacez * par la taille de la hauteur de votre cadre (en px = pixels)
**px : Remplacez ** par la taille de la largeur de votre cadre (en px = pixels)

un peu plus d'approfondissement

Pour appliquer un fond (à répétition) dans le cadre

Bien le bonjour à toi qui lit cette phrase.
Si tu es là c'est surement pour demander comment on fait ci ou ça avec du code et sache que j'attends avec impatience ta demande ! Oui, avec impatience car des codes, j'en connais un petit nombre et que tous les mettre un par un serait pénible en sachant que seul une poignée d'entre vous utiliserons tel ou tel code.

C'est donc pour ça qu'existe cette rubrique, il vous suffit juste de me demander par commentaire qu'est-ce que vous souhaiteriez savoir !
Ah, et si vous avez un exemple ou une image de ce que vous voulez, elle ne sera pas de refus !

EDIT : Les commentaires de cet article sont très, très nombreux. Votre page prendra du temps à tous les charger un par un. Si vous souhaitez faire une nouvelle demande, merci de la poser dans l'article suivant.