header ads

scroll

Back to Top 1.2. Now go to Template > Edit HTML and find ]]>. If you can’t find it check out this post for help. Once you have found it paste the following above it .backtotop { position: fixed; bottom: 10px; /* increase value to move position up */ right: 0px; /* increase value to move position left */ color: #000000; /* color of text */ background-color: #ffffff; /* background color of button */ font-size: 12px; /* changes size of text */ padding: 10px; /* add space around the text */ text-transform: uppercase; /* change text to all caps */ letter-spacing: 1.0px; /* space between letters */ } .backtotop:hover { background-color: #333333; /* color of background on hover over */ color: #ffffff; /* color of text on hover over */ text-decoration: none; /* no underline */ } 1.3. Change what is shown in pink to suit your blog. The /* ... */ are comments to help you identify the code. You can leave them in, they won’t appear on your blog. 2. How to add a “back to top” image button to blogger 2.1. Go to Layout > Add gadget > Add HTML/Javascript Gadget and paste the following into the content section Back To Top and add the URL of the image, make sure it’s the image URL and not the page URL! 2.2. Now go to Template > Edit HTML and find ]]>. If you can’t find it check out this post for help. Once you have found it paste the following above it .backtotop { position: fixed; bottom: 10px; /* increase value to move position up */ right: 0px; /* increase value to move position left */ color: #000000; /* color of text */ background-color: #ffffff; /* background color of button */ font-size: 12px; /* changes size of text */ padding: 10px; /* add space around the text */ text-transform: uppercase; /* change text to all caps */ letter-spacing: 1.0px; /* space between letters */ } .backtotop:hover { background-color: #333333; /* color of background on hover over */ color: #ffffff; /* color of text on hover over */ text-decoration: none; /* no underline */ bottom: 10px; /* increase value to move position up */ right: 0px; /* increase value to move position left */ padding: 10px; /* add space around the text */ }