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­no­te”>  </s­panau­tour de chaque note de bas de page.

Voici comment faire :

Ins­tal­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 :
<s­ty­­le>
/*
================================================
sty­­ling for foot­­notes be­­gins here
================================================
*/
/* foot­­notes as they ori­­gi­­nal ap­­pear in­­li­­ne, be­­fore re­­for­­mat­­ting */
#content span.­­foot­­note {
co­­lor: #f30;
}
/* foot­­note links in text */
#content a.ftn­­link {
ver­­ti­­cal-ali­­gn: su­­per;
font-si­­ze: 0.8em;
}
/* div to hold all re­­for­­mat­­ted foot­­notes */
.foot­­no­­te­­hol­­der {
bor­­der-left: 1px so­­lid #ccc;
mar­­gin: 20px 0 50px 0;
pad­­ding: 20px 10px;
font-si­­ze: 0.8em;
line-height: 1.2em;
}
/* div to hold single re­­for­­mat­­ted foot­­note */
.foot­­no­­te­­hol­­der div.­­foot­­note {
mar­­gin: 0 0 10px 0;
}
</­s­ty­­le>


<s­­cript ty­­pe=’text/­­ja­­vas­­cript’>
//<![C­­DA­­TA[


// ======================================================================
//
//
// for­­mat­­Foot­­notes
//
//
// pro­­ject: css / ja­­vas­­cript foot­­notes
//
// au­­thor: Ti­­mo­­thy Groves desk [at] brand­s­pan­­kin­­gnew.­­net
// ver­­sion: 1.0
//
// lan­­gua­­ge: ja­­vas­­cript
// re­­qui­­res: no­­thing
//
// tes­­ted on: Sa­­fa­­ri 2.0 Mac / FF 1.5 Mac / Ope­­ra 9 Mac
//
// his­­to­­ry: 26.01.2006 - crea­­ted
//
// ======================================================================
var ar­ticles = 0;


func­­tion for­­mat­­Foot­­no­­tes(­­con­­tID,­­no­­teID)
{
// check for DOM ca­­pa­­bi­­li­­ties
if (!­­do­­cu­­ment.­­ge­­tE­­le­­ment­­ById)
re­­turn fal­­se;


var cont = do­­cu­­ment.­­ge­­tE­­le­­ment­­ById(­­con­­tID);
var no­­te­­hol­­der = do­­cu­­ment.­­ge­­tE­­le­­ment­­ById(­­no­­teID);
var spans = cont.­­ge­­tE­­le­­ments­­By­­Ta­­gNa­­me(“s­­pan”);


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


for (i=0;i<s­­pans.­­leng­­th;i++)
{
if (s­­pans[i].­­class­­Name == “foot­­no­­te”)
{
no­­tes++;


// get content of span
var no­­te­­Node = spans[i].­­clo­­ne­­No­­de( true );


// re­­move css sty­­ling
no­­te­­Node.­­class­­Name = “”;


// create a new div to hold the foot­­note
var ne­­wEle = do­­cu­­ment.­­crea­­teE­­le­­ment( “div” );


ne­­wEle.ap­­pend­­Child( do­­cu­­ment.­­crea­­te­­Text­­No­­de( notes + “. ” ) );
ne­­wEle.ap­­pend­­Child( no­­te­­Node );


// add ba­­ck­­link
blink = do­­cu­­ment.­­crea­­teE­­le­­ment(“a”);
blink.href = “#ftn­­link”+ar­­ti­­cles+”_”+­­no­­tes;
blink.ap­­pend­­Child( do­­cu­­ment.­­crea­­te­­Text­­No­­de( ” [ba­­ck]” ) );
ne­­wEle.ap­­pend­­Child( blink );


no­­te­­hol­­der.ap­­pend­­Child( ne­­wEle );


// add id & style
no­­te­­hol­­der.­­last­­Child.id = “ftn”+ar­­ti­­cles+”_”+­­no­­tes;
no­­te­­hol­­der.­­last­­Child.­­class­­Name = “foot­­no­­te”;


// in­­sert link in­­to span
var ne­­wEle = do­­cu­­ment.­­crea­­teE­­le­­ment( “a” );
ne­­wEle.href = “#”+­­no­­teID;
ne­­wEle.­­title = “show foot­­no­­te”;
ne­­wEle.id = “ftn­­link”+ar­­ti­­cles+”_”+­­no­­tes;
ne­­wEle.­­class­­Name = “ftn­­link”;


ne­wEle.ap­pend­Child( do­cu­ment.­crea­te­Text­No­de( notes ) );


// emp­­ty span
while (s­­pans[i].­­child­­Nodes.­­leng­­th)
spans[i].­­re­­mo­­ve­­Child( spans[i].­­first­­Child );
var su­­per = do­­cu­­ment.­­crea­­teE­­le­­ment( “sup” );
su­­per­.ap­­pend­­Child(­­ne­­wE­­le)
spans[i].ap­­pend­­Child( su­­per );
}
}
}
//]]>
</s­­cript>

Utilisation

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


<div class=”­­foot­­no­­te­­hol­­der” id=”ar­­ti­­cle­­no­­tes­­fr”></­­div>
<s­­cript ty­­pe=”­­text/­­ja­­vas­­cript”>
//<![C­­DA­­TA[
for­­mat­­Foot­­no­­tes(‘ar­­ti­­cle­­foot­­no­­te­­fr’,’ar­­ti­­cle­­no­­tes­­fr’);
//]]>
</s­­cript>

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

Commentaires