6 June 2014

add an up to top button


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!

purchase installation

If you would like me to install this gadget for you, I offer installation for the Up To Top Button at just £4! Just click below to purchase! I will email the paypal email used, so please contact me if you perfer to talk via a different email.

Serena Ozgowicz is a 21 year old Puggle owner with a passion for web design. She likes to share her passion with you guys through tutorials and helpful tips. You can follow her on facebook, twitter and instagram.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...