मंगलवार, 27 जनवरी 2015

Smart Blogging Methods


 


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.

कोई टिप्पणी नहीं:

एक टिप्पणी भेजें

fly