How to add go to top and go to bottom buttons Using jQuery in Blogger

The up and down buttons can be used to scroll up and down the page, especially if there are a lot of posts on the main page or a lot of comments in the post. These buttons have a cross effect, meaning they disappear a bit when we scroll up or down the page, and they also have an up / down scrolling function on the blog.

demo

You can see a live demo on my blog, right buttons.

How to place up and down buttons with jQuery slide effect

Step 1. Go to "Template" and click "Edit HTML".

Step 2: Click anywhere in the code box and press CTRL + F to open the bloggers search box.

Step 3: Copy and paste into the search box to find the following piece of code:

]]>

Step 4. Slightly higher]]> paste it:

/ * Up and down buttons with jQuery
------------------------------------------------- - ----------- * /
key .up {
Filling: 7px; / * space between frame and icon * /
background color: white;
border: 1 solid pixel #CCC; / * border color * /
position: stable;
Background: white URL ( http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png ) top left unique;
Background position: 50% 50%;
Eni: 20 pixels; / * button width * /
Height: 20px; / * button height * /
alt: 280px; / * distance from below * /
right: 5 pixels; / * If you want the buttons to be on the left, move from right to left * /
space: now;
cursor: pointer;
border radius: 3px 3px 3px 3px;
Opacity: 0.7;
filter: progid: DXImageTransform.Microsoft.Alpha (transparency = 70);
}}
.Down button {
Filling: 7px; / * space between frame and icon * /
background color: white;
border: 1 solid pixel #CCC; / * border color * /
position: stable;
Background: white URL ( http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png ) top left without duplication;
Background position: 50% 50%;
Eni: 20 pixels; / * button width * /
Height: 20px; / * button height * /
alt: 242px; / * distance from below * /
right: 5 pixels; / * If you want the buttons to be on the left, move from right to left * /
space: now;
cursor: pointer;
border radius: 3px 3px 3px 3px;
Opacity: 0.7;
filter: progid: DXImageTransform.Microsoft.Alpha (transparency = 70);
}}

Note. Some annotations are highlighted in green and explain what styles can be changed on the left.
- You can change the arrows by changing the URLs to blue .
- Change the white text to your own color to change the background color of the buttons.

Step 5. Now (CTRL + F) find the following label:

Step 6 Paste the following code upwards:

Note. Remove the first code in bold to remove the top button, and the second code to remove the bottom button.

Step 7. Finally, save your changes by clicking the " Save Template " button. Enjoy!