Monday, July 25, 2016

How to add Back to Top button on blogspot site?

Back to top button for the web site is an important part of the blog. This is a Web site that results in the same way as the through-traffic to your web site easier delving into the pages. There were many times those lots of your blog post or comment on a post much bigger, a lot of pages, the visitor went down after reading your post. 

At the time, the visitors took a long time to come over again. As a result, the times that were to come to the top of the visitors seemed angry. Back to Top button down a little, but the visitor will be able to move to the header of your page with just one click. Back to Top Button today's post, I'm not made it through the image. This is entirely a combination of CSS3 and JavaScript. It has two color effects. Normally one type of mouse, the mouse-catching color to the show, and will show the kind of color. Smoothly it is able to move on. A demo can be seen in the image below in the lower right side of my blog, or if you notice that you can see the demo.

How to Added this Widget

To add it to your web design ideas will not be any different. Who has not dwelling on any day blog more easily be able to add it.
  1. First, log in to your Blogger account.
  2. Then go to your blog dashboard.
  3. Add a Gadget from the left side of the Layout options to clean.
  4. The HTML / JavaScript and clean.
  5. Now, copy the following codes HTML / JavaScript paste it into the box from bellow Code or, download link.
    <script src=""></script>
    jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
    } else {

    jQuery('.back-to-top').click(function(event) {
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
    div#page {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    .back-to-top {
    position: fixed;
    bottom: 35px;
    right: 10px;
    text-decoration: none;
    width: 10px;
    height: 20px;
    background-color: #007ABE;
    background-image: url("");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 2px 2px 2px 2px;
    font-size: 12px;
    padding: 1em;
    display: none;
    .back-to-top:hover {
    text-decoration: none;
    <a href="#" class="back-to-top" title="Scroll to Top" /></a>
        • Finally click to save > Ok
          Previous Post
          Next Post

          Show Comments: OR

          0 comments: Post Yours! Read Comment Policy ▼
          Attention Please
          No comments that are not related to the post can be made. Do not share your blog link without any reason. Always try to give positive comments. We evaluate all opinions equally and try to answer them in due course.

          Post a Comment

          Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE