How to Make a Back To Top Responsive Button

How to make / install a back to top responsive button with Awesome Fonts like  - What is the back to top button? surely, you already understand the meaning and usefulness of this feature on a blog. The existence of this one button is very necessary for blog visitors to return to the top page, especially if your blog has a very long article and added with many comments, of course this button will be very useful. Besides being able to enhance the appearance of the blog, installing the back to top button can also make your blog user friendly.

There are many ways to make or install the back to top button on the blog, but in this tutorial Bakul Oreg wants to share how to make the button back to top with Font Awesome. You can see an example on this blog (simple but cool hhhh)

The advantages of this method are lighter and responsive because the images that are loaded are not from an image url, but rather a letter (code) that represents an icon (image).

Please follow the steps below: 
First method

Login to Blogger >> select blog >> template >> edit html.

1. Install the Font Awesome bootstrapcdn code just above the code </ haed> (first check if the code already exists, if there is a step past this)

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Install the css code below, just above the code ]]></b:skin>or</style>

#back-to-top{background:#53bd84;color:#ffffff;padding:8px 10px;font-size:24px;border-radius:6px}

.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

3. Install the code below, just above the code </body>

<div class='back-to-top'>
      <a href='#' id='back-to-top' title='back to top'>
        <i class='fa fa-chevron-up'/>
      </a>
</div>

    <script>
      $(window).scroll(function() {
        if($(this).scrollTop() &gt; 200) {
          $(&#39;#back-to-top&#39;).fadeIn();
            } else {
            $(&#39;#back-to-top&#39;).fadeOut();
            }
            });
          $(&#39;#back-to-top&#39;).hide().click(function() {
            $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
            return false;
            });
    </script>

After that, click the template preview to make sure all the codes are installed correctly. If buttonback to top appears in the lower right, that means you have successfully installed the button back to top.

4. Before saving, you should click Format template first, order code javascriptcan function properly, after a new formatted template click save template. 

Second way:

In this second way we will make it as widget back to top.

For steps 1 and 2 the same as in the first way, then click save template.

Next you click layout >> + add gatget (it's up to the sectionsidebar or footer) then click HTML/Javascript. Paste the code in step 3 above (don't forget to give the title temporarily). Then click save.

Note: 
If the Back To Top button appears immediately when the blog page is opened, that means in the template you don't have the following line of code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Please copy then paste the code just above the code </head> then click save and see the results, if the button Back To Top nothing and only appears when the page is scrooled then the button is installed Back To Tophas been perfect. 

For those of you who use the standard template from blogger you should use the second method, this button only appears on the web display, to appear on the mobile view, follow the steps below:

Login to Blogger >> select the blog >> template then click the gear icon under the mobile view, then select the special template, then click save.

The next step you click edit html, look for the widget code back to top (here is the use of giving a title to the widget that is to make it easier to search), after finding add the following code: mobile='yes'and don't forget to save the template.

Example:

<b:widget id='HTML6' locked='false' title='Back to top' type='HTML' visible='true'>

After adding the code it will be like this:

<b:widget id='HTML6' locked='false' title='Back to top' mobile='yes' type='HTML' visible='true'>