Votre Premier Billet...
Vous voilà avec un blog tout neuf et vous avez plein de choses à dire ou à montrer ? C’est le moment de créer votre premier billet.
Note : Dans mon exemple, je vous guiderai par la méthode "normale" (souvenez vous, billet rapide & billet normal)
Commençons !
Tout d'abord, cliquez sur le lien Nouveau billet dans la colonne de gauche.
Théoriquement une nouvelle page s'affiche (si c'est pas le cas... euh..!!). Chacun de ces champs est précédé d'un libellé avec une étoile rouge (*) si il est obligatoire.
Ici il y a 2 champs obligatoires : le titre et le contenu.
Il ne nous reste qu'à remplir les champs :
Plusieurs types d'édition sont possible (à droite : Format du texte, par défaut xHTML).
Note Perso : J'utilise personnellement le format xHTML qui offre un aspect visuel, ainsi qu'un aspect source, le mieux à mon avis.
| Astuce : |
Un Ruban vous permet de "générer" des codes automatiquement, tels qu'un texte en gras, souligné, ou même encore
en italique (voir ci-dessous)
|
Expliquons :
Choix de la taille du texte :
Paragraphe :
Bonjour à tous !!
Titre de niveau 1 :
Bonjour à tous !!
Titre de niveau 2 :
Bonjour à tous !!
Titre de niveau 3 :
Bonjour à tous !!
Titre de niveau 4 :
Bonjour à tous !!
Titre de niveau 5 :
Bonjour à tous !!
Titre de niveau 6 :
Bonjour à tous !!
Bien évidemment, la différence est visible. Continuons...
Texte en gras :
Le texte que vous lisez est en gras !
Texte en italique :
Le texte que vous lisez est en italique !
Texte souligné :
Le texte que vous lisez est souligné !
Texte barré :
Le texte que vous lisez est barré !
Voila pour ce qui est de la mise en forme pour l'instant, les couleurs, seront vues un peu plus loin !!
Citation en ligne :
Voici une citation (mise en gras):C’est le signe d’un fou, qu’avoir honte d’apprendre.
Code :
Ceci est un exemple de Code
Passage à la ligne :
Je ne vais épiloguer sur ce bouton, assez explicite par son titre, il permet simplement de passer à la ligne.
Bloc de citation :
Ceci est un bloc de citation.
Il s'agrandira automatiquement, suivant le nombre de lignes.
Texte préformaté :
Voila quelque chose de bien sympathique. Le texte préformaté ! Exemple :
Texte non préformaté
.-.
/___\
|___|
|]_[|
/ I \
JL/ | \JL
.-. i () | () i .-.
|_| .^. /_\ LJ=======LJ /_\ .^. |_|
_._._/___\._./___\_._._._._.L_J_/.-. .-. .-.\_L_J._._._._._/___\._./___\._._._
., ., |-,-| ., L_J |_| [I] |_| L_J ., |-,-| ., .,
JL JL |-O-| JL L_J%%%%%%%%%%%%%%%L_J JL |-O-| JL JL
HH_IIIIII_HH_'-'-'_HH_IIIIII|_|=======H=======|_|IIIIII_HH_'-'-'_HH_IIIIII_HH_
[]--------[]-------[]-------[_]----\.=I=./----[_]-------[]-------[]--------[]-
|| _/\_ ||\\_I_//|| _/\_ [_] []_/_L_J_\_[] [_] _/\_ ||\\_I_//|| _/\_ ||\
|| |__| ||=/_|_\=|| |__|_|_| _L_L_J_J_ |_|_|__| ||=/_|_\=|| |__| ||-
|| |__| |||__|__||| |__[___]__--__===__--__[___]__| |||__|__||| |__| |||
[_]IIIIIII[_]IIIII[_]IIIIIL___J__II__|_|__II__L___JIIIII[_]IIIII[_]IIIIIIII[_]
[_] \_I_/ [_]\_I_/[_] \_I_[_]\II/[]\_\I/_/[]\II/[_]_I_/ [_]\_I_/[_] \_I_/ [_]
L_J./ \.L_J/ \L_J./ L_JI I[]/ \[]I IL_J \.L_J/ \L_J./ \. L_J
L_J| |L_J| |L_J| L_J| |[]| |[]| |L_J |L_J| |L_J| |L_J
L_JL_____JL_JL___JL_JL____|-|| |[]| |[]| ||-|____JL_JL___JL_JL______JL_J
Vous vous demandez ce que c'est... Regardez juste en dessous !
.-.
/___\
|___|
|]_[|
/ I \
JL/ | \JL
.-. i () | () i .-.
|_| .^. /_\ LJ=======LJ /_\ .^. |_|
_._._/___\._./___\_._._._._.L_J_/.-. .-. .-.\_L_J._._._._._/___\._./___\._._._
., ., |-,-| ., L_J |_| [I] |_| L_J ., |-,-| ., .,
JL JL |-O-| JL L_J%%%%%%%%%%%%%%%L_J JL |-O-| JL JL
HH_IIIIII_HH_'-'-'_HH_IIIIII|_|=======H=======|_|IIIIII_HH_'-'-'_HH_IIIIII_HH_
[]--------[]-------[]-------[_]----\.=I=./----[_]-------[]-------[]--------[]-
|| _/\_ ||\\_I_//|| _/\_ [_] []_/_L_J_\_[] [_] _/\_ ||\\_I_//|| _/\_ ||\
|| |__| ||=/_|_\=|| |__|_|_| _L_L_J_J_ |_|_|__| ||=/_|_\=|| |__| ||-
|| |__| |||__|__||| |__[___]__--__===__--__[___]__| |||__|__||| |__| |||
[_]IIIIIII[_]IIIII[_]IIIIIL___J__II__|_|__II__L___JIIIII[_]IIIII[_]IIIIIIII[_]
[_] \_I_/ [_]\_I_/[_] \_I_[_]\II/[]\_\I/_/[]\II/[_]_I_/ [_]\_I_/[_] \_I_/ [_]
L_J./ \.L_J/ \L_J./ L_JI I[]/ \[]I IL_J \.L_J/ \L_J./ \. L_J
L_J| |L_J| |L_J| L_J| |[]| |[]| |L_J |L_J| |L_J| |L_J
L_JL_____JL_JL___JL_JL____|-|| |[]| |[]| ||-|____JL_JL___JL_JL______JL_J
C'est plus sympa comme ça non ? Promis les deux "textes" sont les mêmes !! Tout simplement Magique !
Oui, effectivement, le bouton "pre" permet de garder la mise en forme d'origine sans utiliser les retours à la ligne, etc.
Liste à puces :
Petit exemple ci-dessous :
Simple et efficace. Vous aurez remarqués que je l'utilise depuis le début pour les différents "boutons".
Liste numérotée :
Encore un petit exemple :
- Premier
- Deuxième
- Troisième
Et voici un liste numérotée ! Je vous rassure, les numéros ce mettent automatiquement..
Lien :
Pour ajouter un lien, cliquez simplement sur le bouton, cela ouvre une "pop-up". Entrez l'adresse du lien, la langue n'est pas obligatoire. Puis cliquez sur "insérer", votre lien est ajouté !
Image externe :
Même chose que pour le lien, une "pop-up" s'ouvre, entrez l'adresse de l'image et cliquez sur "OK".
L'image est alors ajoutée !
Suppression de Mise en Forme :
Ce bouton, supprime d'un seul clic tout la mise en forme effectuer ! Utilisation très rare.
Sélecteur de Média :
Permet de choisir un "média" (images, vidéos, musiques) à ajouter a votre blog. Ces médias sont sauvergarder sur le serveur.
Lien vers un billet :
Ce bouton, vous permet de mettre un lien vers un billet de votre blog. Très utile, pour faire des rappels
Ajout d'un tag :
Permet de générer des tags ou "Mots Clés" associés à l'article. Surlignez le mot à "tagger" puis cliquez sur ce bouton.
Vous pouvez souffler... Vous avez de quoi faire un beau billet jusqu'à là...
Oui, c'est bien sympa... Mais euh... Les couleurs ?
Je vous expliques... Lisez bien le tout, je pense que c'est la partie la plus délicate, mais ne vous inquiètez pas, ce ne sont que des couleurs, vous avez le droit à plusieurs essais ! 
On se jette à l'eau...!
Comme je le disais précédement, il vous faudra bien lire ce qui va suivre. Ne paniquez pas, c'est pas si compliqué que ça une fois qu'on à compris.
Donc, tout d'abord, faites votre article de facon simple, en format d'édition xHTML (obligatoire pour les couleurs), à droite sur le billet en cours de création.
Votre article est donc fait... il ne reste plus qu'a passé en aperçu "source".
Oh surprise, du code, pas très compréhensible...Petit cours rapide :
<h3> Balises de titre allant de h1 à h6 ! </h3> Cela correspond simplement aux différents niveaux de titres vu plus haut.
<p>Nouveau Paragraphe</p> Tout simple, c'est un paragraphe.
<br /> Est équivalent à un retour à la ligne. // <br /><br /> Est égal à un saut de ligne.
<strong>Gras</strong> Texte en gras.
<em>Italique</em> Texte en italique.
<ins>Soulignement</ins> Texte souligné.
<a href="http://www.monlien.fr/index.php">Liens<a> C'est un lien, qui lorsqu'on cliquera sur "lien" on arrivera à http://www.monlien.fr/index.php.
<img src="http://www.monlien.fr/image.jpg"> Ici, c'est une image !
Les balises principales sont vues, vous n'êtes pas obligé de retenir, mais c'est toujours un plus !
Aller, la couleur !!!
La couleur dans un article se génère en RGB (Red, Green, Blue) en Anglais, et RVB (Rouge, Vert, Bleu) en Français.
Peut importe RGB ou RVB, le résultat est le même...
Il faut simplement faire attention à l'ordre, car si vous inverser les valeur Bleu & Rouge sont inversés, le résultat ne sera pas le même.
Trève de bavardages !
Pour donner de la couleur à tout un titre, ou paragraphe, voilà ce qu'il faut mettre : 
<h3 style="color :rgb(121, 128, 129)">Texte en couleur, qui peut s'appliquer des balises "h1" aux balises "p". </h3>
/!\ Lorsque vous fermez votre balise (fin du titre, fin du paragraphe).
/!\ La couleur, est automatiquement stoppée elle aussi !
Pour ajouter de la couleur, sur seulement un ou plusieurs mots, il faut entouré le(s) mot(s) de la balise <font>.
Exemple :
<p>Ce texte sera de la couleur par défaut, mais ce <font color="#318ce7"> bleu </font> .
Ici on utilise un code héxadécimal
J'espère que vous avez tous compris... Relisez nombre de fois qu'il vous plaira, n'hésitez pas à tester sur vos blogs !
Euh, mais les codes, où les trouve t'on ?
Bah, rien de bien compliqué, voici quelques liens :
Alterlinks.fr
Cliquez sur la couleur de votre choix, puis copier le code RGB ou héxadécimal (HTML) donné en haut du tableau.
Wikipedia.org
Sélectionnez le code RVB ou héxadécimal de votre choix dans la liste.
Bonus !!
Téléchagez "La Boite à Couleurs"
Voilà un petit logiciel, gratuit, que moi-même j'utilise. Très simple, il vous permettra de "créer" votre couleur, ensuite copiez-collez, les codes de haut en bas.
Vous voilà fin prêt pour rendre vos Blogs de vrais feux d'artifices de couleurs !!
To be continued...
Cliquez Pour Agrandir.
(°C)