Skip to content
99techspot logo
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
99techspot logo

Stylish Back To Top Button For Blog Website

Posted onMay 11, 2022May 9, 2020 Updated May 9, 2020

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.

  •  How to Add Stylish Notification bar On Blog Website

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.
add back to top button on blog

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. 

back to top

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

2. 

2.%2BBack To Top button

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

3.

back to top button for blog

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

4. 

5.%2BBack To Top%2BButton

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

5.

Back to Top

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.

  • Stylish Back To Top Button For Blog Website
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:- 
  • Instagram Popular Hashtags Get More Likes
  • TOP 5 Best Paise Kamane Wale Apps 2019
  • 50+ Best Blogger widgets And Plugins For website

Post navigation

Previous Previous
FilmyZilla 2022 : HD Bollywood Hollywood Hindi Dubbed Movies For Free
NextContinue
DjPunjab | All Punjabi HIndi Bollywood Songs, Hindi MP3 Songs
Download Best UPI Apps :-

Download Google Pay Get 150 Rs For Free Vaild 2 Day
Downlaod Phone PeGet 100 Rs For Free Vaild 2 Day
Download Paytm Get 150 Rs For Free Vaild 2 Day
Open Your Demet Account on : -

Download Upstox Free Demat Account
Download Upstox ProOpen Free Demat Account
Download GrowOpen Free Account

Latest Tech update :-


  • Contact us
  • About us
  • Advertisement
  • Guest Post
  • Privacy Policy
  • About Author
Scroll to top
  • Make Money
  • Whatsapp
  • Facebook
  • Instagram
  • Interenet
  • Android Apps
  • Computer Tricks
Search