Add Stylish jQuery Text Resize Buttons To Posts On Blogger Blogs




| | 13 comments

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 :

View Demo Button

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

Design Edit Html Widget Templates

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='http://4.bp.blogspot.com/-b1_J5npcUag/TdzJSK1mwdI/AAAAAAAAEFU/f7mZHFshlQI/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='http://4.bp.blogspot.com/-DP_25fJBGew/TdzJRS0KcJI/AAAAAAAAEFM/P9-ikZyu3UE/s1600/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='http://3.bp.blogspot.com/-9SuQUU3YZlI/TdzJTOokcLI/AAAAAAAAEFg/Nz8SeJ6-QIs/s1600/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='http://4.bp.blogspot.com/-i-uGhNM_bks/TdzJScrNpII/AAAAAAAAEFY/v4XGHbR30Cw/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.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

13 comments:

  1. hi paul crew.. thanks for this usefull tips, i trying this effect but this not work with all post text on half text large and small with + - button.. plz help me......

    ReplyDelete
    Replies
    1. I checked out your blog and it's working exactly as it's supposed to...

      Delete
  2. Thank You very much Paul,find this for quite sometime already :)
    I wish in future,too,you will guide us to create a wonderful landing page (Flashy bit) using blogger :)

    Looking Forward :)

    ReplyDelete
  3. too good piece of information, I had come to know about your site from my friend sajid, bangalore,i have read atleast 11 posts of yours by now

    ReplyDelete
  4. Hi paul this is really awesome, i regular visit to your site for getting some extra tips and tutorials for my blog..
    your tutorials are awesome and easy to understand.Thanks again

    check my blog which have lots of your gadgets http://www.freecallinghub.blogspot.com

    ReplyDelete
  5. HI! bro its ammazing but its not working on my Blog I was apply it 2 times:(
    kindly check my Blog...

    ReplyDelete
  6. hi Paul, I have a question about this post that how to delete that resize button because it crash my pinterest button help me

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us