Change font size or Resize font size jquery widget for blogger

I already posted some jquery widgets before in this blog. today i will post an interesting widget which is used to resize the font size or change font size of a post, this post can increase and decrease the font size as well. it is very useful tool for your blog as it helps to make readers comfortable to read you blog content especially blog which post reviews or stories. see demo here.

• First,  Dowload javascript Source files for font resizer

First of all, you need to download javascript files required for this widget, upload or host themto any hotlinking service i.e site providing direct linking to the file, you may choose "Bravehost" as it offers unlimited bandwidth and large amount of storage ...and its free too.If you want to know , how to use bravehost . you can read it here.

• Second, adding CSS + javascript to blogger

 Login to Blogger account > Click layout > edit HTML > Check expand widget templates
Now Find ]]></b:skin> Then Replace it with the code below

]]></b:skin>

<script src='http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js' type='text/javascript'/>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://YOUR-SITE-HERE.bravehost.com/jquery.ui.js' type='text/javascript'/>
<script src='http://YOUR-SITE-HERE.bravehost.com/cookie.js' type='text/javascript'/>
<script src='http://YOUR-SITE-HERE.bravehost.com/Source%285%29%5CSource/textresize.js' type='text/javascript'/>

<style media='screen' type='text/css'>

.minus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9CwvSD0b471EDS8qWXowNrCdHhBEgsi2tw-AE7I2YfrEmSRZMFA0nB5i3Wqm4TtXouSEt4aenbktDe3P1G2Da8DnZLHW8z_L5u66Mupy56dFYFXqWr6GjYu9jpHV3TzpKy3aE7wLrxZH/s400/minus-trans.png) no-repeat;
height: 9px;
width: 25px;
overflow: hidden;
float: left;
cursor: pointer;
}

.slider_bar {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogvVjCSMqSfHyGq_gt_iHQqK8M6F1j35lAOj3GFgbZbPjcPlRitMYLsU4uay1u0JEZjivfFKm-6z1-GyXBWeTSoWv9iQaalhIR2AJZezQIBrS4R1wOgGUxLm2gZ2jIXEaNgT4v9OSajhW/s400/bar-trans.png) no-repeat;
height: 9px;
width: 316px;
float: left;
margin: 0px 5px;
position: relative;
}
.add {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKsV9LW8ERqmG4SU9x4MUSb3fkm-39R3WWQ2L179ls2UzGGFcqdHsGyf_IOZe5JbxjfLq9gADzlgRIl9rP2LdR6bp4XqHijsSqasJR4hxn-hjJpslSIPsmX0g5dy2V_77Zc0q-RXJ5SGiv/s400/add-trans.png) no-repeat;
height: 25px;
width: 23px;
float: left;
position: relative;
top: -5px;
cursor: pointer;
}
.slider_handle {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CAWZd97TXWP5Zh-wJE2mNREw3gdw4J96KgZMJWwh_N4iPOpNcFM23sdBj3Nx4ZW2CFd25Zv24qWTsyrrKxlOcHdH4OfzcVSWSN6PyLwlaE7sbez_wzCWSnUeasXy6N8b6u9S5qItUG_8/s400/selector-trans.png) no-repeat;
height: 25px;
width: 12px;
position: absolute;
top: -8px;
}
#slider_caption {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3YHa1uzpZJe4Sqm95bOBAvt_VL-6oxAwiLaEC19iSMe__CQWNXEWX2dLorXJ3Wt9elYAJsPZ0hGo-R6MyxDsjojqW606KHfdV2JAzV01FNhK-SriHSNeD44Jgk0ZMpkNqCH7iTmR3sr9/s400/caption-trans.png) no-repeat;
height: 45px;
width: 38px;
overflow: hidden;
position: absolute;
top: -50px;
margin-left:-10px;
padding: 5px 0px 0px 0px;
font-family: &quot;Myriad Pro&quot;;
color: #36665d;
font-weight: bold;
text-align: center;
}

</style>

Replace the YOUR SITE HERE with your direct links.

 If you want to use compact version as shown above , remove slider_handle, slider_caption, slider_bar code , highlighted in bold brown letters from the code above.

• Second, now find <data:post.body/> And Replace it With Below code

  <div id="text"><p> <data:post.body/> </p></div>

Then Find And Replace it With Below code

<div id="text"><p> <data:post.title/> </p></div>

Now Click Save Template !

• Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE

<div id="header">
<div class="slider_container">
<div class="minus"></div>
<div class="slider_bar">
<div id="slider_caption"></div>
<div id="slider1_handle" class="slider_handle"></div>
</div>
<div class="add"></div>

</div>
</div>
<div id="font_indicator">Current Font Size: <b></b> </div>
<span style="font-size:4px;"><a href="http://www.techravi.com/" target="_blank">Plug it</a></span>

Now the Resizing Bar will Work !

Credits : made by Connor Zwick
Modified & distributed by : Techravi.com