Cute Back To Top buttons

Hello my Kawaiicuties I miss you so much

So, I was thinking about what to post for you today and an idea suddenly came to my mind!
Why not making a few cute "Back To Top buttons" for my Kawaiicuties?
Okay here we go!

♥ These Back to top buttons are made by me! ♥
Leave a comment below please if you use one of these buttons so I can see them in action

To use these Back To Top buttons follow these steps :

• Log on your Blogspot, go to Template > Edit HTML > Search for <head> just below the <head> tag place this code below :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

Save your template then :

• Click on the photo you want to use as your back to top button
• Copy it's link

• Go to Layout > click Add a Gadget > select an HTML/Javascript > copy and paste the code below

• Change the highlighted url in red with the url of the photo you want to use.

<script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; font-size: 12px; padding: 1em; display: none; } .back-to-top:hover { text-decoration: none; } </style> <a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9I9Fp_IEbk3py_G3LRZT3XTNZVhjQ7klEItP19okGUoXJXXOgVu2Uki4Vsh2qkmWqInog0dPw1G3dYmm2QzaMjd7zqLJbOPXdlMFjTIatuxm4Wk9VpQ1Oeq_OMsKqQoCIDpyH-gunqLVK/s1600/3b.png" alt="Back to Top" / ></a>

Cute Back To Top buttons

6 comments: