How to Add Stylish JQuery Text Resize Buttons in All Post

Hey i am back with my greate new amazing article How to Add Stylish JQuery Text Resize Buttons in All Post in Blogs, Some blogs contain small character in post . So, this gadget for those who have small post characters , wording.

Now Take a look at the demo below given :

 

Add Colorfuls Text Resize Gadget To Blogger Posts :

Note : Keep in mind First , backup yours Template.

#Step 1. In Yours Blogger Dashboard Click Design >> Edit Html's

#Step 2. Now Find the following piece of code in your blogs Htmls : (Click the Ctrl and F for a search bar to help find the code)

</head>

#Step 3. Now Copy and Paste the following code Directly Above // Before </head>

Note : If you have previously added jQuery scripts to your blog remove the code in yellow given below.

<!-- Start Text re size gadget by http://www.newfacebookchat.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 http://www.newfacebookchat.com -->

#Step 4. Now Find the following piece of code in your blogs Htmls : (Click the Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

<div class='post-header-line-1'/>

#Step 5. And Now Copy And Paste This Code Directly Below / After <div class='post-header-line-1'/>

Note -: The gadgets is currently set to only display on post pages to display it on the homepages also remove the two parts of code in yellow.

<!-- Start Text re size gadget by http://www.newfacebookchat.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/AVvXsEgrJNEoxBQJm6bQ6FNB61tSM2hOoSG80RknC_qkThKgN3pT03g-IKei-ujHVqo4-BODmgObNL-AFd1zTnZxznGMCfDt_sBf99_Tb7eAGIl0DxzU3MC7KhpI17wVQ3cMRkE1TilF9fYLd6A/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/AVvXsEhFejow6F0hH3Bf3Rs-wKdcJ3gVztSO_5hNrtkTmlm_NCC7kQiEJlY_ebH8korQNyDBRqj-iizrnLwAz3HbRjWB4RwAxIYUbngWWhgQkAzZk8oqLC0aRUTiOkRkRqhVrB9ox1xS4XvQ1-0/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/AVvXsEj7hyphenhyphenDsPzEO405BNMLXjQYv0lUPugHU8-vrVk8hyt4kFSyBULzDV21kBEgW6XoAs2UXWYvr9YjHhswt7OlTUpyy0HLsjFIG1DneIYlvQWjuwmcUJ1ovc_Bofnfv8QnskFgpFKwXvuCU7kE/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/AVvXsEhEDp1Aql9xuTyvgEeXEhFIb-OpKQQCiFeBFX4qSUohaRSILujPTRcynb4ValTshn2gMm_-GBCoC-vbbmbFihYNw0qX6j-AdbNzS6VJQ5iBhphUeKAb7Q4ZlMHVCj9YbIE_ic6OEnrU4ZA/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget by http://www.newfacebookchat.com -->

#Step 6. Then , Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

<data:post.body/>

# Step 7. Now replace <data:post.body/> with the following codes given below :

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

#Step 8. Thats it ,Save your template. Its Done.