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 <span class=”footnote”> </span> around each footnote text in the HTML editor.
Here after you’ll see how to set up your blog, and the minimal template needed for each new blog post.
It will be displayed as follow :
Some texte with a footnote and some other text (article should be in the div).
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 footnotes begins here
================================================
*/
/* footnotes as they original appear inline, before reformatting */
#content span.footnote {
color: #f30;
}
/* footnote links in text */
#content a.ftnlink {
vertical-align: super;
font-size: 0.8em;
}
/* div to hold all reformatted footnotes */
.footnoteholder {
border-left: 1px solid #ccc;
margin: 20px 0 50px 0;
padding: 20px 10px;
font-size: 0.8em;
line-height: 1.2em;
}
/* div to hold single reformatted footnote */
.footnoteholder div.footnote {
margin: 0 0 10px 0;
}
</style>
<script type=’text/javascript’>
//<![CDATA[
// ======================================================================
//
//
// formatFootnotes
//
//
// project: css / javascript footnotes
//
// author: Timothy Groves desk [at] brandspankingnew.net
// version: 1.0
//
// language: javascript
// requires: nothing
//
// tested on: Safari 2.0 Mac / FF 1.5 Mac / Opera 9 Mac
//
// history: 26.01.2006 - created
//
// ======================================================================
var articles = 0;
function formatFootnotes(contID,noteID)
{
// check for DOM capabilities
if (!document.getElementById)
return false;
var cont = document.getElementById(contID);
var noteholder = document.getElementById(noteID);
var spans = cont.getElementsByTagName(“span”);
var notes = 0;
articles++;
for (i=0;i<spans.length;i++)
{
if (spans[i].className == “footnote”)
{
notes++;
// get content of span
var noteNode = spans[i].cloneNode( true );
// remove css styling
noteNode.className = “”;
// create a new div to hold the footnote
var newEle = document.createElement( “div” );
newEle.appendChild( document.createTextNode( notes + “. ” ) );
newEle.appendChild( noteNode );
// add backlink
blink = document.createElement(“a”);
blink.href = “#ftnlink”+articles+”_”+notes;
blink.appendChild( document.createTextNode( ” [back]” ) );
newEle.appendChild( blink );
noteholder.appendChild( newEle );
// add id & style
noteholder.lastChild.id = “ftn”+articles+”_”+notes;
noteholder.lastChild.className = “footnote”;
// insert link into span
var newEle = document.createElement( “a” );
newEle.href = “#”+noteID;
newEle.title = “show footnote”;
newEle.id = “ftnlink”+articles+”_”+notes;
newEle.className = “ftnlink”;
newEle.appendChild( document.createTextNode( notes ) );
// empty span
while (spans[i].childNodes.length)
spans[i].removeChild( spans[i].firstChild );
var super = document.createElement( “sup” );
super.appendChild(newEle)
spans[i].appendChild( super );
}
}
}
//]]>
</script>
Usage¶
Create a new blog post, with the following content:<div id=”articlefootnote”>
Some texte <span class=”footnote”>with a footnote</span> and some other text (article should be in the div).
</div>
<div class=”footnoteholder” id=”articlenotes”></div>
<script type=”text/javascript”>
//<![CDATA[
formatFootnotes(‘articlefootnote’,’articlenotes’);
//]]>
</script>
It will be displayed as follow :
Some texte with a footnote and some other text (article should be in the div).
Comments