ब्लॉगर में Back To Top बटन कैसे लगाएं

Back To Top एक ऐसा बटन है जो ब्लॉग विजिटर्स के लिए पृष्ठों को मैन्युअल रूप से स्क्रॉल किए बिना तुरंत ऊपर वापस जाना आसान बनाता है। यह बटन वास्तव में उपयोगी है अगर आगंतुक एक लेख पढ़ रहा है जिसकी सामग्री बहुत लंबी है और तुरंत शीर्ष मेनू पर लौटना चाहते हैं।

हम SVG आइकन का उपयोग करके बैक टू टॉप बटन बनाएंगे। इससे आपकी साइट या ब्लॉग में Awesome Font का उपयोग करने की तुलना में तेजी से लोड हो जाता है।

निश्चित रूप से आप सभी सही समझ रहे हैं?  खैर, आइए सीधे ट्यूटोरियल पर जाएं।

Back To Top बटन कैसे लगाए

1. नीचे दिए गए कोड को </head> ऊपर रखें.

<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>

2. इसके बाद नीचे दिए गए कोड को </body> के पहले जोड़ें.

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

3. आप अपने टेम्पलेट को Save कर परिणाम देखें.

निष्कर्ष

उम्मीद है कि यह छोटा लेख आप सभी को फायदा कर सकता है और अगर आपको कुछ भी पूछना है तो नीचे कमेंट करें। 

Related Posts