Add Stylish JQuery Text Resize Buttons To Posts On Blogger Blogs

I have had a few requests for a tutorial on adding text re size buttons to posts on Blogger.Back in 2009 i published a gadget that allowed visitors to change all the text size and fonts on your blog including headings, sidebar text and post text.But this time i wanted a gadget that onlu changed the text in the posts.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.

Take a look at the demo below :

 

Add Colorful Text Resize Gadget To Blogger Posts

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template 

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 - How To Find Code In Blogger Template Template) 

</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://www.spiceupyourblog.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.spiceupyourblog.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 - How To Find Code In Blogger Template Template) 

<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://www.spiceupyourblog.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/AVvXsEj6TW1riHsj3_yPNEOMssfeIYUiWz6NEZ1f1M7ff8oCbh9-jDmHjjib9fu2RL7Btxnd_woIMai80AdQsR-txT-1rRObBmVREmhVEMOC338cPzZSlCbNuTq8jK39kyADdE1hZ3g4t4Z3cSY/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/AVvXsEg3xQzlYTyOwuD0YSuPfGQ7tqJoLz69du5ANz6_RwM1ZBG8q9qRwf21oXX5mQaga_ylzCR41xjkZZKrPaJUdmwn0EMQIx6iDB1HDEioL48b_eJvNV2lFdbdtIF-klb-OVubYuCCJUXBTNU/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/AVvXsEg4tFEhDWATeZqPfld10HD0FdRytyEmsSusE9NmhgI31kqzJmnfT5J8XaByKm_-VFdP_y3yCqZkBAcPoNejCziNn5hZdnYLWUHk-iD69VSPrSH7Yd7idmpUY79DL2q8HTXFxisrbzfXkNc/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/AVvXsEgpK6C5_ImCTmujx3RpUKsLijNhStuBf69SPASxojGpppzyqhhb6Sj3nU2zcWRNmypqc_o7P6pCcWQ4ENBUmu8IZKaR2U-o16ygKnQk9ebhmoOSSUdQaDpf3cDA4Vk0Kp9extR_vvv4jBs/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>

</b:if>

<!-- End Text re size gadget by http://www.spiceupyourblog.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 - How To Find Code In Blogger Template Template) 

<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.

Drop Your Comments And Questions Below.