• ABOUT
  • CONTACT
  • PRIVACY
  • SITEMAP
  • OFFICE
  • DOWNLOADS

টেক রাজ্য

বাংলা ভাষায় প্রযুক্তির রাজ্যে

Menu
  • HOME
  • Tech News
  • Create Blog
  • Blog Design
    • Sub-Menu 1
    • Sub-Menu 2
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
    • Sub-Menu 3
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
  • Blogger Widget
  • Computer
    • Sub-Menu 1
    • Sub-Menu 2
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
    • Sub-Menu 3
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
Home Blog Design Blogger Widgets How to add the Back to Top button to the blog?

Sunday, June 03, 2018

CEO

How to add the Back to Top button to the blog?

  CEO      Sunday, June 03, 2018     Blog Design , Blogger Widgets      No comments   
Back to Top Button is an important part of blog or website. It makes a website attractive as it makes it easier for visitors to see all the pages of your web site. It was a lot of time that a lot of comments on your blog posts a lot, but when the visitor read your post, a lot of pages went down. At that time the visitor took a long time to come back. As a result, the visitor was annoyed once and again to come up again. But if you add a little back to top button, the visitor will be able to come to your page headers with just one click. I'm posting to the Back to Top button today, this is not an image created by it. It is fully integrated with CSS3 and JavaScript. It has two color effects. Normally, one kind of color show will be displayed, and after the mouse is in the form of a mouse, it will show another type of color. It can be moved very smoothly using it. Take a demo through the photo below or you can see its demo if you notice it at the bottom right of my blog.


How to add: To add it, you will not have any different ideas about your web design. Those who did not do the basement on any day, can easily get it added.
  • First log in to your Blogger account.
  • Then go to your blog's dashboard.
  • Now from the Layout option on the left side, click on Add a Gadget.
  • Then click on HTML / JavaScript.
  • Now copy the code below and paste it into the HTML / JavaScript box.
[code start] <script src="https://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("https://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> [code end]

  • Now click Save and then Ok
Admin

About Writer
Nothing to say
Follow her @ Twitter | Facebook | Google+

পোষ্টটি শেয়ার করুনঃ
Tweet Share Share Share Share Share

Related Posts

← Newer Post Older Post → Home

0 comments:

Post a Comment

It can be commented that the post was good. You can also comment on any problem. We will try to solve as much as possible.

The Tech Passion

Date & Time

Current local time in
Bangladesh

  • Popular
  • Comments
  • Archive

Popular Posts

  • ব্লগারে একটি আকর্ষণীয় HTML Sitemap Page তৈরী করে নিন
    হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়ত...
  • Create your own professional blog (Part - 09)
    You may know that the easiest platform to create a blog for personal or business purposes is Google's Blogger. It is very easy to cre...
  • How does credit card work?
    It is very close to taking credit cards from the bank or getting a micro credit or bank loan from the rural bank. A little bit of credit c...

Blog Archive

  • ►  2019 (28)
    • ►  July (5)
    • ►  June (12)
    • ►  May (7)
    • ►  April (3)
    • ►  February (1)
  • ▼  2018 (107)
    • ►  December (2)
    • ►  November (18)
    • ►  September (15)
    • ►  August (25)
    • ►  July (14)
    • ▼  June (18)
      • An interesting Email Subscription Form widget for ...
      • Change blogger post url after published posts in y...
      • How to Add Floating Social Media Sharing Buttons i...
      • How to add the Facebook Page Plugin Widget to the ...
      • How to add automatically "Guest Author Box" to the...
      • Add attractive header to Social Media Icons
      • How to use font awesome icon in blogger ?
      • How to index blog posts in search engine quickly ?...
      • Blogger's two unique Search Box Widgets
      • Create an interesting HTML Sitemap page in Blogger...
      • Adding to the blog Scrolling Facebook Popup Like B...
      • Add a Stylist Page Number Navigation to the blog
      • Recently 10 Important Google SEO Tips
      • Add Facebook and Blogger Multi Tab comment system ...
      • How to add facebook comment box in blogger ?
      • How to add the Back to Top button to the blog?
      • How to make SEO blog post title useful?
      • How to give Rollover Effect to the two blog posts?...
    • ►  May (3)
    • ►  April (2)
    • ►  March (6)
    • ►  February (1)
    • ►  January (3)

Featured Post

WordPress.Com এবং WordPress.Org এই দুই এর মধ্যে পার্থক্য কি ?

হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়ত...

Contact Us

Name

Email *

Message *

Categories

  • Tips & Tricks (35)
  • Blog Design (28)
  • LifeStyle (13)
  • Blogger Widgets (12)
  • Create Blog (10)
  • Internet (10)
  • Technology (10)
  • Computer (9)
  • Seo (9)
  • Tech News (8)
  • Facebook (5)
  • Freelancing (5)
  • Google Adsense (5)
  • Health Tips (4)
  • Mobile Tips (3)

Our Location

About Admin

I'm not that smart enough to be someone's favorite man. Of course I have a good mindset that can be a favorite friend of many. Maybe you can be your favorite friend. Let's do the same with which to behave like this. So maybe everyone does not love me or does not keep a list of good friends. I did not make my own picture later. Of all, the one-rose rose greetings.
Get more information about me, please ....click here.....

Feelings: 
*** Love never understood Do not seek passion. All day, books, sports and songs are heard.

Oh! Yes - "I'm not waiting for a prince, I'm waiting for him, the way I'm his prince"

Join With Us

For Get All Notifications Update to This Blog!

email updates

Most Commented Post

Copyright © 2018-2019 TechRajjo.Com All Rights Reserved | Design By: AHK Team Bangladesh