• Annonce Faire un spoiler 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!

    Mardi 22 Novembre 2011 à 13:16
    Mia ♫

     merci pour tout ^^

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

    Merci beaucoup pour ce tuto !!!

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

     

    Mardi 20 Décembre 2011 à 09:29
    Charivari

    Bonjour !

    Quelqu'un peut nous montrer à quoi ça ressemble à la fin ?

    Mardi 20 Décembre 2011 à 12:27
    rezemika

    Honte à moi, j'ai oublié de mettre un lien vers un exemple!

    J'en met un dans le tuto

    Edit : snif, je peut pas éditer le tuto...

    Voici un exemple sur mon blog, j'en ai mis plusieurs pour mettre les liens utiles à tous les joueurs sur mon serveur : http://prisma-craft-minecraft.eklablog.fr/liens-et-infos-utiles-p225395

    PS : pour les QR CODE, les gros carrés à flasher sur le téléphone, je les ai faits par ici : minurl.fr

    Ils suffit de mettre un lien URL et sa vous donne 2 choss :

    • Un lien raccourci en minu.me/****, pour mon blog c'est minu.me/5139
    • Un QR CODE à flasher avec l'appli appropriée. Pour les smartphones, c'est MobileTag.

    Je vous dit sa parce que sa peut être assez utile pour doner un lien internet à un ami (ou à nimporte qui d'autre d'ailleurs)

    Jeudi 22 Décembre 2011 à 19:40
    ThomasKowalski

    Merci ! Ca m'a servi pour mon article : http://bit.ly/ArticleSpoilerThomas

     

    Vendredi 23 Décembre 2011 à 14:17
    rezemika

    C'est un plaisir :)

    PS : il est trop cool le thème de ton blog!

    Lundi 9 Janvier 2012 à 19:53
    ForeignFantasy

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

    Jeudi 9 Février 2012 à 19:37
    Pointless Dina

    Chouette, merci ! :) Je viens de trouver une astuce pour changer la couleur du cadre : il faut ajouter "border-color: X " entre "border: 1px inset;" et "margin: 0px;", ce qui donne au final pour le code :

    <div style="margin: 5px 10px 10px;">

    <div class="smallfont" style="margin-bottom: 2px;"><strong>Exemple </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 = 'Click'; }" type="button" value="Click " /></div>

    <div class="alt2" style="border: 1px inset; border-color: X; margin: 0px; padding: 2px;">

    <div style="display: none;">

    <p>TEXTE</p>

    </div>

    </div>

    </div>

    Il faut changer X par le code de ta couleur ou son nom.

    Vendredi 10 Février 2012 à 14:19
    rezemika

    Merci pour l'astuce! :)




    Vous devez être membre pour poster un message.