Text Resizer For Blogger: Resize Font Size in Blog Posts
I came across an excellent jQuery based text resizer script for blogger blogs that lets your visitors to change or resize font size of the text in your blog posts. This decreases or increases the text size providing your visitors with better readability. Its useful especially to those with weak eye sights and for those with display issues. Fluid Text Resizer widget has been designed by mybloggertricks and script is adopted from dynamic drive. It will appear just below your post titles and will allow your visitors to toggle the text size to their comfort. Text size on your entire blog will be zoomed in and zoomed out. From sidebars till footer, all text will be maximized. It also includes a Reset link that toggles the default font level. Lets get to work then!
It can adjust the text size of a particular section of your blogger blog, such as just the primary content area or comment section, or the entire document in general.
Live Demo
Add Text Resizer Widget To Blogger
- Go To Blogger > Design > Edit HTML
- Backup your template
- Check the "Expand Widget Templates" box
- Search for this,
]]></b:skin>
5. Just below it paste the following code,
<style type='text/css'>
/*----- Text Resizer By MBT ------*/
.controlstyle a /*links inside DIV sizecontroldiv*/
outline:none;
.controlstyle a img /*image links inside DIV sizecontroldiv*/
border-width:0;
.controlstyle a.selectedcontrol img /*selected control's image*/
border-bottom:4px solid darkred;
.mbt-text-resizer
font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
#mbt-text-resizer-container
margin:4px 0px;
padding:4px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd; width:100%;
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var mytextsizer=new fluidtextresizer(
controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
targets: ["body"], //target elements to resize text within: ["selector1", "selector2", etc]
levels: 10, //number of levels users can magnify (or shrink) text
persist: "session", //enter "session" or "none"
animate: 200 //animation duration of text resize. Enter 0 to disable
)
</script>
6. Next search for this code,
<data:post.body/>
7. Just above it paste the following code,
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-text-resizer-container'>
<div class='controlstyle' id='sizecontroldiv'>
<font style='color:#666; font-weight:bold;'>Adjust the font size:</font> <a class='mbt-text-resizer' href='#smaller'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU1YxkqV2Khmi2gIYY1BygRaXYCEcLllLnSYd-6N_YwB1LdVLFYkFa7vd-8Q2md6OLFG17c1mI_JU5d-5Nzy3ddx-amB1ZbJXJzNOXDNOTh-i9qKpX6I6LuUPjghS10prKRtaHdS0KSwA/s400/oranged.png'/> </a> <a class='mbt-text-resizer' href='#bigger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-aDuqeblaHd5yOfY-s10V0Yuw6e4iL3uHJg5X7Gl8TafFzsW2zZuSUWSLd2SM9pj7MXFALZOCNM-ClflxKwbm29-0B54Md8JHZSdO3npYK40lQYW1q2ZCt6-VVMLrC6gcN_eAgCoobpQ/s400/orangei.png'/> </a><a class='mbt-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Reset ↕</a>
</div>
</div>
</b:if>
You can change the text being displayed if you wish.
8. Save your template and you are all done!
Visit any of your post to see it appearing just below the post title. I have turned off the widget display on homepage. If you want the widget to be displayed on homepage too then simply delete the purple lines from the code in step#7.
Need help?
Do let me know if you wish to change anything. I will publish more color variations and styles of this gadget today so stay tune. Feel free to ask anything which is still un clear for you. Peace buddies! :>
14
comments
PLEASE NOTE:
We have Zero Tolerance to Spam.
Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
Clash Royale CLAN TAG
(function() {
var items = ['id': '8084811115424154768', 'body': 'its not working. :P', 'timestamp': '1318785090494', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1318785090494#c8084811115424154768', 'author': 'name': 'Salaria', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhHGczWGSuuL5WREHhrS62HZcSTTRQf9PJPQhd_tUVQEW1JR0-xH8U7OSIlEF3m154LYW70xw7yjCrQJ3uuWF9nwnOF5Bce_gNFRckglOwJd_0W8UHMqP8AZOmqLWNnGv9HzJQLsbhGE/s35/macc.jpg', 'profileUrl': 'https://www.blogger.com/profile/13866131829847913088', 'displayTime': 'Oct 16, 2011, 10:11:00 PM', 'deleteclass': 'item-control blog-admin pid-1412705156', 'id': '6119353305101219520', 'body': 'yep , its not working .....', 'timestamp': '1318785695306', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1318785695306#c6119353305101219520', 'author': 'name': 'Admin', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8M8RWuMtuztpS86deNe8MLrm1eGNT4RmTGhegPRJVNNTQh81uXEUlVH4K8NhdBhkW-HT-LDQbJlz0dbPAYvdPZJphIbATXZzg2D7G_5t3wBlGr21yFJJV3CcrYw-QIsvyk073i5jh7cU/s35/263379_224187937623828_100000978714537_619268_4619520_n.jpg', 'profileUrl': 'https://www.blogger.com/profile/15481591518444075766', 'displayTime': 'Oct 16, 2011, 10:21:00 PM', 'deleteclass': 'item-control blog-admin pid-1110849571', 'id': '6677553637980152388', 'body': 'Because both of you forgot to upload the javascript: :)x3cbr /x3ehttp://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.js', 'timestamp': '1318787233174', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1318787233174#c6677553637980152388', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggot5slWGpvs6tNYI0QV_ueCyhuL5rTNQC9X8z9BpYkqwcV5bxSRa3Hki39OryVlf2crGMZPWRdhv5TWdo-21scpi4m55gLRy-wTIJuWRxUTAfJGE8ItZ1umcfOmiwGlJu6Av_iotOSjs/s35/384304wl3ygq6tre.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Oct 16, 2011, 10:47:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '1460832050799776768', 'body': 'i was talking about your DEMO link Bro ...', 'timestamp': '1318794508538', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1318794508538#c1460832050799776768', 'author': 'name': 'Admin', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8M8RWuMtuztpS86deNe8MLrm1eGNT4RmTGhegPRJVNNTQh81uXEUlVH4K8NhdBhkW-HT-LDQbJlz0dbPAYvdPZJphIbATXZzg2D7G_5t3wBlGr21yFJJV3CcrYw-QIsvyk073i5jh7cU/s35/263379_224187937623828_100000978714537_619268_4619520_n.jpg', 'profileUrl': 'https://www.blogger.com/profile/15481591518444075766', 'displayTime': 'Oct 17, 2011, 12:48:00 AM', 'deleteclass': 'item-control blog-admin pid-1110849571', 'id': '3320103264788504794', 'body': 'Now Working :)', 'timestamp': '1318794707184', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1318794707184#c3320103264788504794', 'author': 'name': 'Admin', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8M8RWuMtuztpS86deNe8MLrm1eGNT4RmTGhegPRJVNNTQh81uXEUlVH4K8NhdBhkW-HT-LDQbJlz0dbPAYvdPZJphIbATXZzg2D7G_5t3wBlGr21yFJJV3CcrYw-QIsvyk073i5jh7cU/s35/263379_224187937623828_100000978714537_619268_4619520_n.jpg', 'profileUrl': 'https://www.blogger.com/profile/15481591518444075766', 'displayTime': 'Oct 17, 2011, 12:51:00 AM', 'deleteclass': 'item-control blog-admin pid-1110849571', 'id': '4547149940476718807', 'body': '@Malikx3cbr /x3ex3cbr /x3ex3cbr /x3eMake sure you are not directly pasting the Javascript coe inside your template. Donx26#39;t do that. simply replace srcx3dx26#39;x3cbx3efluidtextresizer.jsx3c/bx3ex26#39; with the link of your uploaded javascript.x3cbr /x3ex3cbr /x3e@haiderx3cbr /x3eShuker it does now. :)', 'timestamp': '1318860197111', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1318860197111#c4547149940476718807', 'author': 'name': 'Mohammad Mustafa Ahmedzai', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggot5slWGpvs6tNYI0QV_ueCyhuL5rTNQC9X8z9BpYkqwcV5bxSRa3Hki39OryVlf2crGMZPWRdhv5TWdo-21scpi4m55gLRy-wTIJuWRxUTAfJGE8ItZ1umcfOmiwGlJu6Av_iotOSjs/s35/384304wl3ygq6tre.jpg', 'profileUrl': 'https://www.blogger.com/profile/11681339458447132019', 'displayTime': 'Oct 17, 2011, 7:03:00 PM', 'deleteclass': 'item-control blog-admin pid-1736397285', 'id': '2349045463769795041', 'body': 'I do not know where I should put the javascript on my blog, I ask for help.', 'timestamp': '1325397956068', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1325397956068#c2349045463769795041', 'author': 'name': 'Muhammad Abu Abdillah', 'avatarUrl': '//lh4.googleusercontent.com/-1MPz6TaPvm4/AAAAAAAAAAI/AAAAAAAAAIk/8jtl4UndyII/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/02507945896440276950', 'displayTime': 'Jan 1, 2012, 11:05:00 AM', 'deleteclass': 'item-control blog-admin pid-112485056', 'id': '6923345895618497711', 'body': 'Its work ! Thank you MBT x26lt;3', 'timestamp': '1325403268898', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1325403268898#c6923345895618497711', 'author': 'name': 'Tharaka Devinda', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwJoClISSgqWxMs4IYvX-IL7PxMixeRtTYMRsTS5lcRqweXOolWfL7ELDRvRJMXzR0WyrsJ-PPGTFBCy4Eh1xK1q6Q7rtdUc1dOCfJKCVkt7r0oydDkVzkY_oRvKZYBHP2GYrKkoXHLCk/s35/set.jpg', 'profileUrl': 'https://www.blogger.com/profile/01423766865549841986', 'displayTime': 'Jan 1, 2012, 12:34:00 PM', 'deleteclass': 'item-control blog-admin pid-1515521718', 'id': '3418432042873383733', 'body': 'well, I did right till the step 5, but could not find the step 6 text in the edit HTML section of the template... where do I look for it?', 'timestamp': '1325432400931', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1325432400931#c3418432042873383733', 'author': 'name': 'Prashanth Sarda', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/02232160431312086783', 'displayTime': 'Jan 1, 2012, 8:40:00 PM', 'deleteclass': 'item-control blog-admin pid-1755291562', 'id': '5077791827541515799', 'body': 'Did not find', 'timestamp': '1326490492211', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1326490492211#c5077791827541515799', 'author': 'name': 'adam18m', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIHlLC1XENwWM7GE3wRIcTtOi_lcEV42HBgsuVQBCKmAb7Pb4fpSyyzF6a9xBX9TF9j6Wefjy4Eg_xdrBSPLcM-4Hmx4XVdHz7bEh37VALg5LT3xtvyklYVjJVVqEsQhgXtFdD1MlaFnWk/s35/my.jpg', 'profileUrl': 'https://www.blogger.com/profile/02605491417744637876', 'displayTime': 'Jan 14, 2012, 2:34:00 AM', 'deleteclass': 'item-control blog-admin pid-1658864610', 'id': '6141307283755275423', 'body': 'Did not find data:post.body', 'timestamp': '1326490613472', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1326490613472#c6141307283755275423', 'author': 'name': 'adam18m', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIHlLC1XENwWM7GE3wRIcTtOi_lcEV42HBgsuVQBCKmAb7Pb4fpSyyzF6a9xBX9TF9j6Wefjy4Eg_xdrBSPLcM-4Hmx4XVdHz7bEh37VALg5LT3xtvyklYVjJVVqEsQhgXtFdD1MlaFnWk/s35/my.jpg', 'profileUrl': 'https://www.blogger.com/profile/02605491417744637876', 'displayTime': 'Jan 14, 2012, 2:36:00 AM', 'deleteclass': 'item-control blog-admin pid-1658864610', 'id': '7581041597316294327', 'body': 'oh no I canx26#39;t do that!', 'timestamp': '1342677697893', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1342677697893#c7581041597316294327', 'author': 'name': 'Anonymous', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': '', 'displayTime': 'Jul 19, 2012, 11:01:00 AM', 'deleteclass': 'item-control blog-admin pid-531334590', 'id': '8011492065773725691', 'body': 'Hello,x3cbr /x3ex3cbr /x3eI searched a long time and a bit tired too.And yours is very helpful to me.Thank you very much for the post .', 'timestamp': '1343640802451', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1343640802451#c8011492065773725691', 'author': 'name': 'tamilsasikitchen', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/05462927656949032424', 'displayTime': 'Jul 30, 2012, 2:33:00 PM', 'deleteclass': 'item-control blog-admin pid-519548068', 'id': '6234909954272098024', 'body': 'Hi ,x3cbr /x3eI did this exactly and i got it .But now i dont find the widget. And also i cant able to find this . I am a new blogger.can you please help me?x3cbr /x3eThankyou', 'timestamp': '1343647304437', 'permalink': 'https://www.mybloggertricks.com/2011/10/fluid-text-resizer-adjust-font-size-in.html?showCommentx3d1343647304437#c6234909954272098024', 'author': 'name': 'tamilsasikitchen', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/05462927656949032424', 'displayTime': 'Jul 30, 2012, 4:21:00 PM', 'deleteclass': 'item-control blog-admin pid-519548068'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '6213681335968003', 'feed': 'https://www.mybloggertricks.com/feeds/6213681335968003/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;
var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';
return entry.content.$t;
var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;
if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;
if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;
comments.push(comment);
return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length
SalariaOct 16, 2011, 10:11:00 PM
its not working. :P
ReplyDelete
AdminOct 16, 2011, 10:21:00 PM
yep , its not working .....
ReplyDelete
Mohammad Mustafa AhmedzaiOct 16, 2011, 10:47:00 PM
Because both of you forgot to upload the javascript: :)
http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.js
ReplyDelete
AdminOct 17, 2011, 12:48:00 AM
i was talking about your DEMO link Bro ...
ReplyDelete
AdminOct 17, 2011, 12:51:00 AM
Now Working :)
ReplyDelete
Mohammad Mustafa AhmedzaiOct 17, 2011, 7:03:00 PM
@Malik
Make sure you are not directly pasting the Javascript coe inside your template. Don't do that. simply replace src='fluidtextresizer.js' with the link of your uploaded javascript.
@haider
Shuker it does now. :)
ReplyDelete
Muhammad Abu AbdillahJan 1, 2012, 11:05:00 AM
I do not know where I should put the javascript on my blog, I ask for help.
ReplyDelete
Tharaka DevindaJan 1, 2012, 12:34:00 PM
Its work ! Thank you MBT <3
ReplyDelete
Prashanth SardaJan 1, 2012, 8:40:00 PM
well, I did right till the step 5, but could not find the step 6 text in the edit HTML section of the template... where do I look for it?
ReplyDelete
adam18mJan 14, 2012, 2:34:00 AM
Did not find
ReplyDelete
adam18mJan 14, 2012, 2:36:00 AM
Did not find data:post.body
ReplyDelete
AnonymousJul 19, 2012, 11:01:00 AM
oh no I can't do that!
ReplyDelete
tamilsasikitchenJul 30, 2012, 2:33:00 PM
Hello,
I searched a long time and a bit tired too.And yours is very helpful to me.Thank you very much for the post .
ReplyDelete
tamilsasikitchenJul 30, 2012, 4:21:00 PM
Hi ,
I did this exactly and i got it .But now i dont find the widget. And also i cant able to find this . I am a new blogger.can you please help me?
Thankyou
ReplyDelete