As a blogger, imagine you're reading an article or browsing a blog or a website, and you want to scroll up because you're looking for something in the top.
Now as you scroll up, imagine that it took you hundred scrolls but you still haven't reached the top yet. How would you feel in that situation?
Maybe you got frustrated that's why you ended up loosing interest and leaving the site, right?
As a blogger, how would you feel about that? How would you feel that your regular visitor lost because your blog doesn't provide a good and welcoming experience? Quite embarrassing, isn't it?
Nowadays, providing quality contents for your audience is not just enough. You also have to give them a good user experience that would prompt them to come to your blog site again. An experience that would encourage them to share their experience too with other audience.
And one way we can do to provide a very nice user experience is by making your site's navigation easier for your visitors. A navigation that would ease hardship and makes convenience instead.
One of this is by adding a back to top or scroll to top widget to your blog or website.
A back to top button would be helpful for your visitors in case they missed something in your blog and they want to go back to it.
The steps below would help you to add a scroll to top button to your blog to give your readers a good experience.
Edit HTML
1. Go to your blogger's dashboard and select 'Theme'.
2. Click the three vertical dots and select 'Edit HTML'.
3. Find the </body> tag by pressing Ctrl + F keys on your keyboard and search for </body>.
4. Paste this code just before </body> tag and save.
<!-- Overlay and Back to Top (starts) -->
<form class="move-up" action="#up"> <button> <i class="fa fa-chevron-circle-up"></i> </button> </form>
<style>
.move-up {
position: fixed;
bottom: 20px;
right: 5px;
z-index: 3;
display: none;
z-index:1000; }
.move-up button { background:transparent; border:none; }
.move-up button:active:hover { padding-right:4px !important; margin-right:2px; }
.move-up i { font-size:60px; opacity:0.5; color:#BABABA; }
</style>
<script>
$(document).ready(function($){
$(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('.move-up').fadeIn();
} else {
$('.move-up').fadeOut(); }
});
$('.move-up button').click(function(){
$('body,html').animate({ scrollTop: 0 }, 800); return false;
});
});
});
</script>
<!-- Overlay and Back to Top (ends) -->
You can also change its icon, size, color, margin, and position depending on your preference (those that are colored red). Just make sure it compliments your site's theme.
If you want to change your button icon, simply visit fontawesome.com and copy the unique embed code of your chosen icon.
For example, if you chose caret circle up icon with code <i class="fa fa-caret-circle-up"></i>, simply copy the one that is quoted inside and paste it to the code (formatted in red text of your scroll to top button.
Add a Gadget
Alternatively, you can also try this very easy method of adding a back to top button if you're not confident in editing HTML.
1. Simply go to your dashboard and click 'Layout'.
2. Find 'Sidebar'.
3. Click 'Add a Gadget'.
3. Paste the code above and hit save.
After doing this, you should visit your site to see if the widget appears in your blog/website. Try scrolling down for the button to appear and then click it to test if it will elevate you up.
If you haven't added your own scroll to top button, now is the time to try this.
Do you want your visitors to keep coming back to your blog? I'm sure you do, so try doing it right after reading this.
Feel free to ask questions in the comment section below.
Post a Comment