আপনি কি ব্লগার ওয়েবসাইটে Reading Progressive Bar যোগ করতে চান? আজকে আমি আপনার ব্লগার ওয়েবসাইটে Amazing Feature সমৃদ্ধ Reading Progressive bar যোগ করার জন্য একটি সহজ কৌশল আপনাদের সাথে শেয়ার করব।
সুতরাং, আপনার ব্লগে একটি Reading Progressive Bar যুক্ত এবং আপনার ব্লগকে Professional ও সুন্দর দেখানোর জন্য আপনাকে নিচে mention কৃত ধাপ গুলো অনুসরণ করতে হবে। কিন্তু এর আগে আমাদের জানতে হবে Reading Progressive Bar কী? এবং Reading Progressive Bar কেনো প্রয়োজন।
What is Reading Progressive Bar?
সাধারণভাবে বলতে গেলে Reading Progressive Bar হলো একটি বল্গ পোস্টের কতটুকু বাকী আছে তার একটি visual representation. যখন ভিজিটররা নিচে scroll করে, তখন Progressive Bar টি পূরণ হতে থাকবে। এটি নির্দেশ করে যে তারা কতটুকু পোস্টটি পড়েছে। যখন পোস্টের শেষের দিকে ভিজিটর চলে আসে তখন বারটি একেবারে পূর্ণ হয়ে যাবে।
Reading Progressive Bar কেনো প্রয়োজন?
যখন আপনি আপনার ব্লগে লম্বা কোনো আর্টিকেল প্রকাশ করেন, তখন ভিজিটরদের আপনার ব্লগে ধরে রাখা অনেক বেশি চ্যালেঞ্জিং হয়ে পড়ে। কারণ বড় আর্টিকেল পড়ার জন্য ভিজিটর দের অনেক বেশি সময় এবং নিচ পর্যন্ত scroll করতে হয়, যা বেশির ভাগ ব্যবহারকারী পছন্দ করেননা। কিছু কিছু ওয়েবসাইট আর্টিকেল এর মধ্যে ভিডিও ব্যবহার করে বা দৃষ্টিনন্দন ছবি ব্যবহার করে ভিজিটরদের ওয়েবসাইটে ধরে রাখার চেষ্টা করেন।
Reading Progressive Bar ভিজিটরদের নিচের দিকে স্ক্রল করতে উৎসাহিত করে। এটি ব্যবহারকারীদের লম্বা আর্টিকেল পড়তে এবং নিচের দিকে স্ক্রল করতে উৎসাহিত করে। অনেক জনপ্রিয় ওয়েবসাইট তাদের পাঠকদের আকৃষ্ট করার জন্য Reading Progressive Bar ব্যবহার করে থাকে।
তো চলুন শিখে নেওয়া যাক, কিভাবে ব্লগ সাইটে Reading Progressive Bar যুক্ত করবেন।
Step 1. At first, you have to go to the Blogger.com then go to Blogger dashboard.
Step 2. Go to the Themes Option and Click on Edit HTML Button.
Step 3. Copy the given CSS Code below and paste it above ]]></b:skin> tag.
/* Reading Progress Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;} .progress-bar{height:5px;background:#F86152;}Step 4. Copy the given JS Code from below and past it above </body> tag.
<script>
window.onscroll = function() {
myFunction()
};
function myFunction(){
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script> Step 5. Copy the below given html code and past it just below the <body> tag.
<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>
Conclusion
সুতরাং বন্ধুরা, যদি ব্লগারে Reading Progressive Bar যোগ করার জন্য এই পোস্টটি আপনার পছন্দ হয় তবে দয়া করে আপনার বন্ধুদের সাথে শেয়ার করতে ভূলবেননা। আমি মনে করি আপনি অবশ্যই বুঝতে পেরেছেন কিভাবে ব্লগারে রিডিং প্রগ্রেস বার যোগ করতে হয়।
এই আর্টিকেল সম্পর্কে আপনার যদি কোন প্রশ্ন থাকে বা সাহায্যের প্রয়োজন হয় দয়া করে কমেন্ট করুন।
ধন্যবাদ
Happy Blogging 😊