[ENG] Postach.io hacks. How to add Back to top button and Back in history button

Today I will teach you how to add the back to top button to your blog. When visitor clicks this button, web page scrolls back to the top.

HTML

You need to add next code to your Postach.io theme source editor:

All these HTML tags are needed to fully specify desired style of the button.

I recommend to add this code before footer of your theme. You can find it by word footer:

Next, we need to specify part of your blog where we will return visitor. I recommend to choose the very beginning of article. You can find this part by word article. You must add property name="top" to all "article" tags:

As a point of return is ideal any section of blog, which is always above article.

CSS

Inside .css of your theme you should set some properties for the button. Here's an example of my code:

this code indicates that the button always moves with the page scrolls. It is 10 px above the bottom edge of the screen and on the left 80 px of content.

The remaining properties set appearance of button and text. You can customize as you want.

background:#ddd

  • color of the button,
    color:#bbb
  • color of the text.

#back-top a:hover span

  • specifies behavior on mouse hover.

Bonus. Back in history button

This link will return visitor to a previous page

Комментарии