Saturday, 16 February 2008

Add image in the blogger link list

I wanted to add link on my blog to blogs I read regularly.

Ok, I've found the Link List module, I add it. Add few link I like...

But, some of the blogs are in French other in English...

So I've obviously tried to insert some <img> or even <span>... nothing works...

So I used the hard way :

I've modified my template to add prototype + script.aculo.us


<head>
...
<script src='http://mansonthomas.com/js/lib/prototype.js' type='text/javascript'> </script>
<script src='http://mansonthomas.com/js/lib/scriptaculous.js' type='text/javascript'> </script>
<script src='http://mansonthomas.com/js/blogger.js' type='text/javascript'> </script>
</head>


I used the text inside the <a> as a prototype template.

For example :

#{fr} Rank My Day | Référencement


And wrote this code to change #{fr} into a nice flag (with many thanks to www.famfamfam.com for his works on all great icons)


function linkListCustomize()
{
$$('#LinkList1 a').each(function(item){
if(item.innerHTML.indexOf('#{')>-1)
item.innerHTML = (new Template(item.innerHTML).evaluate({en:'<img class="clickable" src="http://mansonthomas.com/myicons/flag/gb.png" alt="English written website"/>',fr:'<img class="clickable" src="http://mansonthomas.com/myicons/flag/fr.png" alt="French written website"/>'}));
});
}
function init()
{
linkListCustomize ();
}
/*taken from www.directwebremoting.org */
function callOnLoad(init)
{
if (window.addEventListener)
window.addEventListener("load", init, false);
else if (window.attachEvent)
window.attachEvent("onload", init);
else
window.onload = init;
}
callOnLoad(init);


You can have a look on http://mansonthomas.com/js/blogger.js i've added some customization of the <pre> html tag.
I'm working on syntax highlighting, but i'm having some trouble with cross domain ajax...

No comments: