Tumblr Style Scroll Button for Blogger
I've learned a boatload of new tricks. The first one is this handy scroll button, like the ones seen on many Tumblr sites.
Here's how to do it:
As always, make sure you've backed up your template before you start.
Backup
Go to your dashboard, and in the left menu, Click: Template
In the top right of your screen, Click: Backup / Restore
In the pop-up window, Click: Download full template
Save the file somewhere safe.
Click: Close
Now we are ready to proceed.
Install
You should still be in the Template page, so go ahead and click on the Edit HTML button.
In the pop-up window that appears, click on Proceed.
There are three pieces of code we need to add:
First the jQuery library:
Important! Skip this step if you have previously installed jQuery for another widget.
Otherwise:
Do a CTRL-F and search for your closing </head> tag
1
| </head> |
And paste in the following single line of code directly in front of it:
1
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> |
Next the CSS:
Do a CTRL-F and search for your closing </b:skin> tag
1
| ]]></b:skin> |
And paste in the following code directly in front of it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| #scroll-top { background-color: #777777; border-radius: 24px; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) inset; color: #FFFFFF; cursor: pointer; display: block; font-family: Verdana; font-size: 2em; font-weight: bold; line-height: 2em; text-align: center; text-decoration: none; position:fixed; width: 48px; height: 48px; bottom:30px; right:20px; opacity:0.85; transition:opacity 0.25s ease 0s;} #scroll-top:hover{ opacity: 1; color: #FFFFFF;} |
Feel free to adjust the styling any way you want.
You'll likely want to change the background-color and color properties to match your blog's color scheme.
You might also want to reduce the border-radius for a more square button.
You can also change the font-family, font-size, and line-height properties to adjust how the caret looks.
Finally the JavaScript and HTML:
Do a CTRL-F and search for your closing </body> tag
1
| </body> |
And paste in the following code directly in front of it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script type='text/javascript'>$(function() { $.fn.scrolltoTop = function() { var scrollLink = $(this), win = $(window); scrollLink.hide(); if (win.scrollTop() != '0'){ scrollLink.fadeIn('slow') } win.scroll(function() { if (win.scrollTop() == '0'){ scrollLink.fadeOut('slow') } else{ scrollLink.fadeIn('slow') } }); scrollLink.click(function() { $('html, body').animate({ scrollTop: 0 }, 'slow') }) } });$(function() { $('#scroll-top').scrolltoTop();});</script><a id='scroll-top' href='#' title='Scroll to top'>^</a> |
And that's it.
0 comments:
Your comments always welcome