How to add Add Stylish JQuery Text Resize Buttons To Posts in Blogger

 Here is the tutorial how to Add a text re-size buttons to your blogger posts. Using simple jQuery and colorful icons we can create a text re-size section to blogger posts. This gadget contains three buttons increase text size, decrease text size, and a reset button.

Lets see the step by step procedure:

Back up your template before you make changes.

* After logging into your blogger dashboard go to Template->Edit HTML->Proceed(tick the expand widget templates checkbox)

* Now paste the below code just above/before </head> tag
Note: remove the code in red color if you already added jQuery script to your blog.

 <!-- Start Text re size gadget -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){

//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(&#39;span&#39;,&#39;.section2&#39;);
section = section.join(&#39;,&#39;);

// Reset Font Size
var originalFontSize = $(section).css(&#39;font-size&#39;);
$(&quot;.resetFont&quot;).click(function(){
$(section).css(&#39;font-size&#39;, originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});

// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
});
</script>
<!-- End Text re size gadget -->

* Now find the <div class='post-header-line-1'/> code using Ctrl+F

* Next copy/paste the below code after/below <div class='post-header-line-1'/>

Note: This gadget is currently set to only display on posts only, to display it on the home page you have to remove the two parts of code which are in red color.

<!-- Start Text re size gadget  -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfjwZiR9SlV4IOjDq07nDNJTyVSlk-isOx-Y4V7kMd0h8SUBugZTDmz4xd_f_rQM1EYjk8zrr5Ccz3wRbBVg5V5UagwKdjiG31A0-MhG43zAjP0AJhbjvxQcvvn36qFD7xdnJtEQ55BWE/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnd8QFitrkCbgFMZveCI9DRU9OlF6CpVNA9aKwyACiaSvnmsnKdgV0f8jEqrt6BHcVaQiTIiTVi0Deo3aEfqTDmreAQPBc1Fy7XiBWsLFTfVWbsXrPoKPrvtLuBCJzILwUVT2_wX2EBs/s1600/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD8_IV6UviN8NgoJsVZZm3YpE2G6n4cnK09mPBpNB_rujerIjCtWJBTAAUsvf1ICWhOxPvMwN1h-wfsbdOOrRAtw-hdimMUkx9jOPN2cpb3ACEcoXGgOMW6wIEpGz_gzYWDQzySyww6j4/s1600/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXORJmrDI-KN1uanJYLonlBLgPgzHqfaKO04nKAxqrsQtf_R_dVkh3eQTwJQAjopCdtTXO0d_LyyhDvb2nNsHhyphenhyphenTIA5paEKBPkO-IG3J9-5zLxkXz81piDMp2nR0vIpL74FfVgsrfG-7o/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget -->

* Now find the following code <data:post.body/> and replace it with <span><data:post.body/></span> and save your template.
That's it.