ব্লগার পোস্টে Floating Progress Bar যুক্ত করুন সহজেই।

আসসালামুআলাইকুম বন্ধুরা আশা করি ভালোই আছেন আমিও ভালোই আছি এবং আপনাদের মাঝে আবার নতুন এবং দারুন একটি পোস্ট নিয়ে উপস্থিত হয়েছি, এখানে যারা ব্লগার আছেন আশাকরি , তাদের খুব কাজে লাগবে।
আজকের পোস্টের মূল বিষয় আশাকরি টাইটেল দেখে বুঝেগেছেন। তবুও আসুন একটু জানার চেষ্টা করি।

Floating Progress Bar Script কি এবং এর কাজ কি?

আপনার ব্লগে যখন কেউ কোনো আর্টিকেল পড়বে, তখন এই Progress Bar তার পড়ার অগ্রগতি শতকরা ভাগে দেখায়। সাথে নিচে ডানদিকে একটা গোলাকার বাটন থাকে, যা ক্লিক করলে দ্রুত পেজের উপরে ফিরে যায়। এটি ইউজারদের পড়ার অভিজ্ঞতা অনেক বেশি স্মুথ ও স্বচ্ছন্দ করে। এটাতে ইউজার কত পার্সেন্ট পোস্ট পড়ছেন তার জন্য কতো সময় লেগেছে এবং কতো পার্সেন্ট বাকি আছে সব দেখতে পারবেন

এই রিডিং প্রগ্রেস বার এবং টপ বাটন এর ফিচারসমূহ

১. আর্টিকেল পড়ার অগ্রগতি দেখায়: পেজের উপরের দিকে একটা পাতলা বার থাকে, যা দেখায় আপনি কতটুকু পড়েছেন। যেমন ধরুন ৩০% পড়া হয়ে গেছে।

২. পড়ার সময় অনুমান দেয়: নিচে একটা গোলাকার বাটনের মধ্যে কত মিনিট বাকি আছে সেটাও দেখায়, যা ইউজারকে সময় বুঝতে সাহায্য করে।

৩. টপে ফিরিয়ে দেয়ার বাটন: নিচের ডানদিকে একটা গোলাকার বাটন আছে, যেটা ক্লিক করলে বা কী-বোর্ড থেকে এন্টার/স্পেস দিলে পেজের উপরে চলে যাবে।

৪. স্বয়ংক্রিয় অ্যানিমেশন: বারটা স্বচ্ছন্দে বাড়ে বা কমে স্ক্রল অনুযায়ী, আর বাটন ধীরে ধীরে দেখা বা লুকানো হয় স্ক্রল অনুযায়ী।

৫. কনফিগারেশন সহজ: কোডে সহজে পরিবর্তন করতে পারেন, যেমন কোন এলিমেন্টে কাজ করবে, কোথায় বাটন দেখাবে, কত শব্দে শুরু হবে প্রগ্রেস বার, ইত্যাদি।

৬. মোবাইল এবং ডেস্কটপ উভয়ে কাজ করে: ছোট বা বড় স্ক্রিনে সুন্দরভাবে চলবে, মোবাইলে বাটনের সাইজ ঠিক থাকে।

৭. এক্সেসিবিলিটি ফিচার: বাটনে ট্যাব দিয়ে ফোকাস করতে পারবেন এবং কী-বোর্ড থেকে এন্টার বা স্পেস চাপলেও কাজ করবে।

৮. দ্রুত রেসপন্স: স্ক্রল ইভেন্টকে রিকোয়েস্ট অ্যানিমেশন ফ্রেম দিয়ে হ্যান্ডেল করে, যা ব্রাউজারকে খুব দ্রুত ও হালকা রাখে।

৯. পড়ার শব্দ ও সময় গণনা: পেজের টেক্সট থেকে শব্দ সংখ্যা নিয়ে আনুমানিক সময় বের করে দেখায়, যা ব্যবহারকারীকে সাহায্য করে বুঝতে কত সময় লাগবে।

১০. ছোট পর্দায় ও ছোট আর্টিকেল এ লুকিয়ে যায়: যদি লেখাটা খুব ছোট হয় বা মোবাইল হলে বাটন বা প্রগ্রেস বার লুকিয়ে রাখা যায়, যাতে ব্যাঘাত না ঘটে।

Progress bar এর স্ক্রিনশট।

এখান থেকে কোডটি কপি করুন।

