ब्लॉगर में Progress Scroll Bar कैसे जोड़ें - Tech Shadow

ब्लॉगर में Progress Scroll Bar कैसे जोड़ें

scroll progress indicator

स्क्रॉल बार की स्थिति का उपयोग करके हम आसानी से समझ सकते हैं कि वेब ब्राउज़र पर एक पेज कितना स्क्रॉल किया जाता है। एक कस्टम स्क्रॉल इंडिकेटर की कल्पना करें, जो हमारी इच्छानुसार पेज और स्टाइल पर कहीं भी रख सकता है।

और पढ़े : Blogger Mai “manage tracking your own pageviews” kya hai और इसे कैसे चालू करते है

हम स्क्रॉल बार की स्थिति को पकड़ने के लिए जावास्क्रिप्ट विंडो क्लास ऑनस्क्रॉल विधि का उपयोग कर सकते हैं और इसका उपयोग हमारे कस्टम संकेतक के निर्माण के लिए कर सकते हैं।

मुज़से मेरे कई दोस्त पूछ रहे थे की ‘How to create a page scroll indicator for Blogger in Hindi’ तो जवाब हाजिर है जी।

चलिए तो जानते है की ब्लॉगर में Progress Scroll Bar कैसे लगाया जा सकता है।

स्टेप १

सबसे पहले आप अपने ब्लॉगर को खोलिये फिर “Theme” में जाकर “Edit HTML” मई जाये।

edit html
स्टेप १

स्टेप २

फिर कोड में एकबार कर्सर को ले जाकर एक बार टैप करे। फिर CTRL+ F को दबाये और “]]></b:skin>” को ढूंढे और उसके ऊपर निचे दिया गया कोड डाल दे।

.scroll-progress-indicator {   width: 0;   height: 5px;   background: blueviolet;   background-position: bottom;   position: fixed;   top: 40px;   left: 0;   z-index: 500; }
Code 20 3
स्टेप २

स्टेप ३

फिर कोड में एकबार कर्सर को ले जाकर एक बार टैप करे। फिर CTRL+ F को दबाये और ” <body>” को ढूंढे और उसके निचे दिया गया कोड डाल दे।

<div class='scroll-progress-indicator'/>
Code 20 2
स्टेप ३

स्टेप ४

आखिर में एकबार कर्सर को ले जाकर एक बार टैप करे। फिर CTRL+ F को दबाये और “</body>” को ढूंढे और उसके निचे दिया गया कोड डाल दे।

<script>const scrollProgressIndicator = document.querySelector(
  &quot;.scroll-progress-indicator&quot;
);

const postContent = document.querySelector(&quot;.hentry&quot;);

window.addEventListener(&quot;scroll&quot;, () =&gt; {
  let scrollAmount = window.scrollY;
  let postHeight = postContent.clientHeight – window.innerHeight + 120;

  let progress = Math.min((scrollAmount / postHeight) * 100, 100);

  scrollProgressIndicator.style.width = progress + &quot;%&quot;;
});
    </script>
    <script src=’https://apis.google.com/js/platform.js’/>
Code
स्टेप ४

हो गया आपके ब्लॉगर साइट पे अब Progress Scroll Bar लग जायेगा।

कोई और परेशानी हो तो आप निचे कमेंट कर सकते है।

Leave a Comment