Stylish Back To Top Button For Blog Website

By
Sultan
3
254 views

Blog website Me Back to top button ya Scroll to top button ko kaise add karte hai. Kya aapke blog website smooth scroll back to top button hai. hai. agar aap internet par stylish back to top button search kar rahe hai aapne blog website ke liye to is post me aapko back to top button mil Jayenge.

WordPress blog website me Scroll to top button ko add karne ke liye aap plugins ka use kar sakte hai.  Aur BlogSpot Blog me scroll to top button ko add karne ke liye css coding ya html coding se scroll button ko add kar sakte hai.

back to top button

Back to top button ya Scroll button blog me add karne se reader ko scroll karne me aasni ho jati hai. Becouse kai article bahut bade hote hai. aur reader ko scroll kare me bahut time lag jata hai. Reader aapse bahut smart hote hai.

wo sirf unhi sites ko like karte hai. jha unhe puri facility mile aur badiya content. So reader ko aapne blog ke traf attract karne ke koshis kare.

Aise bahut sari Chije hoti hai. jo ek site ko perfect banati hai. Jaise Widgets, Fonts, theme design aur bahut sari chije perfect honi chaiye.

Aur is post me Scorll to top button ko blog me add karne ke bare me janege. back to top button ya scorll to top button add karne ke liye niche diye gaye step ko follow kariye.

 

How to Add Stylish Back to top Button on websites.

Step 1.

  1. Sabse pahle aapne blogger dashboard me theme par click kariye.
  2. Ab Edit HTML par click kare.
  3. Ab CTRL+F Dabakar search box me Code ko search kare.
  4. <head< Ke Niche is css code ko add karke Template save kar de.

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

Step 2.

  1. Ab aapko Dubara dashboard me layout par click karna hai.
  2. Ab khi bhi add Getget par click kare.
  3. Ab HTML Javascript par click kare.
  4. Ab new window me is css code ko copy karke paste karna hai.

Finally ab widget ko save kar dijye.

<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://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png” alt=”Back to Top” / ></a>

Customization:-
Agar aap Scroll to top button ke icon ko Change karna chahte hai. To aap highlight code ke jagah par new icon ke image url enter karke button icon ko change kar skate hai.

Me aapko kuch back to top button icon ke image url de rha hu. aap in me se khoi bhi icon select kar lijye.

1. 

https://3.bp.blogspot.com/-hvziCLO_YK8/WjVaaCAYohI/AAAAAAAAFgI/hHMB-tOA7Jc3ScjShyIu4dOTnGSaRcXUgCLcBGAs/s1600/Empty.png

2. 

https://1.bp.blogspot.com/-eNPwC_O74Mo/WR9GirKOGTI/AAAAAAAAI1I/GXVx5JDiW5kWCaMZSrF6F-4CmHoGxuiJACLcB/s1600/2.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png

3.

https://2.bp.blogspot.com/-nrA_YDld9XE/WR9GimmkDSI/AAAAAAAAI1M/Uga1x4QSPsYkS_DnY9v_AXMFssqOsHJoQCLcB/s1600/3.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png

4. 

https://3.bp.blogspot.com/-uRJk9vyZETg/WR9Gj-e3pgI/AAAAAAAAI1c/hqVojaSG4nE5fljDv-tgQPWGlE37WnX5wCLcB/s1600/5.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png

5.

https://4.bp.blogspot.com/-07kLAsawNJ4/Wj3ZS2CTSQI/AAAAAAAAFlg/XlqeZAHtJdggX37jziUXGBwa5bG9X9vrACLcBGAs/s1600/Back-to-Top.png

In  smooth back to top button icon ke allawa bhi khoi bhi icon design karke highlight code ke jagah pe add kar sakte hai. Is triake se blog me back to top button add kar skate hai.

Finally ab aapke blog website me scroll to top button add ho gaya hoga. agar back to top button ya scroll to top button ko blog me add karne me khoi problem ho rhi hai. to Comment karke puche.

Aur sath hi Comment karke jarur bataye aapko back to top buttons post kaise lagi. blog me Other widget add karne ke liye hamari all blogger widget and tool wali post ko read kariye. Aur Is post ko social media aur other blogger ke sath jarur share kariye.
Popular Posts:- 

RELATED ARTICLESMORE FROM AUTHOR

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here