Stylish JQuery Text Resize Buttons For Your Blogger

   This is a special effect for your blogger. It can increase your blog text size when we are clicking on increase button.  After add this widget your blog shows three button plus, minus and resize. Green plus button to increase your text size and Red minus button to decrease your text size. You can resize your text with 3rd option.This is  useful program. If you want to add in your blogger. Follow this post..


Log In to your Blogger dashboard.

• Go to Template Option.

• Click on Edit HTML .

• Tick Expand Widget Template option above

• Find (CTRL+F)  </head> tag.

• Copy and paste below code above </head> tag.

<!-- Start Text re size gadget by www.techtoones.blogspot.com -->
<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 by www.techtoones.blogspot.com –>

• Then Find(CTRL+F)  <div class='post-header-line-1'/> tag.

• Copy below code and paste it directly below  <div class='post-header-line-1'/> tag.

<!-- Start Text re size gadget by www.techtoones.blogspot.com -->
<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/AVvXsEgt61aahXXzoRq35FzM8YrVBroZHdpHWrHnEmyRBloXgL6nB-zfIebLCt0o3oQZr8TuGNdiDS1VsUyw5-yRLAVmEOAf7yLNCMuIqCy5YK3uoADYZiKiwi5LpUUP_zfurH_CXwSHJvSMfYg/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/AVvXsEgJ6g-lnR6rK2OAku2A3PEdLnwDASMu2M3GCcnF2g52516_M-nD_-qOtWOgkDm4XVtoAsN17Nn8Z1ZBWAQF9hF464c-Uf5DNQv-lLgbEjR7W37djD7ErxE-tb8wsjfInVEy1YUK3AJdGM8/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/AVvXsEgMtS3uoPJL1TR4FZY-9qqkZ7KCRFymOtPIg2yMf6cYfS3b-1KP0MR_mUWEb76wNhDml4fgCoesGa8BzVggPwPQV17bM3Z2qDGNX_fahyphenhyphenLFvU6lLa5P7R3YluQPvr1DdNSeGuOtejpce9I/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/AVvXsEgbLJyH-P34BrovJcNYg4BLghebn5Dsb4B1NMOTGd6WxljHnGsZh7jOXR1ZoZECk3T_1-UO-bab6Ca8lBk7UwfK0GV0ta6lYvjVV6GPLDcGnd1kG5FYBRQOVK1qzvVyAXCW36DaNq5f7G0/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget by www.techtoones.blogspot.com –>

• Again Find(CTRL+F) <data:post.body/> and it replace with below code.

<span><data:post.body/></span>

• Save your template.

Leave a comment …….. If links are not working………………….

Posted in: Blogs and Websites, Tips N Tricks, Tricks + Hacks