In this video tutorial I am going to explain about how to add back to top button in thesis theme. If you have a post with more than 100 comments, now a reader wants to add comment to your post after entering the comment again he wants to see the post. Here he need to scroll the mouse to long time to reach the post.
To avoid this problem I am giving a solution called floating ‘back to top’ button. This button will help you to reach top in a single click. This go to top button is floating type so it is always available in near the side scroll bar of your website.
You can place this button bottom of the screen or middle of the screen. If you are reading at middle of the page you can go to top straight a way by clicking the back to top button.
To add Back to top button to your website follow these steps.
- First you need to create a 30×30 image file for the button.
- Upload this image file into custom images folder of thesis theme by using ftp. The path of the custom folder is public_html/fourbloggr.com/wp-contet/themes/thesis_16/custom/images.
- Once uploaded the image login your wordpress admin dashboard.
- Select ‘thesis options’ under thesis options in left sidebar of the wordpress dashboard.
- Select ‘header scripts’ under ‘stats software and scripts section’.
/* paste the code in header scripts*/ <a style="display:scroll;position:fixed;bottom:5px;right:5px; " href="#" title="Go to Top"> <img src="http://fourblogger.com/wp-content/themes/thesis_16/ custom/images/fourbloggertop.jpg" /></a> <br/>
The above code you should replace your image uploaded path. Here you can also change the position of the button by changing the bottom and right values.
- Then enter ‘big ass to save button’. Now check your site with back to top button like below image.
Top to Bottom link
You can also add top to bottom button like I used in this site. This website if you click ‘video blogging tutorial’ banner in header directly it comes to our video player available in the footer. This player you can watch al the videos of ‘fourblogger.com’.
Share your experience in comment section. For more checkout our all Thesis theme tutorials..