Add Stylish jQuery Text Resize Buttons To Posts On Blogger Blogs

Posted : Tuesday, February 21, 2012 |  Post Author : Paul Crowe | 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('span','.section2');
section = section.join(',');

// Reset Font Size
var originalFontSize = $(section).css('font-size'); 
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});

// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', 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.

13 comments:

  1. nice one mate

    ReplyDelete

  2. Great its very useful. Thanks

    ReplyDelete

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

     

  4. I checked out your blog and it’s working exactly as it’s supposed to…

    Delete

  5.  

  6. bollywood-gossips.netFebruary 22, 2012 at 6:23 AM

    very nice its use ful dear

    ReplyDelete

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

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

  9. Great article..thank you

    ReplyDelete

  10. Team – Free Calling HubFebruary 27, 2012 at 5:16 AM

    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

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

    ReplyDelete

  12. Great post thank you!

    ReplyDelete

  13. Nice post

    ReplyDelete

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