jQuery Text Resize Buttons For Blogger

This gadget is Text Resize Gadget which can make your posts text larger and larger. This gadget is positioned at the right upper corner of the post. It look great and uses a jquery for it. Having it is just for the convenience of the the viewer. So that the viewer can adjust the text as per his/her requirement.This gadget is originally made by the very famous Paul Crowe founder of Spice up your blog.

View Demo

Steps To Add This Resize Buttons To Blogger

• Login to your Dashboard.
• Go to Template-->Edit Html.
• Click on "Expand the Widgets"
• Find for </head> tag.
• Copy and paste the below code above/before it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/><script>$(document).ready(function(){var section = new Array(&#39;span&#39;,&#39;.section2&#39;);section = section.join(&#39;,&#39;);
var originalFontSize = $(section).css(&#39;font-size&#39;);$(&quot;.resetFont&quot;).click(function(){$(section).css(&#39;font-size&#39;, originalFontSize);});$(&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;});$(&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>

• Now find for the below code in html.

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

• Copy and paste the below code just after/below the <div class='post-header-line-1'/>.

<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/AVvXsEip2FIyyZYrzSS3vVADunj-MK__GG2dAFYHQAFI5TP3BFFpU6GHAVZfT4M_CJ7ea4v29fDXFcT73vaSYk_iqjt94sr5Ac9pTn_SYpUo6OD1Na4xlQ_-jA7hEgkg_18zmkwjMQ31eugOL6M/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/AVvXsEgQXssfmPDBzP_tnYcZvIuaDdvCAgmHqHAAF44C7zbzxJcwLAeL5FZg3uOHPK2sgZy0ttH-l-0iS0a34SUNSQFKpwtL7I_hO0vwx-HIBW2MvFOYY4uu-ktlc-20YeyvCl2C5pFxuTTbd74/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/AVvXsEibZEKTZfQ9sjzZbr2RYrY30WLYDQedKDgXz0irFGymHQCmC5v0tmZVkf3xafDu2WsYBOhrDIeabR7mBt3eIZPS0kVoZWsMulKUBD_PqZOjVinrMZwP4XgK6K2DB_wt1y8eMz0a2VZLlZY/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/AVvXsEgwwF11Z-qTMsYBTjidqh5gNpYre1TA3dc2jDfOJWIYgMzgqdonWvxlzEMC4icHVXrFu9PPdHIC8fGEClKxD5QHICTsHyIlPMCL0x5OSTmLvef9oNzQjd7qbOftSyqSEcZF6YAcomk4LqQ/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table></b:if>

• Now Find for the below given code.

<data:post.body/>

• Replace <data:post.body/> with the below code.

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

• Now, Click on Save the Template.

It's Done.

Categories: Blogger Tricks , jQuery