samedi 20 novembre 2010

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"> </spanaround 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.

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).

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 <span class="footnote"> </spanautour de chaque note de bas de page.

Voici comment faire :

Installation
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 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>

Utilisation

Créé un nouveau post avec le contenu HTML suivant :
<div id="articlefootnotefr">
Du texte <span class="footnote">avec une note de bas de page</span> et le reste de l'article qui doit être dans le 'div'.
</div>


<div class="footnoteholder" id="articlenotesfr"></div>
<script type="text/javascript">
//<![CDATA[
formatFootnotes('articlefootnotefr','articlenotesfr');
//]]>
</script>

Il sera affiché comme suit :
Du texte avec une note de bas de page et le reste de l'article qui doit être dans le 'div'.