How To Add Text Resizer Option For Blogger Posts?

OK, so you have a blog or website which has daily users of a different kind. Let’s say readers who prefer large fonts and readers who prefer small fonts for reading. So using a default size font won’t make them happy.

We came across an excellent jQuery based text resizer script for blogger blogs that let your visitors change or resize the font size of the text in your blog posts. This decreases or increases the text size providing your visitors with better readability. It’s useful especially to those with weak eye sights and for those with display issues.

Now there are many snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1.) JQuery File Added.
2.) A JavaScript Little Snippet And External File.
3.) Basic CSS Added.
4.) Simple And Quick Load.
5.) Can Work With Any Browser.

How To Add In Blogspot?

Please follow this tutorial very carefully to avoid errors. We will start with implementing HTML, Javascript and CSS then move onto the final step. Just follow this three-step to insert a reading progress bar in a blogger.

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search ]]></b:skin> Code.
7.) Now “Copy” The Below Code And “Paste” It After Upper Code.

<style type='text/css'>
/*----- Text Resizer By MBT ------*/
.controlstyle a{outline:none;}
.controlstyle a img{border-width:0;}
.controlstyle a.selectedcontrol img{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='https://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.js' type='text/javascript'/>
<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>

8.) Next search for this code, <data:post.body/>
9.) Now “Copy” The Below Code And “Paste” It BeforeUpper 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://2.bp.blogspot.com/-hcriotbuHqQ/TprlX1VeBII/AAAAAAAAFRA/h331qxRqqxo/s400/oranged.png'/>&#160;</a>  <a class='mbt-text-resizer' href='#bigger'><img src='https://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>

10.) Click “Save Template” And Done.

Customization:

Edit your CSS if you are a pro and want more customization. Delete the last code section of point 9 BOLD lines of code to make it visible on home page also if you want. By default, Visit any of your posts to see it appearing just below the post title.

Troubleshooting the Errors

Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Last Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your blogger template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problem please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in the next article.