LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets » How To Add Text Resizer Option For Blogger Posts?

How To Add Text Resizer Option For Blogger Posts?

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.

Recommended For You:
How To Make Your Blogger Posts Images Responsive?

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.

Recommended For You:
Super Cool Blogspot/Blogger Page Navigation Widget

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.

You Like It, Please Share This Recipe With Your Friends Using...

  

8 Responses to “How To Add Text Resizer Option For Blogger Posts?”

  1. Great post! Thanks for sharing your knowledge. Really informative content for my project writing. Expecting more blog articles relating to different aspects.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.

  2. Great article! Thank you for sharing this with us.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.

  3. Great Article. You have beautifully articulated it. Readers revisit only if they found something useful. So the core formula is to provide value to the readers. Also, Title is very important.

    Thanks & Regards

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.

  4. Waseer says:

    Awesome post! very informative and useful post Thanks for sharing.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article. Yes, We will cover that topic too.

Leave a Reply

Your email address will not be published. Required fields are marked *