October 16, 2011

Widgets

Fluid Text Resizer: Adjust Font Size in Blog Posts


image
I came across an excellent jQuery based text resizer script that lets your visitors to adjust, change, resize font size of your blog post. This decreases or increases the font size providing your readers with better readability. Its useful especially to those with weak eye sights and for those with display issues. Fluid Text Resizer widget has been designed by mybloggertricks and script is adopted from dynamic drive. It will appear just below your post titles and will allow your visitors to toggle the text size to their comfort. Text size on your entire blog will be zoomed in and zoomed out. From sidebars till footer, all text will be maximized. It also includes a Reset link that toggles the default font level. Lets get to work then!


Live Demo

Add Text Resizer Widget To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for this,

]]></b:skin>
     5.    Just below it paste the following code,
<style type='text/css'>

/*----- Text Resizer By MBT ------*/
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}
.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}
.controlstyle a.selectedcontrol img{ /*selected control&#39;s image*/
border-bottom:4px solid darkred;
}
.mbt-text-resizer{
font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
}

#mbt-text-resizer-container {
margin:4px 0px;
padding:4px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd; width:100%;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mybloggertricks.googlecode.com/files/text%20resizer.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var mytextsizer=new fluidtextresizer({
    controlsdiv: &quot;sizecontroldiv&quot;, //id of special div containing your resize controls. Enter &quot;&quot; if not defined
    targets: [&quot;body&quot;], //target elements to resize text within: [&quot;selector1&quot;, &quot;selector2&quot;, etc]
    levels: 10, //number of levels users can magnify (or shrink) text
    persist: &quot;session&quot;, //enter &quot;session&quot; or &quot;none&quot;
    animate: 200 //animation duration of text resize. Enter 0 to disable
})
</script>

    6.   Next search for this code,
<data:post.body/>
     7.   Just above it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-text-resizer-container'>
<div class='controlstyle' id='sizecontroldiv'>
<font style='color:#666; font-weight:bold;'>Adjust the font size:</font>  <a class='mbt-text-resizer' href='#smaller'><img src='http://2.bp.blogspot.com/-hcriotbuHqQ/TprlX1VeBII/AAAAAAAAFRA/h331qxRqqxo/s400/oranged.png'/>&#160;</a>  <a class='mbt-text-resizer' href='#bigger'><img src='http://3.bp.blogspot.com/-ZCdAqxALWFQ/TprlYKwK4QI/AAAAAAAAFRI/YBkNpOf3AHo/s400/orangei.png'/>&#160;&#160;</a><a class='mbt-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Reset &#8597;</a>
</div>
</div>
</b:if>
You can change the text being displayed if you wish.
     8.      Save your template and you are all done!
Visit any of your post to see it appearing just below the post title. I have turned off the widget display on homepage. If you want the widget to be displayed on homepage too then simply delete the purple lines from the code in step#7.

Need help?

Do let me know if you wish to change anything. I will publish more color variations and styles of this gadget today so stay tune. Feel free to ask anything which is still un clear for you. Peace buddies! :>


If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

24 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Because both of you forgot to upload the javascript: :)
    http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.js

    ReplyDelete
  2. i was talking about your DEMO link Bro ...

    ReplyDelete
  3. it gives error while saving the template


    http://internetricks4u.blogspot.com/

    ReplyDelete
  4. @Malik


    Make sure you are not directly pasting the Javascript coe inside your template. Don't do that. simply replace src='fluidtextresizer.js' with the link of your uploaded javascript.

    @haider
    Shuker it does now. :)

    ReplyDelete
  5. It feel nice to read such a fab article ..its helps a lot

    Social Media Expert
    thanks for sharing , waiting for your next edition

    ReplyDelete
  6. the link : http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.js can not be access..
    i found that link 403 Forbidden.. please recheck the link again..

    thanks

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. I do not know where I should put the javascript on my blog, I ask for help.

    ReplyDelete
  9. well, I did right till the step 5, but could not find the step 6 text in the edit HTML section of the template... where do I look for it?

    ReplyDelete
  10. Thanks for the post and the code..:)
    regards
    http://www.gotechnosavvy.com

    ReplyDelete
  11. Hello,

    I searched a long time and a bit tired too.And yours is very helpful to me.Thank you very much for the post .

    ReplyDelete
  12. Hi ,
    I did this exactly and i got it .But now i dont find the widget. And also i cant able to find this . I am a new blogger.can you please help me?
    Thankyou

    ReplyDelete
  13. NOT WORKING...........Update this code brother.........

    ReplyDelete
  14. araba oyunları araba yarışı yemek oyunları matematik oyunları 5. sınıf yarış oyunları araba park etme oyunları kızdırma oyunları kaşif dora kağıt oyna winx oyunları kamyon oyunları asker oyunları

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. wow... awsome bro.. i made a blog and im thinking that it should b abt online earning coz i hav lot of data abt that.. but i dint know how shud i design it or what shud it look like.. would u help me.create-store-cards

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |