
If you are as lazy as me, or just have quite long blog posts, it can take a while to scroll back up, here is a quick code that will help you zap up to the top in seconds.
STEP ONE:
The first step is to create the image that you want to be your button. You can either make one on picmonkey.com (choose design then square or custom) or use one of the ones I have provided below. It needs to be a square of about 200px by 200px (we make it smaller later on) and be sure to create a transparent background. To do this on picmonkey go to Canvas Colour and tick the transparent canvas box then press apply. This means when you add your text or add an arrow that is all you will see rather then a white square around your design!free up buttons to use
Click to enlarge then rick click and press save image as...






STEP TWO:
Now you have your up button it's time to add it to your blog! On your template page choose Add a Gadget > HTML/Javascript and don't add a title. Then post the code below into the box:
<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){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},1000);return true})});</script><a href="http://realcombiz.com"></a><a id='rb-top' style='display: none; position: fixed; bottom: 10px; right:15px; cursor:pointer;font:12px arial;'><img src='IMAGEURL'width="50px" height="50px"/></a>
STEP THREE:
Now all you need to do is upload your button to postimg.org, copy the DIRECT LINK and paste it into the code where you see IMAGEURL. Press save and go to your blog and scroll to see how you like it. The standard size is 50px by 50px but if your image is too small go back to the code and change BOTH the width and height to a bigger value (must be the same value) That's it!






No comments:
Post a Comment