Si vous avez quelques bases, c'est une petite merveille. Bon d'accord, tout n'est pas utile pour Cowblog. Et surtout, tout n'y est pas adapté. Donc j'ai choisi un script sympathique qui serait peut-être utile à des Cowblogueurs, et je l'ai adapté : les SideNotes, un petit système qui permet d'intégrer des notes dans son article, mais aussi de les dissimuler en un clic. La démo est assez explicite (par contre j'ai pas pu m'empêcher de me servir d'un de mes propres articles).
Collez donc d'abord ce code dans un module HTML libre :
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/130850153467357179/sidenotes.js"></script>
Ensuite, vous devrez écrire votre article sur ce modèle :<a href="#" id="toggle">Cacher les notes</a><br />
<div>
Contenu de l'article <span class="sidenote" title="Contenu de la note en couleur">Mot(s) surligné(s)</span> Suite du contenu de l'article.
</div>
<div></div> est très important, puisque si vous voulez qu'une note se situe dans un paragraphe différent des autres, il faut insérer ce paragraphe entre deux balises <div></div>. En effet, si l'article est un seul et même paragraphe, toutes les notes se situeront au tout début de l'article.. Et ça sera hideux. .arc90_sidenoteLNK { padding: 0 .3em; }
.arc90_sidenoteTXT {
width: 12em;
line-height: 1.2em;
font-size: .8em;
padding: .5em;
}
/* Ci-dessous sont les styles pour les 4 couleurs différentes utilisées dans les notes */
.arc90_sidenoteCLR0 {
border: 1px solid #318484;
background-color: #D1E8E8;
}
.arc90_sidenoteCLR1 {
background-color: #FFF6A9;
border: 1px solid #F2D700;
}
.arc90_sidenoteCLR2 {
background-color: #FFCFCF;
border: 1px solid #FF3535;
}
.arc90_sidenoteCLR3 {
background-color: #CEFFCE;
border: 1px solid #039B00;
}
.arc90_sidenoteCLR4 {
background-color: #456789;
border: 1px solid #039B00;
}
/* Les attributs ci-dessous concernent le flottement alternatif (gauche-droite) */
/* Float the odd numbered sidenotes to the right. */
div.arc90_sidenoteCLR0, div.arc90_sidenoteCLR2 {
margin: 1em 0 1em 1em;
float: right;
}
/* Float the even numbered sidenotes to the left. */
div.arc90_sidenoteCLR1, div.arc90_sidenoteCLR3 {
margin: 1em 1em 1em 0;
float: left;
}