• Bien débuter

    Eklablog permet de personnaliser son blog grâce à de nombreux paramètres (couleurs, tailles, emplacement...).

    Pour aller encore plus loin, on peut utiliser des codes HTML, CSS ou JAVASCRIPT.

    Une fois cette page lue, vous pourrez enchaîner avec les articles :

    Attention : lorque vous personnaliser votre blog avec du code HTML, CSS ou Javascript, gardez en tête que vous vous intégrez dans un environnement existant.
    Eklablog gère déjà beaucoup de choses en interne, il est possible que certains codes trouvés sur internet ne fonctionnent pas comme souhaité une fois intégrés dans Eklablog.
    De plus, des modifications peuvent être apportées à Eklablog ultérieurement, rendant certains scripts non fonctionnels.

    Pour vous aider vous trouverez des astuces et codes sur ces sites :
    Pour écrire du code dans un article, une page ou un module, cliquez sur l'icone « Code Source » du menu de l'éditeur :

    Si vous ne voyez pas ce bouton, passez en mode  « Normal » ou  « Expert» :

      HTML est le langage qui permet de créer une page : une page se compose de balises HTML qui définissent les éléments à afficher ; les balises sont simplement des petits mots qui définissent le type d'élément (paragraphe, lien, image...) et peuvent être complétées par des attributs (largeur, couleur...).

    Eklablog génère automatiquement le HTML lors de l'écriture d'un article.

    Si par exemple j'écris du texte avec un lien et du gras, j'obtiens en HTML :

    Exemple de code HTMLTout sélectionner

    <p>Ici un&nbsp;<a href="http://monsite.fr">lien</a>&nbsp;vers une autre page.</ p>
    <p>Et du texte <strong>en gras</strong>.</p>

    Le code ci-dessus affiche :

    Ici un lien vers une autre page.

    Et du texte en gras.

    Chaque élément est encadré par

    • une balise ouvrante : <balise> ;
    • et une balise fermante (la même mais avec un slash au début) : </balise>.

    Les balises utilisées dans le code ci-dessus ici sont :

    • p = paragraphe ;
    • a = lien hypertexte;
    • strong = gras.

    Continuez ici : Mon premier code HTML - Centrer du texte à côté d'une image.

      CSS est le langage utilisé pour les feuilles de style : c'est à dire la définition de l'apparence des éléments sur la page.

    Le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

    Exemple de code CSSTout sélectionner

    /* Cadres avec image */
    /* Source des images : http://openiconlibrary.sourceforge.net/ */
    .cadreimg-help,.cadreimg-idea,.cadreimg-warning,.cadreimg-info,.cadreimg-error{text-align:justify;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;margin:10px 40px;padding:10px;border:1px solid #25465b;padding-left:50px; box-shadow:0px 3px 12px #777;-moz-box-shadow: 0px 3px 12px #777;-webkit-box-shadow: 0px 3px 12px #777;}
    .cadreimg-help{background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/help.png) no-repeat 10px center #ddd}
    .cadreimg-idea{background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/idea.png) no-repeat 10px center #ffd}
    .cadreimg-warning{background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/warning.png) no-repeat 10px center #feb}
    .cadreimg-info{background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 10px center #def}
    .cadreimg-error{background:url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/error.png) no-repeat 10px center #ffbcc5}

    Continuez ici : Mon premier code CSS - images au coins arrondis avec ombrage

      Javascript est un langage de script qui permet de nombreuses actions.

    Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blog, en passant par le formulaire de contact.

    Le javascript n'est pas actif dans la version mobile du site !

    En cas d'erreur, vous pouvez ouvrir votre blog en ajoutant ?disablescripts dans l'adresse (par exemple http://monblog.eklablog.fr/?disablescripts) pour désactiver le Javascript et accéder au blog pour corriger l'erreur.

    Le code javascript s'écrit entre des balises <script>.

    Exemple de code JavascriptTout sélectionner

    <script>
    // <![CDATA[
    if(typeof(onJSFilesLoaded) != "object")
    onJSFilesLoaded = [];
    onJSFilesLoaded.push(function(){
    alert ("S'affiche à l'ouverture");
    });
    // ]]>
    </script>

    Continuez ici : Mon premier code Javascript - afficher un message