অথবা নিচের কোড বক্স থেকে কপি করে নিন।

</p> <p>//<![CDATA[<br /> (function(){<br /> // CONFIGURATION<br /> const config = {<br /> articleSelector: '.post-body, .entry-content, article, .post',<br /> minWordsToShow: 100,<br /> position: 'right', // 'right' or 'left'<br /> scrollToTopDuration: 550,<br /> readingWpm: 230,<br /> hideOnMobile: false,<br /> showAfterPx: 20<br /> };</p> <p> // CREATE ELEMENTS<br /> // Progress Bar Container<br /> const progressWrap = document.createElement('div');<br /> progressWrap.id = 'bp-progress-wrap';<br /> progressWrap.setAttribute('aria-hidden', 'true');<br /> document.body.appendChild(progressWrap);</p> <p> // Progress Bar<br /> const progressBar = document.createElement('div');<br /> progressBar.id = 'bp-progress';<br /> progressWrap.appendChild(progressBar);</p> <p> // Floating Pill<br /> const pill = document.createElement('div');<br /> pill.id = 'bp-pill';<br /> pill.setAttribute('role', 'button');<br /> pill.setAttribute('tabindex', '0');<br /> pill.setAttribute('aria-label', 'Reading progress. Click to go to top.');<br /> pill.innerHTML = `</p> <div class="bp-circle" aria-hidden="true">↑</div> <div class="bp-text"> <div class="bp-percent">0%</div> <div class="bp-eta">0 min</div> </p></div> <p> `;<br /> document.body.appendChild(pill);</p> <p> // STYLE<br /> const style = document.createElement('style');<br /> style.type = 'text/css';<br /> style.appendChild(document.createTextNode(`<br /> :root{<br /> --progress-height: 6px;<br /> --progress-gradient-start: #4facfe;<br /> --progress-gradient-end: #00f2fe;<br /> --pill-bg: linear-gradient(135deg,#0084ff,#00bfff);<br /> --pill-color: #fff;<br /> --pill-shadow: 0 8px 24px rgba(4, 46, 88, 0.18);<br /> --pill-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;<br /> --pill-size: 56px;<br /> --pill-radius: 14px;<br /> --zindex: 99999;<br /> }<br /> #bp-progress-wrap{<br /> position: fixed;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: var(--progress-height);<br /> background: transparent;<br /> z-index: calc(var(--zindex) - 1);<br /> pointer-events: none;<br /> }<br /> #bp-progress {<br /> width: 0%;<br /> height: 100%;<br /> background: linear-gradient(90deg, var(--progress-gradient-start), var(--progress-gradient-end));<br /> transition: width 0.18s linear;<br /> will-change: width;<br /> box-shadow: 0 0 12px rgba(0,0,0,0.08);<br /> }<br /> #bp-pill {<br /> position: fixed;<br /> right: 18px;<br /> bottom: 18px;<br /> z-index: var(--zindex);<br /> display: flex;<br /> align-items: center;<br /> gap: 10px;<br /> min-width: var(--pill-size);<br /> height: var(--pill-size);<br /> padding: 10px 14px;<br /> border-radius: var(--pill-radius);<br /> background: var(--pill-bg);<br /> color: var(--pill-color);<br /> box-shadow: var(--pill-shadow);<br /> font-family: var(--pill-font);<br /> font-size: 14px;<br /> cursor: pointer;<br /> user-select: none;<br /> transform-origin: center;<br /> transition: transform 0.18s ease, opacity 0.18s ease;<br /> opacity: 0.98;<br /> }<br /> #bp-pill .bp-circle {<br /> width: 36px;<br /> height: 36px;<br /> min-width: 36px;<br /> border-radius: 50%;<br /> background: rgba(255,255,255,0.12);<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> font-weight: 700;<br /> font-size: 13px;<br /> }<br /> #bp-pill.bp-hidden { opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; }<br /> #bp-pill .bp-text {<br /> display:flex;flex-direction:column;line-height:1;<br /> }<br /> #bp-pill .bp-text .bp-percent { font-weight: 700; font-size: 14px; }<br /> #bp-pill .bp-text .bp-eta { font-size: 11px; opacity: 0.92; }<br /> @media (max-width:600px){<br /> #bp-pill { right: 12px; left: auto; bottom: 14px; padding: 8px 10px; min-width: 48px; height: 48px; gap: 8px; }<br /> #bp-pill .bp-circle { width:32px; height:32px; min-width:32px; font-size:12px; }<br /> #bp-pill .bp-text .bp-percent { font-size:13px; }<br /> #bp-pill .bp-text .bp-eta { font-size:10px; }<br /> }<br /> `));<br /> document.head.appendChild(style);</p> <p> // Variables<br /> const percentEl = pill.querySelector('.bp-percent');<br /> const etaEl = pill.querySelector('.bp-eta');</p> <p> // Set pill position left/right<br /> if(config.position === 'left'){<br /> pill.style.left = '18px';<br /> pill.style.right = 'auto';<br /> }</p> <p> // Find article content<br /> const article = document.querySelector(config.articleSelector);</p> <p> // Smooth scroll to top function<br /> function smoothScrollToTop(duration){<br /> const start = window.scrollY || window.pageYOffset;<br /> const startTime = performance.now();<br /> function tick(now){<br /> const elapsed = now - startTime;<br /> const t = Math.min(1, elapsed / duration);<br /> const eased = 1 - Math.pow(1 - t, 3);<br /> window.scrollTo(0, Math.round(start * (1 - eased)));<br /> if(t 0 ? Math.round((scrollTop / maxScroll) * 100) : 0;<br /> pct = Math.min(100, Math.max(0, pct));<br /> progressBar.style.width = pct + '%';<br /> percentEl.textContent = pct + '%';</p> <p> if(article){<br /> const fullText = article.innerText || article.textContent || '';<br /> const {words, minutes} = computeReadingTime(fullText);<br /> const totalMinutes = Math.max(1, Math.round(words / config.readingWpm));<br /> const remaining = Math.max(0, Math.ceil(totalMinutes * (1 - pct/100)));<br /> etaEl.textContent = (remaining > 0 ? remaining + ' min left' : 'Few secs');<br /> }</p> <p> if(scrollTop > config.showAfterPx && (!config.hideOnMobile || window.innerWidth > 600)){<br /> pill.classList.remove('bp-hidden');<br /> } else {<br /> pill.classList.add('bp-hidden');<br /> }<br /> }</p> <p> // Click and keyboard accessibility for pill<br /> pill.addEventListener('click', function(e){<br /> e.preventDefault();<br /> smoothScrollToTop(config.scrollToTopDuration);<br /> });<br /> pill.addEventListener('keydown', function(e){<br /> if(e.key === 'Enter' || e.key === ' '){<br /> e.preventDefault();<br /> smoothScrollToTop(config.scrollToTopDuration);<br /> }<br /> });</p> <p> // Initialization function<br /> function init(){<br /> if(!article){<br /> // no article? show simple progress bar only<br /> document.documentElement.classList.add('bp-no-article');<br /> } else {<br /> const txt = (article.innerText || article.textContent || '').trim();<br /> const words = txt.split(/\s+/).filter(Boolean).length;<br /> if(words </p> <p>

