Step:1
সর্বপ্রথমে নিচের CSS Code টি Copy করুন । AndThan Edit HTML এ গিয়ে ]]></b:skin> এর উপর নিচের Copy করা CSS Code টি Past করুন ।
/* Progress Reading Bar by Techy DarshaN*/
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px; background: linear-gradient(to right, #ff3030 ,#ff6f00 ,#ffc400);}
Step:2
এরপর নিচের JavaScript Code টিকে Copy করুন এবং Edit HTML এ গিয়ে Close </body> tag এর উপর নিচের Copy করা JS Code টি Past করুন ।
<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:3
সবশেষে নিচের HTML Code টি Copy করুন । AndThan Edit HTML এ গিয়ে <body> tag এর উপর নিচের Copy করা HTML Code টি Past করুন ।
<div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div>
যদি আপনি উপরের HTML যোগ করেন তাহলে সমস্ত সাইটে এবং আপনার হোম পেজে প্রগ্রেস বার প্রদর্শিত হবে। আপনি যদি এই অগ্রগতি বারটি শুধুমাত্র আপনার পোস্টে Saw করাতে চান এবং আপনার হোমপেজে Saw না করতে চান? এক্ষেত্রে উপরের HTML যোগ করার পরিবর্তে শুধু নিচের HTML Code টি যোগ করুন ।
<b:if cond='data:view.isPost'> <div class='progress-container'>
<div class='progress-bar' id='myBar' style='width:0%;'/>
</div> </b:if>
ব্যাস ,আপনার কাজ শেষ।