How To Add Text Resizer to Blogger

Posted by Lasantha Bandara on May 29th, 2009 File Under : background, change template, html, widget0 Comment


1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this :

]]></b:skin>

4.Add below code before  ]]></b:skin>  tag.

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

5.Now add below code between  ]]></b:skin>  and  </head>  tags.

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

6.Now again scroll down to where you see this :

<div class='post-header-line-1'/>

7.Add below code immediately after above line.

<span class='textresize'>
Text Size :<a href='javascript:changeFontSize(1)'> [+]</a> | <a href='javascript:changeFontSize(-1)'> [-]</a>
</span>

8.Now save your template and you are done.

File Under : background, change template, html, widget

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.