• Tutoriel pour insérer une couleur ou une image de fond pour un article spécifique EKLABLOG

    Il s'agit d'introduire un code Javascript avec l'icône Code source Placer une image flottante dans un article avec un code HTML 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" Placer une image flottante dans un article avec un code HTML


    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..                     

    Tutoriel pour insérer une couleur ou une image de fond pour un article spécifique EKLABLOG

    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

                      Tutoriel pour insérer une couleur ou une image de fond pour un article spécifique EKLABLOG

                           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 Tutoriel pour insérer une couleur ou une image de fond pour un article spécifique EKLABLOG -
    insérer un tableau

    Tutoriel pour insérer une couleur ou une image de fond pour un article spécifique EKLABLOG
    Tutoriel pour insérer une couleur ou une image de fond pour un article spécifique EKLABLOG

     

     

    « Les bonnes résolutionsMise à jour du module Tutoriels HTML et CSS »
    Partager via Gmail

  • Commentaires

    1
    Lundi 2 Juin 2014 à 16:39

    merci Wadou, je ferai à mon retour vu qu'il faut demander l'autorisation et qu'une fois donnée elle n'est pas valable tout le temps, il faut recommencer chaque fois qu'on veut faire un truc.

    2
    Lundi 2 Juin 2014 à 17:46

    Un article très pédagogique !
    Merci et bonne soirée à toi

    3
    Lundi 2 Juin 2014 à 18:56

    Merci Walter pour les astuces, il suffit de leur demander simplement d'activer Java script !! Bonne soirée bisous Rozy

    4
    Jeudi 5 Juin 2014 à 06:57

    sympa toutes ces combines ! et en plus avec des explications claires ! un bizou walter, après la pluie d'hier am, le soleil est là !! une aubaine .. je te fais un gros bibi, bonne journée à toi, et miaou à pitchou, bizou flo

    5
    Dimanche 8 Juin 2014 à 09:14

    Très bien fait ce tuto, là rien ne peut échapper ;-)
    Bonne journée

    6
    Lundi 16 Juin 2014 à 21:53

    Tout simplement génial, comme la fois précédente, super et merci bcp!^^

    7
    Mercredi 25 Juin 2014 à 16:25

    Bien heureuse de savoir que si j'ai un problème lorsque je me déciderai à aller sur Eklablog je pourrais te demander des conseils mon ami Walter, non seulement un pro dans beaucoup de domaines mais génial pour mettre en valeur un blog dont je ne connais absolument pas le fonctionnement.

    De retour à Challans depuis hier soir, beaucoup de parutions qui m'attendent et tu as raison, blogzoom est toujours aussi capricieux, il faudra donc bientôt penser à changer de crémerie !!!!!

    J'espère que tu vas bien , à bientôt, un petit coucou amical de Christiane et bisous à toi, cher ami.  beurk   beurk 

    8
    Samedi 3 Janvier 2015 à 12:00

    Bonjour,

    C'est super ton "truc"  ,merci !

    9
    Samedi 3 Janvier 2015 à 21:02

    Merci pour ce code,  je viens de tester, bien pratique...

    Bonne soirée

    10
    Samedi 28 Mars 2015 à 18:09

    Bonsoir Vadou , merci de  ce  tutoriel très  intéressant  , je  vais  bientôt  m'en servir grâce  à toi , merci à toi et  bonne  fin de W-E .

    Emile

    11
    Samedi 28 Mars 2015 à 18:26

    Merci beaucoup !

    Bonne soirée !

    12
    Lundi 18 Janvier 2016 à 19:37

    Bonsoir Walter , excellent tutoriel , je  le  mets  en favoris pour une  prochaine  publication . Belle soirée et  encore merci .

    Emile

    13
    Mardi 14 Janvier à 09:28

    Toujours dans ma lecture.

    Je limite au maximum l'emploi du javascript car il semble qu'il puisse être source d'ennuis.

    Le CSS permet de faire pas mal de choses mais moins tout de même, entre autre pour les animations.

    Gilbert

    14
    Mercredi 15 Janvier à 10:13

    ça marche !!! génial... 

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :