Skip to main content

How to Go Back to Top in Blogspot from bottom of the Page?

How to Go Back to Top in Blogspot from bottom of the Page

 When you scroll down in a website you might have noticed a button at the site that says go back on top or Just a arrow symbol. This Code will give your the same functionality in our blog. All you have to do Copy paste the code in your Layout HTML.

i.e.

Go to :

Layout › Add a Gadget › HTML/JavaScript › Copypaste this Code below › Drag the Saved Script Down below towards the footer.

 


<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: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src=
"https://blogger.googleusercontent.com/img/a/AVvXsEg-bd7pd-BwjHPn8znkpJwyhyS-Q4NWckAyU505wwNxpOXvLU-CB3eWNYtUDFk5jSIH-7YtoswrrlwDWA54DKHfvmC-OYIzk_KTBmfwgdzyGpNytQ_xXZiaxWX4_jHoQo1Kqm8IvbwY76qUy93mRDreTO1qjI72eQ8ftWGlQjPustZElmPL9Qg5LJOK"
 
alt="Back to Top" /></a>
Copied

Customize img src with following prefered images

https://blogger.googleusercontent.com/img/a/AVvXsEgdF-g6vRkQnDdseTHFriEv618pU4FUbXE5TFD4gIdzaEIWIXp9pJ-h62nrdWA0cOxR-frfA3V0rl3Cj8nWmfKKlZW8n-dL3YTKSgzyQKALibjnVoTRuBTEB3tbYz32BjC6pSpnzt64eL4w9ga-_P-4AtudNah-kgG39A3jrOBhFi7DLg-djnI2wL4_
https://blogger.googleusercontent.com/img/a/AVvXsEh3odf5SUFWuw1_BrxtBdEy8vCoxUucgjtWC7_qhUxD_wKpOcEvcB0ScAm1VmQf5XidxQKCxa6Icbf5zUSfQZz8F2gxrTYVQFM8VlEpuulxwDx4LAvNg6HNWCkso7H-zEWQMWi4oYGD51KuqzGfAWMWNhtVdGjCVvs8dA24dvp5GlpVqPKL_hRI8c1D
https://blogger.googleusercontent.com/img/a/AVvXsEgcEkgJT79-etXFutApPyHopjvDQLOY_n06uuMem2HlrpWKrtKr1RflxxXq2K4FhtJ_2udqDVp3PlDDH8_6QwaIffdvVRr6-YaEGAD92IfAqzQtdBY6Jiirh79pk8H_yM75JzkSEbYcsqafBXZHjjpez-hi3Ex5nkw55JPJUhnUdjSAfMO29oCRSeHO
https://blogger.googleusercontent.com/img/a/AVvXsEi5xg25NOrF1BOnGZV33tE9iJAWieZt3DEhPgDpwpOGm17Av1RITUxOJtteS0ihD-glvi1oTkIdTRpjKWKC8vJeizwUHFDhTjZ09E97uPz4_my3hoDDwwn8dpWIHArnPqptJyDRZ9PwovAvuA313QO7V_PoqcUX_HJwCg--OjZ03GgcAomdbpsnTo8s
https://blogger.googleusercontent.com/img/a/AVvXsEjXFfXxmnVBdY8NcSI6RTvdddSluiMqRU9Esema9i0HF5XXXX8FdldlYxXHPAfsvExBM4TADZiqYmu93aS8TAAruYqTKvY0RtzSRlttygy4OTwG7bIEg2k0b02T6RejAjhaKs_UEChA8wqNxzZhjwblsaifFXubeRkD18LnEYve1O9E3NCR8xt0fpmJ
https://blogger.googleusercontent.com/img/a/AVvXsEhe8VrnBXE5OCTMmKtVgbOqqHuV-TWL1sYSWI-RQtcdjL4tjvXnvzo3hHosTdmSnTX0uO9pEivfY93iLDBXHW8vwq1tCsH9x4utRllnJPtR1iP2ML-Dmo2cfbP_G4qt_lipKLW5I72SwglhFL-E3EojTlw9Rt9gYFVkd1GahGXryO2HelL7GqYADR75
https://blogger.googleusercontent.com/img/a/AVvXsEg-bd7pd-BwjHPn8znkpJwyhyS-Q4NWckAyU505wwNxpOXvLU-CB3eWNYtUDFk5jSIH-7YtoswrrlwDWA54DKHfvmC-OYIzk_KTBmfwgdzyGpNytQ_xXZiaxWX4_jHoQo1Kqm8IvbwY76qUy93mRDreTO1qjI72eQ8ftWGlQjPustZElmPL9Qg5LJOK

Views:

Comments

Post a Comment

Back to Top

Popular posts from this blog

How to get View Count in every single page in blogspot / blogger?

Before we start let me answer some of your following questions that you might be thinking...   Q. What is "View Count" anyways? Ans. With View count you can keep track on how many people have visited your blog site with a total number of counts displayed in your blog. It also gives you a better idea how many people are coming to your blog daily. Q. Blogspot / Blogger already has this feature so what so special about this tutorial? Ans. Yes, I agree blogspot does have this feature and its great no coding involved but you cannot do this... Suppose you have made 2 posts: Page A, Page B. Whatif you want to know how many people visited Page A Vs Page B. Suppose people visited Page A - 100 times and Page B - 5 times. Blogspot View Count will show you only total visits i.e. 105 visits. And not for Page A or Page B specifically.  So to see Views for Each page... this is how to I did. Just copy paste this code on your blogspot page and you are good to go. <!--- //////////...
1 comment
Read more

[SOLVED] Google-served ads on screens without publisher-content

Waiting for Approval? And you get a mail something like this? ========================================= Your Publisher ID: pub-123456789 Sign In Thanks for submitting your site "<Your_WebSite.com>" for AdSense. The team has reviewed it but unfortunately your site isn’t ready to show ads at this time. There are some issues which need fixing before your site is ready to show ads. For more information, visit the ' Sites ' page in your account. You can find more details and application tips in the below video : We encourage you to review and update your site. Once you’ve done so, you can request a review. Our specialists will review your site for compliance with our Program policies , so make sure to resolve all of the issues. Watch our ' AdSense Site Approvals ' video series to troubleshoot your policy issues and start earning money from your site. Go to Sites ...
1 comment
Read more

How to Add Likes and Views Button in Blogspot?

Here I am going to show you a simple trick which can be used to keep track on every views plus add a like button with various customize options. But first lets just dive into the code. Instead of going into Layout we are going to paste this code in our Post Itself. Just change Compose View to HTML View & Paste it under your post content. This Code is for View Counter (Blogspot also has its own widget called Blog's Stats in Add a Gadget option. But it will not show you View Count on Each Post / Pages. But this code will. ) <!-- View Counter BEGIN --> <script> window .onload = function () { var xhr = new XMLHttpRequest(); var url = window .location.href.replace( "https://" , "" ).replace( /\//g , "" ); var urlr = url.substring( 0 , 53 ); //document.getElementById("demo").innerHTML = urlr; xhr.open( "GET" , "https://api.countapi.xyz/hit/" +urlr); x...
Post a Comment
Read more