Change Or Edit Font Sizes On Blogger Blogs

By -

We make blogs for visitors. The main goal of a blogger is to provide all that a reader wants. one of them might be the default font size. Not all readers like the default font size on blogger blogs. Few want a bit bigger font size, so that they can read them well wearing their glasses. And being a responsible blogger, we should mind all their needs. So, lets know how to change or edit font sizes on blogger blogs. In this way they can make the font sizes either smaller or bigger.

All browsers have a in built option of changing the font size. You can hold down Ctrl key and scroll your mouse wheel at the same time to change the font size. You can also hold down Ctrl key and press either + or - to increase or decrease font sizes respectively. This will increase or decrease the font size. But everyone are not aware of this. So, we should provide a special option in our blog for changing font sizes.

Here we will add a javascript code in our blogspot blog. This javascript code needs some template edit. But it will add a Dynamic Font Size functionality and it will start showing two icons above our blog posts. From that menu one can change the font size according to his needs. Check out the screen shot below.

change font size on blogger blogs

Now lets know how to implement this javascript on blogger blogs.

1. Login to your Blogger blog’s dashboard

2. Go to Layout or Template and click on Edit HTML

3. Search for <head> tag and put the following code just below the <head> tag.

<script language="JavaScript" type="text/javascript">
function changeFontSize(inc)
{
var p = document.getElementsByTagName('p');
for(n=0; n<p.length; n++) {
if(p[n].style.fontSize) {
var size = parseInt(p[n].style.fontSize.replace("px", ""));
} else {
var size = 12;
}
p[n].style.fontSize = size+inc + 'px';
}
}
</script>

4. Now click on Save Template.

5. Search for ]]></b:skin> code in your template and add the following code just above it.

.textresize {
padding-left:20px;
padding-top:5px;
}

6. Now again search for <div class=’post header-line-1> in your template. Once you find it, add the following code just after it.

<a href="javascript:changeFontSize(1)">Increase Font Size</a>
<a href="javascript:changeFontSize(-1)">Decrease Font Size</a>

7. Now click on Save Template and you are done.

This above step will allow your visitors to change the font size according to their wish on your blogspot blogs. You can also change the lines saying Increase Font Size or Decrease Font Size from step no. 6 to whatever you want.

Soumya is the admin and founder of Techcular. He loves to discover and learn new things on Internet. You can find him writing on his personal blog few times.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

What is 7 + 11 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)