samedi 20 novembre 2010

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

Aucun commentaire:

Enregistrer un commentaire