How to Add Back to Top Button on Blogger Site

MD Mumin (ARYA)
3 Jul, 2020


Hello!

    Doston ma hu ARYA KHAN aaj ma aap logon ko bataunga blogger ki website ma back to top button ko kese add kare jo niche se direct hume top ma deta ha. aksar hum dekte ha ki kisi website ki niche ek button jisse click karte hi humko direct website ki top ma paucha deta ha. tho is button ko humare website ma add karne ke liya humko keya karna hoga.

Follow This Steps:

Sabse pehle jana hoga Blogger ma uske baad Theme ma uske baad Edit HTML ma jane ke baad. niche diya gaya steps ko same to same follow kare.

Step 1:

Aapko dhondna hoga </head> code ko. </head> ki tik upar ki line ma niche diya gaya code ko paste kare.


Code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>


Step 2:

Ab aapko dhondna hoga ]]></b:skin> code ko. ]]></b:skin> ki tik upar ki line ma niche diya gaya code ko paste kare.

Code:

/* CSS For Back To Top Button

----------------------------------------------- */
.back-to-top-by-tl-point {
position: fixed;


color: #000000;
bottom: 2em;
right: 0px;
text-decoration: none;


.back-to-top-by-tl-point:hover {
font-size: 12px;
padding: 1em;
display: none;
}


}


text-decoration: none;


Step 3:

Step 3 is final Step ab aapko dhondna hoga </body> code ko. same step 1 aur spet 2 ki tarah </body> ki tik upar ki line ma paste karna hoga lekin. Nche diya gaya style ma se jo aapko pasand aye usi code ko </body> ki upar ki line ma paste kare.

Style 1:





Code:

<!--Smooth Back to Top Button Start--> <script type='text/javascript'> jQuery(document).ready(function() var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top-by-blog-ornate').fadeIn(duration); } else { jQuery('.back-to-top-by-blog-ornate').fadeOut(duration); } }); jQuery('.back-to-top-by-blog-ornate').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script><a class='back-to-top-by-tl-point' href='#'><img alt='Back To Top' src='https://1.bp.blogspot.com/-rVLE76vsxfU/Xr-2QmCLWyI/AAAAAAAAAFA/TbytsIoAXU42MYzG1x7xbLnlNVoU8SZ6ACLcBGAsYHQ/s200/Back%2Bto%2BTop%2B1.png'/></a> <!--Smooth Back to Top Button End-->



Style 2:




Code:

<!--Smooth Back to Top Button Start--> <script type='text/javascript'> jQuery(document).ready(function() var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top-by-blog-ornate').fadeIn(duration); } else { jQuery('.back-to-top-by-blog-ornate').fadeOut(duration); } }); jQuery('.back-to-top-by-blog-ornate').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script><a class='back-to-top-by-tl-point' href='#'><img alt='Back To Top' src='https://1.bp.blogspot.com/-IqobBl1RRn0/Xr-2QTJ6q1I/AAAAAAAAAE8/LFko587ii4oiPpu_w8QzLo595edDzBFPQCPcBGAYYCw/s200/Back%2Bto%2BTop%2B2.png'/></a> <!--Smooth Back to Top Button End-->



Style 3:





Code:

<!--Smooth Back to Top Button Start--> <script type='text/javascript'> jQuery(document).ready(function() var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top-by-blog-ornate').fadeIn(duration); } else { jQuery('.back-to-top-by-blog-ornate').fadeOut(duration); } }); jQuery('.back-to-top-by-blog-ornate').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script><a class='back-to-top-by-tl-point' href='#'><img alt='Back To Top' src='https://1.bp.blogspot.com/-pM6v4gayy5Q/Xr-2Qvw5PAI/AAAAAAAAAFU/3Sgn63OJ3pkiRtPMdrrH_RzhA7tnk60lwCPcBGAYYCw/s200/Back%2Bto%2BTop%2B3.png'/></a> <!--Smooth Back to Top Button End-->



Style 4:





Code:

<!--Smooth Back to Top Button Start--> <script type='text/javascript'> jQuery(document).ready(function() var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top-by-blog-ornate').fadeIn(duration); } else { jQuery('.back-to-top-by-blog-ornate').fadeOut(duration); } }); jQuery('.back-to-top-by-blog-ornate').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script><a class='back-to-top-by-tl-point' href='#'><img alt='Back To Top' src='https://1.bp.blogspot.com/-_n4qpZb4k2M/Xr-2RCEqO-I/AAAAAAAAAFY/NrcYPspF7Q8KocnIz0SPMtndDPhPwwmrwCPcBGAYYCw/s200/Back%2Bto%2BTop%2B4.png'/></a> <!--Smooth Back to Top Button End-->


Style 5:





Code:

<!--Smooth Back to Top Button Start--> <script type='text/javascript'> jQuery(document).ready(function() var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top-by-blog-ornate').fadeIn(duration); } else { jQuery('.back-to-top-by-blog-ornate').fadeOut(duration); } }); jQuery('.back-to-top-by-blog-ornate').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script><a class='back-to-top-by-tl-point' href='#'><img alt='Back To Top' src='https://1.bp.blogspot.com/-_xy_RpChjNc/Xr-2RWa9iBI/AAAAAAAAAFc/qTPcjpvleXUzC7ziMo1oaKl-xJgMsIguwCPcBGAYYCw/s200/Back%2Bto%2BTop%2B5.png'/></a> <!--Smooth Back to Top Button End-->



Code dalne ke baad Save to theme par click kare.
Next Post Previous Post