Smart Blogging Methods

---

Add jQuery Text Resize Button on Blogger Posts Posted: 24 Jan 2015 11:27 PM PST Add jQuery Text Resize Button on Blogger Posts Now a Days Lof Blogger users want Design a Blog Like a Professional Website.They Love to add Fancy jQuery Widgets to attracts their Blogger Visitor’s.Already i Publish a Lot Of jQuery Fancy widgets For Blogger.Now i am going to Share a jQuery Text Resize Button on Blogger Posts.This Widget Helps the Readers to Resize the Text in to smaller and Larger Size.This Widget ts Developed From jQuery with colorful Icons.it is Fully Responsive Widget How to Install This Blogger Plugin in my Blogger Posts? Go to Blogger Dashboard go to Template Use CTRL+F to Find the </head> Tagg Now Paste the Below Code Just Above the </head> <!-- Start Text re size gadget --> <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(&#39;span&#39;,&#39;.section2&#39;); section = section.join(&#39;,&#39;); // Reset Font Size var originalFontSize = $(section).css(&#39;font-size&#39;); $(&quot;.resetFont&quot;).click(function(){ $(section).css(&#39;font-size&#39;, originalFontSize); }); // Increase Font Size $(&quot;.increaseFont&quot;).click(function(){ var currentFontSize = $(section).css(&#39;font-size&#39;); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $(section).css(&#39;font-size&#39;, newFontSize); return false; }); // Decrease Font Size $(&quot;.decreaseFont&quot;).click(function(){ var currentFontSize = $(section).css(&#39;font-size&#39;); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $(section).css(&#39;font-size&#39;, newFontSize); return false; }); }); </script> <!-- End Text re size gadge --> Again Find this Tagg <div class=’post-header-line-1’/> You can Find this Tagg 2 times in your Template Paste the Below Code Just Below the 2nd <div class=’post-header-line-1’/> Tagg <!-- Start Text re size gadget --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZ8xgRQ8RpWu-iuhiFYBC9gRLvhAE9S113A29__lnZUX61F3gGSFMUQdAmEcHmXmA3-FEMWzZVTflxhcmh7lFNG_ZI_eq3-GHsvsavEczxuwiUgXcjFwoSzgxiJxOeJbnqLISLZEj4sM/s1600/a1.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN93mIimVZuaa4CbSIQxrXHFFeR42baEaO32n1LuAqAtbDhuBkNatPYXWezEOD0aaZRUbDonXhyphenhyphenTxyWotZp_4R7tUh6VDnwUrmOrOWtYm2s0T0Faz6One7xbY6R18s9oe8-wIPxPqDMV4/s1600/a2.png'/></a> <a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL8Q3yjC8366lAvfR_PHeYkdSZknvrzTJO6VRfj7NfRl4A4ENJVjYFtNqFPeZm7ua7YlCyRC3Ll9grTN9JKdDNUIUG0S0k9AhgPOJA57kk116ieyKlwb0muDdRSBIvd4OcHF7npoOZbpg/s1600/a3.png' style='cursor: hand;'/></a> <a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaSkzFtybqLmhqq8q42Yu5SVj4ApMFEV26vpK4zjKTAZr3KNOu2dk1EMFvkgABqze-jIIhw90tYujn44kbKMKfOSG4AW-ZUGQ8zEYMjAaQAIJTNmylFGSoTrNReOA1do7vyqZPSiNBwo/s1600/a4.png' style='cursor: hand;'/></a></td></tr></table> </b:if> <!-- End Text re size gadget --> Now Click the Save Template Successfully   jQuery Text Resize Button Install in your Blogger Blog If you Have Any Doubts While Installing This Blogger Plugin Please Feel Free to Comment Here i will Help you. Share this Article with your Friends in Facebook,Goolge+ and Twitter. The post Add jQuery Text Resize Button on Blogger Posts appeared first on Smart Blogging Methods.