Change Text Size or Resize Font size Widget Using jQuery For Blogger

You may have seen many sites having a widget installed on their sites to change or increase,decrease the size of text in the post.This widgets proves very helpful as it provides flexibility to visitors to read text or long posts without facing much strain in their eye.As visitors are like our friends so we must take care of them.So I found this great widget which can re size or change font size in a beautiful way( Credits are give below this post ).I agree this widget was not for simple sites like blogger,But after a long experimental period now this is also compatible with blogger blogs :).See the demo below to visualize its working.

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!
  

Installation :


CSS+ java Script SECTION


Step 1 :

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code

]]></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://bloggerplugnplay-files.bravehost.com/jquery.ui.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.bravehost.com/cookie.js' type='text/javascript'/>
<script src='http://bloggerplugnplay-files.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/AVvXsEiSXQBS1ZckuZVQQkD8zZ8FSVeddE0VqHCQyBYklkaimLY7eJ4gspJp4a7lhSFqPD02pIVJDiRf2JnW9Rq5WGcnR615dABR5v4r1_jECSy_JZLbBbMPD6iNw8j3gz3Dli2U61t0DKwToe3c/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/AVvXsEgwCkDEdTOno1AAsWS6neaGT6Dgs0jnzOaSK9attj5c_9b6jXuDehzgcV87_BwHWcgfUZjGAQzMKaf-H_g7VrOCIT-A9ni4y0dINuEQ1PXusT_U54oxqBkAEjzzNRGZRVJimDLAG2FIROCb/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/AVvXsEgxOypc3Pb-Zo4ug7t4Dg-JvYzM49NqlaPn3wCddI1nfHOdVTe5FE6tK50StmW2LDVFMJkCWYO2J6xmEtwSm6NqB7mdRoK3bsIf0HyhYQ_JS7pb04TFaRYvSEiOUN3EynYsjLoT3yDO4-0f/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/AVvXsEidZQpm9IDOS_hTWTuK2_0Z29m8IlrqN_xwskyZlwyVvbGPacwfrXiI3uJVsQij46vMQXaks0FgJdzhfXN9E_Z_mv84UD0vZaJDxOIf-fWvlk6rUASnyic9um-w5yEqzeHhqpB1Ru-1cGJn/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/AVvXsEiA2IRfiGY6meTmDU8c9WBghVGv7zzJEiQxA8OoonCQnLvnuTZElGLv39_6B9hjpeettriW0MFzIFSRQg-K1aZ4WhL-VOQh6TOlS9aOvP3wmWcGS-fnCQZQDPcSS8zoh0XJxjzogzUfTizs/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>

For Compact Style Remove Below Code From Above Code

.slider_bar {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwCkDEdTOno1AAsWS6neaGT6Dgs0jnzOaSK9attj5c_9b6jXuDehzgcV87_BwHWcgfUZjGAQzMKaf-H_g7VrOCIT-A9ni4y0dINuEQ1PXusT_U54oxqBkAEjzzNRGZRVJimDLAG2FIROCb/s400/bar-trans.png) no-repeat;
height: 9px;
width: 316px;
float: left;
margin: 0px 5px;
position: relative;
}

.slider_handle {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidZQpm9IDOS_hTWTuK2_0Z29m8IlrqN_xwskyZlwyVvbGPacwfrXiI3uJVsQij46vMQXaks0FgJdzhfXN9E_Z_mv84UD0vZaJDxOIf-fWvlk6rUASnyic9um-w5yEqzeHhqpB1Ru-1cGJn/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/AVvXsEiA2IRfiGY6meTmDU8c9WBghVGv7zzJEiQxA8OoonCQnLvnuTZElGLv39_6B9hjpeettriW0MFzIFSRQg-K1aZ4WhL-VOQh6TOlS9aOvP3wmWcGS-fnCQZQDPcSS8zoh0XJxjzogzUfTizs/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: "Myriad Pro";
color: #36665d;
font-weight: bold;
text-align: center;
}

Step 2:

Now Find <data:post.body/> And Replace it With Below code

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

Then Find <data:post.title/> And Replace it With Below code

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

Now Click Save Template !


Step 3:

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://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Now the Resizing Bar will Work !

Credits : made by Connor Zwick
Distributed and converted for blogger by Blogger plug n play