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="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
    jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
    jQuery('.back-to-top').fadeIn(duration);
    } else {
    jQuery('.back-to-top').fadeOut(duration);
    }
    });

    jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
    })
    });
    </script>
    <style>
    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("http://4.bp.blogspot.com/-80MHDTM3XRQ/VSPMSNa4fTI/AAAAAAAAD8w/e2Mktw2DY8Q/s1600/up.png");
    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 {
    background-color:#000000;
    text-decoration: none;
    }
    </style>
    <a href="#" class="back-to-top" title="Scroll to Top" /></a>
        • Finally click to save > Ok
          Previous Post
          Next Post

          0 comments: Post Yours! Read Comment Policy ▼
          লক্ষ্য করুনঃ
          পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

          Post a Comment

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