Text Resizer For Blogger: Resize Font Size in Blog Posts

I came across an excellent jQuery based text resizer script for blogger blogs that lets your visitors to change or resize font size ...



image


I came across an excellent jQuery based text resizer script for blogger blogs that lets your visitors to change or resize font size of the text in your blog posts. This decreases or increases the text size providing your visitors 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!


It can adjust the text size of a particular section of your blogger blog, such as just the primary content area or comment section, or the entire document in general.





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='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<script src='http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi72mg-0Cc4yyndWM-eVAqZ2qZMzjAClgoNAsNPAglkfaWrLSbRyb-PpZgkydNJNeV9Zlfe_91zvOXjP0-FXreLEuCTRbNNdlO_d09VRuxGehrWlsfvn5-0mkHALeV2slVRU3sSxwNxKRs/s400/oranged.png'/>&#160;</a>  <a class='mbt-text-resizer' href='#bigger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Dpe1_96tcS9KMsaYXcYfVz9_MPaXV-zfRn43m_oiazxsW-nIK0lGnaFC8fLRyDdGeHSqo5qiYY64FskwEIHVj1dL8IYyJ9IThXwzW1X4lSQtp4Zvs6BFbQISlr8sMJlOqdl1vP5VVKY/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! :>

COMMENTS

Name

Business,1,Designs,1,How To,4,JSON Feeds,11,Marketing,1,Reviews,1,SEO,30,Settings,1,Technology,49,Web Designing,1,Web Development,1,Widgets,28,Word Press,5,
ltr
item
Tekno Consolas, Technology Knowledge, Business Creation and Development: Text Resizer For Blogger: Resize Font Size in Blog Posts
Text Resizer For Blogger: Resize Font Size in Blog Posts
http://lh6.ggpht.com/-CiQz8NbMOXk/Tpr6oiQxm0I/AAAAAAAAFRU/eOZSqHEb7Xg/image%25255B20%25255D.png?imgmax=800
http://lh6.ggpht.com/-CiQz8NbMOXk/Tpr6oiQxm0I/AAAAAAAAFRU/eOZSqHEb7Xg/s72-c/image%25255B20%25255D.png?imgmax=800
Tekno Consolas, Technology Knowledge, Business Creation and Development
https://www.teknoconsolas.info/2020/04/text-resizer-for-blogger-resize-font.html
https://www.teknoconsolas.info/
https://www.teknoconsolas.info/
https://www.teknoconsolas.info/2020/04/text-resizer-for-blogger-resize-font.html
true
7568988610797598027
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content