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­no­te”>  </s­panaround each foot­note text in the HTML edi­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:
<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-­a­li­­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>

Usage

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


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

It will be displayed as follow :
Some texte with a foot­note and some other text (ar­ticle should be in the div).

Commentaires

Comments powered by Disqus