তারপর নিচের দেখানো পদ্ধতিতে ব্লগার এ পেস্ট করুন।

প্রথমে blogger এ প্রবেশ করে আপনে যে সাইটে স্ক্রিপ্ট এ্যাড করতে চান সেই সাইট ওপেন করুন। এরপর নিচের ছবির মতো theme এ ক্লিক করুন।

তারপর ডাউন 🔻 তে ক্লিক করে Edit HTML এ ক্লিক করুন।

Edit HTML এ ক্লিক করলেই আপনার theme এডিটর ওপেন হবে, সেটা স্ক্রোল করতে করতে একবারে নিচের দিকে জান এবং body ক্লোজিং ট্যাগ এর আগে নীচের দেখানো ছবির মতো জায়গায় পেষ্ট করুন।

আবার সেভ করে সাইট ভিউ এ গিয়ে যেকোনো পোস্ট ওপেন করুন এবং progress বারটি উপভোগ করুন।

তো বন্ধুরা আজকের পোস্টে এই পর্যন্ত আবারো নতুন কোনো পোস্ট এ দেখা হবে ইনশাআল্লাহ। ততদিন ভালো থাকুন সুস্থ থাকুন।। Banglatrick এর সাথেই থাকুন।

আর যদি ফেসবুক ক্যাপশন, বায়ো স্ট্যাটাস প্রয়োজন হয় তাহলে আমার সাইট থেকে ঘুরে আসতে পারেন।

BanglaFeel.top