How To Add jQuery Text/Font Size Resizer to blogger

Posted by Lasantha Bandara on August 21st, 2009 File Under : jquery, widget4 Comments

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

/* resizeFont
*/
#resizeFont{
text-align:right;
margin-right:10px;
}

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

7.Now Click on "Save Templates"

8.Now go to Layout-->page elements and Click on 'Add a Gadget'.

9.Now Select 'HTML/Javascript' and add the code given below and click save.

<div id='resizeFont'>
<input id='large' type='button' value='A+'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>

Now you are done.

Demo For This Tutorial

File Under : jquery, widget

4 Responses to “How To Add jQuery Text/Font Size Resizer to blogger”

  1. Moderator says:

    It doesn't work as it should be. It only resizes font in sidebar instead of blog post!!! help!!!

  2. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    I test the code again and it work fine for blogger post and also for sidebar.Check it again.See the demo:

    http://textresizer.blogspot.com/

  3. Moderator says:

    thanks... it works now! 😉

    anyway, i was wondering if there's a way to make a random post with thumbnails? Cause all i found is related post, not random post.

  4. विशाल तेलंग्रे says:

    Hello sir, I've tried all these steps here, but I yet not got succeed in this!
    plz tell me any solution on that!
    my blog is here.
    sorry to say, but my blog's language is Marathi, regional language of Maharashtra, India. 🙁

Leave a Reply

Your email address will not be published.

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