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 –

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 

</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>
$(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'); 
$(&quot;.resetFont&quot;).click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).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
$(&quot;.decreaseFont&quot;).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

<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’/&gt; | <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&#8217; 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&#8217; 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 

<data:post.body/>

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

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

Step 8. Save your template.

About carelexxmalik

helllllo everyone! my name is carelexx malik i love blogging and i have much intrest in it i always search for new things

Posted on February 26, 2012, in blogger, blogger templates and tagged , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: