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”> </span> autour 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 :
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’.
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’.
Commentaires