Display text size is dependant on the current font and display settings of your browser in the case of most blogs. Also, some people might have difficuilty in reading your blog (especially on modern screens which support very high resolutions). Therefore, you might be interested to give your visitors the option to dynamically increase/decrease the size of text displayed on your blog.
The feature can easily be added with a least amount on effort provided that you can fulfill the basic pre-requisites. In order to get started, you will have to go to Layout -> Edit HTML. After that make sure to keep a copy of your current template in case you want to revert back. Now, identify each font-size entry that use an absolute size (size in px), and replace them with a relative size (size in em, or %). You can make use of the preview to make sure that you got the right font size.
Now, just after the <body> tag add, <div id='resize-wrapper'> and add </div> just before the closing </body> tag. After you have done this step, add this text above the ]]</skin> tag.
#resize-wrapper {
font-size: 13px;
}Then just after the ]]</skin> tag, add the following text:
<script>
var r;
var current_size = 13;
if (document.all)
r = 'rules';
else if (document.getElementById)
r = 'cssRules';
function change_size(s) {
if (!s)
current_size = 13;
else
current_size = current_size + s;
if (current_size < 10)
current_size++;
else if (current_size > 16)
current_size--;
for (var i = 0;
i < document.styleSheets.length;
i++)
for (var j = 0;
j < document.styleSheets[i][r].length;
j++)
if (document.styleSheets[i][r][j].selectorText
== '#resize-wrapper') {
document.styleSheets[i][r][j].style.cssText =
document.styleSheets[i][r][j].style.cssText
.replace(/\d+/g,current_size);
return;
}
}
</script>
Once you have done that step, save your template and then tick the Expand Widget Templates check box. Now you can add the following text, anywhere on your blog, which enables the text-resize functionality.
<div id='size-control'>
<a href='javascript:change_size(-1)'
style='font-size:16px' title='Reduce Size'>A</a>
<a href='javascript:change_size(0)'
style='font-size:20px' title='Default Size'>A</a>
<a href='javascript:change_size(1)'
style='font-size:22px' title='Increase Size'>A</a>
</div>
Now, save the template once again, and test the functionality, in order to make sure that you got all of it right. Optionally you can make use of CSS to add style attributes to the layout of the #size-control element.
7 comments:
Useful...!!!
I am getting error message when adding script:
XML error message: The content of elements must consist of well-formed character data or markup.
Bariski,
Can you try to key in the markup instead of copying, I have the very same script running on my blog, and did not notice any issues.
You can also view source (from your browser) of my blog, and read through the script.
HTH,
Regards,
Senaka
can you be please more detailed. Also I read this article:
http://labnol.blogspot.com/2006/12/allow-site-visitors-to-change-font.html
This is also not working for me. Any help would be highly appreciated. Thanks in advance.
Regrads
Bhanu Ahluwalia.
Hi Bhanu,
Well what seems to be happening is that you aren't properly writing the code, or due to some reason, the code is not properly read as you expect it to be (which is the cause for the XML error message). If you could let me know what you are trying to do, I might be able to help you.
And, what I said before, was for you to view source (View -> Page Source on FireFox, or you may right click on the page and select 'View Source' in IE). Then you can see the exact code that appears on my blog, and perhaps on any other site that uses a similar approach.
If you are following my post, please do exactly as said in here, and make sure that it works before attempting any modifications, to be on the safe side.
I'm sorry that I'm unable to say whether or whether not the code given on the link does work, and on all browsers.
Regards,
Senaka
It works fine for me, but I did paste the markup BEFORE the ]].
Thx for the code.
thanks but I have found an alternative to it now, look @ my blog now :)
I333
Regards
Bariski
Post a Comment