Using jquery plugins on website or blog are important part of designing and making blogs more attractive. In blogger their thousand of widget developed with the usage of jquery. For different automatic effect which attract your eyes are almost based on jquery. Their are many images zoom effects, drop down menus other on mouse hover effects are done with help of jquery. In all these one of the famous used jquery widget is back to top. Even you can make Back To widget just by using internal page # anchor linking which will scroll back to top of the page even you are using this in below pages menu. But this widget scroll back too much fast but jquery plugin works in different it convert this scrolling into slow process which make it attractive. Smooth scrolling take few secs to scroll towards upward. The main benefit of this widget is on infinite scrolling pages or on that pages which are too much lengthy then to same some secs on users side this widget help them to get back on top just at single click. Today i will help you add jquery smooth scrolling widget within blogger if want to use this widget then follow below given steps.Method To Add Smooth Scrolling Gadget in Blogger
- Open Your Blogger Blog and Then open Layout of your blog.
- Then click on Add a Gadget.
- New Window will appear and find the option of Edit HTML/JavaScript and open it
- Now Empty box will appear and paste below given codes in it.
<!--Safe Tricks back to top widget Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#ST-top").fadeIn()}else{$("#ST-top").fadeOut()}});$("#ST-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script>
<a id='ST-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEklCQq0yUbRhv1Ir8x-4QXY_K-l30fZVL3USzLNWA1qK5S6D6U_IkdWBO0jsIsSa4eU2MGOZSPVEFT8aW1Z7W-I3jhKMklCnXbw36YsCTfVgjt65afZ61ZdbRoi8kEM31QTBu7MIgGQ/s1600/Back-to-top.png' width="20px" height="30px"/></a>
<!--Safe Tricks back to top widget End-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#ST-top").fadeIn()}else{$("#ST-top").fadeOut()}});$("#ST-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script>
<a id='ST-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEklCQq0yUbRhv1Ir8x-4QXY_K-l30fZVL3USzLNWA1qK5S6D6U_IkdWBO0jsIsSa4eU2MGOZSPVEFT8aW1Z7W-I3jhKMklCnXbw36YsCTfVgjt65afZ61ZdbRoi8kEM31QTBu7MIgGQ/s1600/Back-to-top.png' width="20px" height="30px"/></a>
<!--Safe Tricks back to top widget End-->
- In case if you want to change your image of arrow which we use in scrolling then replace
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEklCQq0yUbRhv1Ir8x-4QXY_K-l30fZVL3USzLNWA1qK5S6D6U_IkdWBO0jsIsSa4eU2MGOZSPVEFT8aW1Z7W-I3jhKMklCnXbw36YsCTfVgjt65afZ61ZdbRoi8kEM31QTBu7MIgGQ/s1600/Back-to-top.png
- To change the height width of your image simply change the values of width="20px" height="30px"
- After replacing save it and open your blog watch working.
I hope like it in case if you don't like our given images then search at Google and then use that one.
0 Comments