How to add Back To Top Icon on Blogger

By -
How to add Back To Top Icon on Blogger
Back to the basics or some people called back to top icon or page scroll top that most the website designers or bloggers add it to the button of a right-hand side when you scroll web page down. When you visit someone blog website that has long display from the top of post page or home page to the bottom, they will use the function called Back to top or back to the basics that allows their visitors return back to the top of page by one click on this function icon without spend a long time to scroll by using mouse manual. This makes your blog/website be better navigation and also make it more professional look and easy to install into your blog/website.

How to add back to the top icon on blogger?


Step 1: Login to your blogger account

Step 2: In dashboard just click on "Template" >> "Edit HTML"

Insert HTML and Java Scribe Text Box

Step 3: Click anywhere in HTML code area and press Ctrl + F key or press Command + F (Mac) to search the </body> tag.

Step 4: Choose one of the below HTML code within three different styles and paste it above  </body> tag. Then just click on "Save Template" to save and change.

Back To Top Style 1 

Scroll back to Tob Style 1
<!--Back to Top Button Start-->
<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>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0O77Pym0rNLVZ2uVnIBHUAJJJDpdPHrO2r0mA01UoiIHcb5rgN4LQ8vJ61SaBvj-nBf3UhkHckx3fpSfD3vPVFeVcyfIx7jNjUkbaxcv2wyEVLsCwO46Dg1s4cXM71GUJ_Pg8pVBzDic/s1600/styel+%25232.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->

Back To Top Style 2

Scroll back to Tob Style 2
<!--Back to Top Button Start-->
<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>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWFuVaxkWSOx3bc4IG0wLLBHBqGJvnwx_if9iU6-6Hg5lxzJHCUHAVFwbEO6ELTCOAgTXIESYxS1gOT9TunDmq-htvQJ6jqLmk5nvG7TLYKj3Rd6wvSUx27khgRawQJEXGuPKH4mJNL0/s1600/style+%25231.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->

Back To Top Style 3 

Scroll back to Tob Style 3
<!--Back to Top Button Start-->
<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>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNbXU8M2JAXXIP84bqN5bUWLTSv_MZt1OyrEx5yFvtWMX6cXkqWHC66MbsFpmPWiDisbxbwzIPyz88rjq-ZGSYQvAE7my_Nh6EJbfVLLvL_l1I0FB9UfSLPojLgqNYll0Lu7XLRWaTxCM/s1600/style+%25233.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->

Back To Top Style 4

Scroll back to Tob Style 4

<!--Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() &gt; offset) {
jQuery(&#39;.back-to-top&#39;).fadeIn(duration);
} else {
jQuery(&#39;.back-to-top&#39;).fadeOut(duration);
}
});
jQuery(&#39;.back-to-top&#39;).click(function(event) {
event.preventDefault();
jQuery(&#39;html, body&#39;).animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
img-border: 0px;
z-index: 1000;
}
.back-to-top img {
border: 0px;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a class='back-to-top' href='#'><img alt='Back to Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_dKAoYZemGGfMqhM1YyK8p_ppS5ciJK4h8sxKkAfDwH83Nmp2HUPSHlGrbe2M-FM7KQeibYrrEAVdhQL5g7WV6bqm-O3Dg2H75pdC9vbxN4If8LiTWv364stOe-KBIqfyluL3cp_m-U/s1600/back+top.png'/></a>
<!--Back to Top Button End-->


Popular posts from this blog

How an SEO Consultant Can Grow Your Business

By -
Image
You may know your business well, but do you know what can boost your business? If you think digital marketing is all about making random posts with relevant hashtags on social media, you have got it wrong. The world of digital marketing is vast and social media handling is just one tiny aspect of it. You may know the basics of SEO theoretically, but executing it timely can be a tad bit difficult and you will soon find yourself muddled in the realm of digital marketing. This is precisely why we have “experts” in every field and an SEO consultant is one of them. This is a sample of the SEO Audit Tips that every SEO Consultant Report to the website owner. What Does an SEO Consultant Do? An SEO consultant will first check the health of your website or you may call it the SEO audit. This audit is delivered in the form of a report. You can find all the problem areas in this report and a customized solution is provided for the same. This report is often provided for free of cost by a mos...
Read more

5 Mistakes That Make Your Blog Useless

By -
Image
Frequently blogger site whine that after a great beginning, a year later their blog is as dead as can be. This is a usual problem that often focuses on a tiny list of common blunders made by the blog writer. A blog writer can sit back and anticipate the blog to do all the benefit them, which is a horrible way to technique blog writing. 5 Tips On Finding Effective Topics would tell you that wonderful blog writing takes a certain quantity of devotion and also difficult effort making it work. You have to place effort right into a blog to suffer it, especially after the first month or two of completing the layout. Lots of people function so difficulty throughout the initial design stage that they get careless after it is complete. To avoid this happening to your blog, take a look at these five usual mistakes that can bury a blog. 1. Occasional Updates Among the greatest blunders, a blogger could make is to "overlook" regarding uploading. One of the most successful blog ...
Read more

What is Authority Optimization and Why Does It Matter Now More Than Ever?

By -
Image
There are three words you would repeatedly hear when it comes to search engine optimization: content, relevance, and authority. Content and relevance are important to drive up rankings and remain updated for SEO purposes. But what about that last one—authority? Does your brand understand authority when it comes to optimization? Read this article for a brief primer on authority and how to optimize your content ideally to increase this aspect: Understanding Authority in the Context of SEO Image Source: https://pixabay.com/en/analytics-charts-graphics-marketing-2618277/ Search engines algorithms are becoming more specific year by year. Try to think about web search in a manner a company like Google does. They want to make each result a user gets as relevant as possible to the search phrase. In addition, search engine companies want to offer monetized links in the least intrusive manner possible. In recent years, there’s another major concern for search results: accuracy. Rememb...
Read more