• Annonce Faire un spoiler [texte caché] personnalisable


    Lundi 21 Novembre 2011 à 15:15
    rezemika

    Bonjour à tous!

    Pour mon premier tuto sur ce forum, je vais vous montrer comment faire un spoiler

    HTML personnalisable très facilement!

    Pour cela, vous devez tout d'abord pouvoir modifier le code JavaScript du site, pour les nouveaux,

    c'est par ici : http://doc.eklablog.com/demandes-d-activation-javascript-topic12367

    PS : pour faire un URL cliquable, il suffit de le sélectionner et de cliquez sur "Insérer / éditer un lien", le symbole est une maille de chaîne en haut de l'éditeur d'article.

    Donc, revenons au sujet principal, le spoiler :

    Le code :

    Ouvrez l'éditeur HTML d'une page ou d'un article et placez vous entre deux lignes de texte marquées

    par <p>DU TEXTE</p>. Le <p> et le </p> indiquent le début et la fin d'un paragraphe.

    Placez votre curseur juste avant un <p> et appuyez sur Entrée pour insérer une ligne vierge.

    Au début de cette ligne, copiez-collez ce code :

    <div style="margin: 5px 10px 10px;">
    <div class="smallfont" style="margin-bottom: 2px;"><strong>NOM</strong> <input style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" 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 = 'Montrer'; }" type="button" value="Montrer" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 2px;">
    <div style="display: none;"><br />
    <p>VOTRE TEXTE</p>
    </div>
    </div>
    </div>

    Cliquez sur "Mettre à jour" et sur "Enregistrer", fermez puis voyez le résultat. Cliquez sur "Montrer"

    pour dévoiler le spoiler et magie! Le "Montrer" se transforme en "Cacher"!

    Si vous voulez changer cela, repérez les "Montrer" et les "Cacher" dans le code et remplacez-les par le message choisi, il doit être le plus court possible!

    /!\ Avertissement :

    Ne mettez pas d'accents dans ce code sous peinne de voir un texte incompréhensible à la place!

    Remplacez les accents par ces codes-ci :

    é = &eacute;

    è = &egrave;

    Voici un exemple : Le si&egrave;cle dernier, en &eacute;t&eacute;...

    Ce qui donne : Le siècle dernier, en été...

    Le texte :

    Maintenant qu'on à un joli Montrer / Cacher dans notre spoiler, rendons-le utile,ajoutons-y un texte

    à cacher!

    Pour cela, et pour des raisons pratiques, utilisez la fenêtre d'édition classique et pas la fenêtre d'édition

    HTML. Ouvrez le spoiler avec le bouton Montrer dans la fenêtre d'édition et vous verrez à l'intérieur

    "VOTRE TEXTE". Remplacez-le par le texte que vous souhaitez cacher, vous pouvez même, avec les outils habituels EklaBlog, des liens, des images, des vidéos...

    Ainsi, en utilisant la fenêtre d'édition classique et pas la fenêtre HTML, vous pouvez plus

    aisément insérer des images, des vidéos, des accents...

    Par contre, évitez les sauts à la ligne, appuyez plutot sur Espace jusqu'à aller à la ligne suivante.

    Le nom :

    Toujours dans la fenêtre d'édition classique, vous pouvez changer très simplement le nom du spoiler.

    Comment?

    Eh bien c'est simple, séléctionnez le "NOM" à gauche du bouton et écrivez le nom que vous souhaitez

    donner au spoiler, et, les accents sont autorisés!

    C'est fini!

    Je vous conseille tout de même de garder une copie de ce code au cas ou vous feriez une mauvaise

    manipulation qui pourrait rendre le spoiler inutilisable.

    Désolé pour la taille énorme de ce tuto mais j'était d'humeur à écrire

    Désolé aussi pour les fautes d'ortographe.

    Bonne spoilation!

    Jeudi 1er Décembre 2011 à 00:57
    Isa et Killian

    Merci beaucoup pour ce tuto !!!

    ça peut servir.....c'est sympa!!

     

    Lundi 9 Janvier 2012 à 19:53
    ForeignFantasy

    Merci beaucoup pour ce tuto, il est très utile pour mon blog ! :)

    Vendredi 10 Février 2012 à 14:19
    rezemika

    Merci pour l'astuce! :)

    Mardi 5 Mars 2013 à 09:12
    refill

    Ohlala depuis le temps que j'avais besoin de mettre des spoilers dans mes blogs :O

    Alors là c'est super chette, merci beaucoup ! :D .

    Jeudi 22 Octobre à 00:27
    lorine19

    Ca marche pas très bien, chez moi...

    Pourtant, je copie le code et tout :o mais je clique dessus, le bouton ne change pas et rien ne se montre




    Vous devez être membre pour poster un message.