Add Stylish JQuery Text Resize Buttons To Posts On Blogger Blogs

I checked out a number of scripts and styles before settling on the one i have for you today.Using some simple jQuery and some colorful icons in a table we can create a stylish text resize section and float them on the corner of posts.The gadget has three buttons to increase text size, decrease text size and a reset button along with the standard text resize icon.

Add Colorful Text Resize Gadget To Blogger Posts

Remember Always Back Up Your Template Before You Make Changes

Step 1. In Your Blogger Dashboard Click Design > Edit Html 

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

</head>

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

Note - If you have previously added jQuery script to your blog remove the code in yellow.

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

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

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

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

Note - The gadget is currently set to only display on post pages to display it on the home page also remove the two parts of code in yellow.

<!-- Start Text re size gadget by  http://createtheblogger.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/AVvXsEirsCi0MmQYbCRqlOWWwlauPfbUWX0oe94OKCzPt5TK42nXIbgvJg9CToRVS72hmohm5ClO4rRLIGEAqMwz20ItkPnDIAiRyQSFytnwo2lWD2XbG-XN_LXZVP2L7SSN8Gw8IHyWrJdDiU8/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/AVvXsEgaGA7xFzT3kb8jCU6IzK0zOjH-kFB6IpYk4eUZT069b_T0KM9fDeMC0DssgG_H_Hp1GTNuak1zG-CauUy0bV1A1lOdC9fZox7ayDWxLN-xP0h2nYR2LuKCWFI3VFTLNrRq_CmiQzK-aPQ/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/AVvXsEgNP52jeQocFZf7Sd5tN5XLXFAriXCiJSXbAIgBzST_b8ztD-ih9k89BakZgynDFaT5NDDWc1MaHl96OXOXeYYa7quwNfwXJtRvlaUx0wSfYEJQ94jLlFVg0nUfxPm3F4ltQU1jfRRGKkg/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/AVvXsEgKY0EyaqN6L47Itpi-8R5aFbjB6haTFNRp-vIyzPvKY7j2_LWe9MPU5cy0ZjrqyC8EULpcyaGX0vk2dpQ8rjunZiYh0xP9kHGYzsTDSyPp-F9nH1naKGZyla7j-V_6F3FeSBOhZoGoruw/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>

</b:if>

<!-- End Text re size gadget by  http://createtheblogger.blogspot.com/  -->

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

<data:post.body/>

Step 7. Now replace <data:post.body/> with the following code:

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

Step 8. Save your template.

That's it you now have some cool and useful text resize buttons on all your posts.Make sure to check out more of our Blogger Gadgets.