Fodder Back To Top Button For Blogger

Wednesday, 4 November 2015

Fodder Back To Top Button For Blogger

11/04/2015
Fodder Back To Top Button For Blogger By Askwithloud.com
Add new and stylish fish bait back to top button in your blog - As you guys already know that, the back to top button is a very important widget for every blogspot blog because it allows us to go back to the top of the web page without having to use of the scroll bar. In my previous article I already provided you some cool and stylish back to top button for your dashing blog, you can read those articles here - (Jumpy back to top button with jQuery UI ! Rocket back to top button for blogger)

This button is more than different comparing to the others. If I talk about the function of this widget then, when you rolled down the scroll bar the hook with bait fish goes down automatically and when you click on it, then it will help you to go to the top of the web page.

Now if you want to set up this back to top button in your blog, then my first suggestion to you is that first take a look of this widget by clicking on the below demo button.

Okay now follow the below instructions to install this widget in your own blogspot blog without having any problem.

How To Add Fodder Back To Top Button?

First login to your blogger dashboard - Login
Now go to  "Template" section and then click on the "Edit html" button.
After that copy the below "CSS" code and paste it just before ]]></b:skin> or </style>.
/* Back to Umpan Ikan */
.umpanikan{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2-DN2Z1H2zlPVg9EZnN1VdBOW_r0k3Im4U5gYX1R3e_oQ5PW5JH5W7YX-8h8Ax4zU7okj2CRKtYAOV4BnVWwy_dKIF32GVuALAIakDlyMnB_It8TX40rp8neYVOUpm68HjXNbEvonuS-/s1600/Fodder+Back+to+top+button+by+askwithloud.com.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}

Once again copy the below "jQuery script" and paste it just before </body>.
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})});
//]]>
</script>

After that, copy the below "HTML" code and paste it just after <body>.
<div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
  <div id="umpanikan-bubble">Go Top</div>
</div>

Note - You can replace the highlighted text with your own.

Now click on the orange save template button to apply this changes.

That's it! I hope you like this fodder back to top button! Stay tuned for more cool widgets! Thanks for reading @Prince
Load comments

0 Comment to "Fodder Back To Top Button For Blogger"

Post a Comment