Ces 4 tutoriels sont les bases pour la création de mes articles. Je les ai groupé dans le module Tutoriels HTML et CSS.
Pour accéder aux détails des procédures, un clic sur   ou sur le titre du tuto dans le module.
A vos marques  prêts ?  PARTEZ..........faites-en l'essais

Un tableau permet d'insérer une ou plusieurs images côte-à-côte dans un article. Ces images seront ordonnées de façon précise avec ou sans cadres. La mise en forme se fait au goût de l'auteur. Voici une procédure de base qui ne demande pas d'être un ingénieur en informatique.
Avec un peu de pratique chacun pourra en faire un outil de grande utilité.
Si vous rencontrez une difficulté n'hésitez pas à "Me contacter"

Pour commencer je recommande d'abord de télécharger les images, prévues à êtres insérées, dans l'hébergeur EKLABLOG.
Pour ce faire il faut employer "Gérer les fichiers" dans la liste déroulante de   

Pour insérer une couleur de fond du tableau et de cellule + bordure.

- En tout premier il faut choisir et copier un code-couleur à trouver sur internet.
- Sélectionner le tableau puis cliquer sur l'icône puis "Propriétés du tableau" ensuite sur "Avancé" et là coller le code-couleur (ici rouge #DF0101) dans l'onglet correspondant  puis OK.
- Pour la bordure sélectionner le tableau puis cliquer sur l'icône puis "Propriétés du tableau" ensuite "Avancé" et là coller le code-couleur (ici bleu  #5882FA) dans l'onglet correspondant puis OK.
- Pour une cellule, mettre le curseur dans la cellule puis cliquer sur l'icône puis "Cellule" ensuite "Propriétés de la cellule" et "Avancé". Là coller le code-couleur (ici 1^er cellule jaune #FFFF00) dans l'onglet correspondant puis OK. Répéter avec une autre couleur pour les autres cellules.

Il s'agit d'introduire un code Javascript avec l'icône Code source  de l'interface d'Edition d'un article. Pour ce faire il est nécessaire de demander à EKLABLOG d'activer le Javascript sur votre blog. Une fois avoir reçu la confirmation vous suivez la procédure.

Pour information la procédure qui suit peut se faire avant ou après avoir inséré les photos de l'article.

En tout premier télécharger l'image désirée dans et le menu déroulant "Gérer les fichiers". Une autre solution est d'employer une galerie EKLABLOG → "Nouvelle galerie" Selon la largeur de votre blog il pourrait être nécessaire de modifier la résolution de ces images.

Puis vous devez l'article concerné.

Mettre l'interface en mode "Expert" ce qui fait apparaitre l'icone "Code source"


Voici le code que vous devez copier en entier. Si pas possible de copier ici je vous l'envoie par message.

<div id="madiv1">&nbsp;</div>
<script type="text/javascript">// <![CDATA[
var x=document.getElementById('madiv1').parentNode.parentNode;
x.style.backgroundImage='url(image)';
x.style.backgroundSize="100%";
x.style.backgroundPosition="0px 100px";
x.style.backgroundRepeat="no-repeat";
// ]]></script>

Maintenant activez l'icône "Code source" et collez le code à la place du curseur clignotant ou à la suite des codes existants..                     

Ce code étant utilisable qu'une fois, vous devez alors modifier les deux "madiv" (5 nouvelles lettres entre les guillemets) chaque fois que vous l'introduisez dans un article. Le chiffre 1 peut rester. Et entre les guillemets (image) vous coller l'adresse URL de votre image de fond, cliquez sur OK et  Enregistrer sans publier   Puis aller à la prochaine étape

                       Le fond apparait sous forme d'un bandeau. Il se déploiera chaque fois que vous insérez une image.
A ce stade vous pouvez modifier les valeurs bleu vert brun selon vos besoins, explications ci-dessous :

Bleu = dimension de l'image de fond en %.  100% est la largeur de la page
Vert = valeur variable de déplacement du fond vers le bas
Brun = "no-repeat" signifie que le fond sera inséré une fois,
        si on enlève no- le fond se répétera en mosaïque l'un en dessous de l'autre
(ne pas oublier de cliquer OK puis Enregistrer sans publier)
n
b

Le bandeau de l'image de fond est actuellement inséré (ci-dessous). Vous n'avez plus qu'à introduire vos photos, la page va s'adapter à l'espace employé. Pour ce faire on peut utiliser HTML- placer une image ou  - insérer un tableau

Escamoter le titre d'un article et remplacé par une création personnelle

 “Si vous avez un travail où il n’y a pas de complications, vous n’avez pas de travail.”

                                                                                               Copier ce code

                                                  #module_titre_article000000000.module_titre_contenu {display: none;}


                                                     - Ouvrir dans une autre fenêtre l'article auquel on va enlever le titre                                                                        
                                                   
                                                     - Sélectionner →

                                                     - Sélectionner tout en bas de la liste "Ajouter du CSS"
                                                    

                                                     - Coller le code                                                    
                                                     - Copier dans l'adresse de l'article, dans lequel le titre va être enlevé, le numéro à 9 chiffres
                                                     - Remplacer dans le code le numéro à 9 zéros
                                                     - Appliquer et Sauvegarder                                                     

                                                    

                                                     Le titre a disparu      " La condition de ne pas changer est condamnée à disparaître"
                                                    
                       

Placer une image (vignette) et l'agrandir par clic

                                                 Nous travaillerons ensemble pour soutenir le courage là où il y a la peur

- Choisir l'image désirée. Redimensionner l'image pour ne pas ralentir son agrandissement. Donner une adresse URL à cette image. Il est possible, pour ce faire, d'employer EKLABLOG dans → Nouvelle galerie. Une fois l'image enregistrée dans la galerie, l'ouvrir puis clic droit sur l'image agrandie (important pour la suite) et "Copier l'adresse de l'image". Tout autre hébergeur d'images peut fournir un URL. On peut aussi
télécharger cette image avec EKLABLOG dans → Gérer les fichiers.


Maintenant copiez ce code et ouvrez un nouvelle page

<a href="URL image"><img style="margin: 100px 0px 0px 20px;" src="URL image" alt="" width="120" /></a></p>

- Dans l'article concerné ouvrir "Edition d'un article" et activez l'icone "Code source"
- Coller le code à la place du curseur clignotant.
- Remplacer aux deux endroits URL image par l'URL de l'image de fond désirée (ne pas déborder sur les guillemets). Le premier URL image donnera l'image en grandeur d'origine et le deuxième donnera la vignette insérée.
- 100 est une valeur variable dans le déplacement vertical (Y) de la vignette à insérer.
-  20 est une valeur variable dans le déplacement horizontal (X) de la vignette à insérer.
- 120 (px) est une valeur variable. A modifier selon la largeur voulue (la hauteur reste proportionnelle) de la vignette à insérer.
- clic sur OK et Enregistrer sans publier. La vignette doit apparaitre à gauche dans la page de l'article.
- à ce stade adaptez les valeurs variables désirées directement dans le "Code source"  puis OK et Enregistrer sans publier

  ATTENTION ! les modifications dans le "Code source" doivent êtres précises. Si une lettre ou un symbole est touché à côté la publication sera erronée.

  Pour insérer plusieurs images il suffit de recopier le premier code directement dans le "Code source", de le coller à la suite du premier, du
  second, etc... et de modifier les valeurs variables selon désires.

 Toute cette procédure est réalisable avec ou sans fond d'article.