Des notes de bas de pages sur Blogger


Avez vous déjà essayé de faire des notes de bas de page sur Blogger ? Ce n’est pas si facile. Avec l’aide de BrandSpankingNew blog, j’ai mis en place une solution presque satisfaisante qui nécessite quand même de faire un peu d’édition HTML, mais qui reste limitée à l’ajout d’un <s­pan class=”­foot­note”>  </s­panau­tour de chaque note de bas de page.

Voici comment faire :

In­stal­la­tion
Il faut modifier la mise en page du blog et y ajouter un gadget HTML/Javascript au début de la page. Appelez le footnote et coller le code suivant dedans :
<style>
/*
================================================
styling for foot­notes be­­gins here
================================================
*/
/* foot­notes as they orig­i­­nal ap­­pear in­­­line, be­­fore re­­for­­mat­t­ing */
#con­­tent span.­­foot­note {
col­or: #f30;
}
/* foot­note links in text */
#con­­tent a.ftnlink {
ver­ti­­cal-align: su­per;
font-­­size: 0.8em;
}
/* div to hold all re­­for­­mat­t­ed foot­notes */
.foot­note­hold­er {
bor­der-left: 1px sol­id #c­c­c;
margin: 20px 0 50px 0;
padding: 20px 10px;
font-­­size: 0.8em;
line-height: 1.2em;
}
/* div to hold sin­­gle re­­for­­mat­t­ed foot­note */
.foot­note­hold­er di­v.­­foot­note {
margin: 0 0 10px 0;
}
</style>


<script type­­=’­­tex­t/­­javascrip­t’>
//<![C­­DATA[


// ======================================================================
//
//
// for­­mat­­Foot­notes
//
//
// pro­­jec­t: css / javascript foot­notes
//
// au­thor: Tim­o­thy Groves desk [at] brandspank­ingnew.net
// ver­­sion: 1.0
//
// lan­guage: javascript
// re­quires: noth­ing
//
// test­ed on: Sa­­fari 2.0 Mac / FF 1.5 Mac / Opera 9 Mac
//
// his­­to­ry: 26.01.2006 - cre­at­ed
//
// ======================================================================
var ar­ti­cles = 0;


func­­tion for­­mat­­Foot­notes(­­con­tID,noteI­D)
{
// check for DOM ca­­pa­­bil­i­ties
if (!­­doc­u­­men­t.getEle­­men­t­ById)
re­­turn false;


var cont = doc­u­­men­t.getEle­­men­t­ById(­­con­tID);
var note­hold­er = doc­u­­men­t.getEle­­men­t­ById(noteI­D);
var spans = con­t.getEle­­ments­By­­Tag­­Name(“s­­pan”);


var notes = 0;
ar­ti­­cles++;


for (i=0;i<s­­pan­s.length­­;i++)
{
if (s­­pan­s[i].­­class­­Name == “foot­note”)
{
notes++;


// get con­­tent of span
var noteN­ode = span­s[i].­­clo­­neN­ode( true );


// re­­move css styling
noteN­ode.­­class­­Name = “”;


// cre­ate a new div to hold the foot­note
var newEle = doc­u­­men­t.cre­a­teEle­­men­t( “di­v” );


newEle.ap­pend­Child( doc­u­­men­t.cre­ate­­TextN­ode( notes + “. ” ) );
newEle.ap­pend­Child( noteN­ode );


// add back­­link
blink = doc­u­­men­t.cre­a­teEle­­men­t(“a”);
blink.href = “#ftnlink”+ar­ti­­cles+”_”+notes;
blink.ap­pend­Child( doc­u­­men­t.cre­ate­­TextN­ode( ” [back­­]” ) );
newEle.ap­pend­Child( blink );


note­hold­er.ap­pend­Child( newEle );


// add id & style
note­hold­er.lastChild.id = “ft­n”+ar­ti­­cles+”_”+notes;
note­hold­er.lastChild.­­class­­Name = “foot­note”;


// in­­sert link in­­­to span
var newEle = doc­u­­men­t.cre­a­teEle­­men­t( “a” );
newEle.href = “#”+noteI­D;
newEle.ti­­tle = “show foot­note”;
newEle.id = “ftnlink”+ar­ti­­cles+”_”+notes;
newEle.­­class­­Name = “ftnlink”;


newEle.ap­pend­Child( doc­u­men­t.cre­ate­TextN­ode( notes ) );


// em­p­­ty span
while (s­­pan­s[i].childNodes.length)
span­s[i].re­­moveChild( span­s[i].­­firstChild );
var su­per = doc­u­­men­t.cre­a­teEle­­men­t( “sup” );
su­per.ap­pend­Child(newEle)
span­s[i].ap­pend­Child( su­per );
}
}
}
//]]>
</scrip­t>

Utilisation

Créé un nouveau post avec le contenu HTML suivant :
<div id=”ar­ti­­cle­­foot­note­fr”>
Du texte <s­­pan class=”­­foot­note”>avec une note de bas de page</s­­pan> et le reste de l’ar­ti­­cle qui doit être dans le ‘di­v’.
</­di­v>


<div class=”­­foot­note­hold­er” id=”ar­ti­­clenotes­fr”></­di­v>
<script type­­=”­­tex­t/­­javascrip­t”>
//<![C­­DATA[
for­­mat­­Foot­notes(‘ar­ti­­cle­­foot­note­fr’,’ar­ti­­clenotes­fr’);
//]]>
</scrip­t>

Il sera affiché comme suit :
Du texte avec une note de bas de page et le reste de l’ar­ti­cle qui doit être dans le ‘di­v’.

Comments

Comments powered by Disqus