• HTML

  • Ce code sera à insérer dans la partie code source de l'article.

     

    Pour cacher un texte il vous faudra utiliser ce code:

     

    <div style="margin:20px; margin-top:5px" mce_style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Afficher" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;" mce_style="display: none;">{TEXT}</div></div></div>

     

    Il vous suffira simplement de remplacer TEXT par votre texte.

    Vous pourrez également modifier les textes visibles tels que Spoiler ou encore Afficher.

     

    Avec ce code, le cache se présentera sous cette forme: Spoiler:

     

    Pour cacher une image, utiliser ce code:

     

    <div style="margin:20px; margin-top:5px" mce_style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Afficher" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;" mce_style="display: none;">

    <img style="width: largeurpx; height: hauteurpx;" src="IMAGE" border="0" alt="Attention" /></a> 

    </div></div></div>

     

    Ici, il vous faudra remplacer "IMAGE" par l'adresse de votre image.

    Comme pour le code précédent, vous pouvez modifier le cache qui sera visible en modifiant "Spoiler" et "Afficher" mais également la hauteur et la largeur de l'image.

     

    /!\ Ces codes ne marchent que si le javascript est activé sur votre blog. /!\

     

    Si vous désirez activer le javascript il vous faudra contacter le support via ce formulaire en demandent l'activation de ce dernier.

    Le formulaire est disponible ici : https://www.eklablog.com/support.


    votre commentaire
  • Modifier le favicon du blog

    Sur la plateforme, nous n'avons pas accès directement à la balise <head> des pages du blog. Il va donc falloir se servir de javascript pour modifier le favicon par défaut.

    Le code est à placer dans un module simple du menu afin que le changement s'opère sur toutes les pages du blog. Vous avez la possibilité de mettre un favicon différent sur chaque page. Dans ce cas il vous suffit de placer le code dans un article.

    <script type="text/javascript">// <![CDATA[

    var ico=document.getElementById ('favicon');

    ico.href='http://data0.ek.la/monpremierblog/perso/france-icone-4359-16.png';

    // ]]></script>


    votre commentaire
  • Là, j'écris sur un fond coloré.

     

    Pour commencer vous créez un article, vous écrivez votre texte et cliquez sur le bouton HTML de l'interface.

    Là vous voyez un <p> au début et un </p> à la fin de votre texte, remplacez le premier <p> par ce code là

     

    <p style="background-color: #couleur du fond

    text-align: center; width: taille de la largeur du fond coloré en px; padding: 5px;">

     

    Fermez, enregistrez.

    Si vous souhaitez que votre texte soit aligné à droite vous remplacez center par right et si vous

    le voulez à gauche par left.

     

    La couleur du fond peut également être remplacée par une image, pour cela il faut remplacer

     

    background-color: #couleur du fond;

    par

    background-image: url(urldevotreimage)

     

    Un peu plus d'approfondissement

     

    Pour arrondir les bords du fond

     

    <p style="background-color: #ffffff; padding: 5px; text-align: left; border-radius: 30px 30px 30px

    30px;">Votre texte.</p>

     

    30px : Bord supérieur gauche

    30px : Bord supérieur droit

    30px : Bord inférieur droit

    30px : Bord inférieur gauche


    votre commentaire
  • Ci-dessous les differentes formes de soulignements de liens ou de textes.

    Ligne continue

    Ligne double

    Ligne avec pointilés

    Ligne avec tirets

     

    En premier vous allez créer un nouvel article. Alors, pour souligner normalement, inutile de vous expliquer comment on fait, l'interface d'Eklablog nous propose gentillement le bouton U qui permet donc de souligner une ligne, un lien, un mot.

     

    Tout d'abord tapez un texte à souligner dans votre cadre blanc. Une fois fait, cliquez sur le petit bouton HTML de l'interface. Là vous devriez avoir votre texte avec <p> au début et </p> à la fin, nous allons travailler a l'interieur, n'y faites pas attention.

     

    Pour souligner un mot en double, vous devrez rajouter juste devant de ce mot

     

    <span style="border-bottom: 3px #000000 double;">

    Et tout de suite après ce même mot vous rajoutez

    </span>

     

    Et normalement si vous fermez votre fenêtre d'édition HTML vous devriez voir le mot souligné en double.

     

    border-bottom correspond au bord inférieur de votre mot, vous pouvez changer bottom par top si vous souhaitez mettre le soulignement au-dessus du mot ou encore right (Bord droit) ou left (Bord gauche).

    3px correspond à la hauteur de votre ligne en pixels, pour un soulignement double c'est minimum 3. Pour les autres sortes de soulignement par contre, 1px suffit largement.

     

    Enfin, double que vous pouvez remplacer par

    dotted (pointillés)

    dashed (tirets)

     

     

    Il est possible de donner une couleur différente de celle de votre texte à votre soulignement, pour ce faire il faut rajouter le code héxadécimal de la couleur choisie à la place du #000000. Si vous souhaitez que votre soulignement soit de la même couleur que votre texte, vous devrez retirer ce #000000, sans quoi votre code ne fonctionnera pas.


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

    <div style="height: *px; width: **px;
    overflow-x: auto; overflow-y: auto;">votre texte</div>

    *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)


    Pour plus d'approfondissement

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

    <div style="background-image: url('urldelimage'); height: *px; width: **px;
    overflow-x: auto; overflow-y: auto;">votre texte</div>

    votre commentaire


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique