Easy footnotes on blogger


Have you ever wanted to simplify the use of footnotes on blogger ? With the help of BrandSpankingNew blog I managed to set up a not so complicated solution. Of course you still have to do some sort of HTML, but is limited to putting a <s­pan class=”­foot­note”>  </s­panaround each foot­note text in the HTML ed­i­tor.

Here after you’ll see how to set up your blog, and the minimal template needed for each new blog post.

Installation

Change your blog layout so as to add an HTML/Javascript gadget at the beginning of your page. You will call it footnote and past the following code in it:
<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>

Usage

Create a new blog post, with the following content:
<div id=”ar­ti­­cle­­foot­note”>
Some texte <s­­pan class=”­­foot­note”>with a foot­note</s­­pan> and some oth­­er text (ar­ti­­cle should be in the di­v).
</­di­v>


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

It will be displayed as follow :
Some texte with a foot­note and some oth­er text (ar­ti­cle should be in the di­v).

Comments