আজকের এই পোস্টে আমি দেখাবো কিভাবে ব্লগারে Reading Progress Bar সহ Back to Top (ব্যাক টু টপ) বাটন উইজেট অ্যাড করবেন। Back to Top Button কি? আপনি হয়তো অনেক ওয়েবসাইটে দেখেছেন কোনো আর্টিকেল পড়ার সময় একটা ফ্লোটিং বাটন দেখা যায়,যেটাতে ক্লিক করলে ওই পেজের একদম উপরে নিয়ে যায়। পেজের যেখানেই থাকুন না কেন, বাটনটিতে ক্লিক করলে আপনাকে টেনে পেজের উপরে নিয়ে যাবে।
Reading Progress Bar কি? Reading Progress Bar এর সাহায্যে দেখা যায় যে পেজের ঠিক কতটুকু আপনি পড়েছেন বা কোনো পেজের কোন পর্যায়ে আছেন।উদাহরণ হিসেবে : মনে করুন আপনি একটি আর্টিকেল পড়তেছেন , আর্টিকেলটির অর্ধেক পড়েছেন।তাহলে Reading Progress Bar এ অর্ধেক লাইন দেখাবে।
আপনি হয়তো রিডিং প্রগ্রেস বার ( Reading Progress Bar) উইজেট ব্লগারে যুক্ত করেছেন।সাধারণত Reading Progress Bar উইজেট গুলো header এর নিচে এবং ফুটার এর উপরে দেখা যায়।কিন্তু এখন আমি যে উইজেটটি শেয়ার করবো সেটি back to top বাটনের উপরে শো করবে।অর্থাৎ,back to top বাটনের চারিদিকে reading progress bar শো করবে।
ডেমো দেখুন নিচে :
কিভাবে ব্লগারে Reading Progress Bar সহ Back to Top বাটন উইজেট অ্যাড করবেন?
ব্লগারে Reading Progress Bar এবং Back to Top button আলাদা আলাদা ভাবে অ্যাড করা যায়,কিন্তু আমি যে উইজেটটি শেয়ার করতেছি,এটিতে Reading Progress Bar এবং Back to Top Button ২টিই রয়েছে।নিচের স্টেপগুলো ফলো করুন ব্লগারে back to top বাটন এবং reading progress bar উইজেট যুক্ত করতে।
- প্রথমেই আপনার Blogger Dashboard এ যান।
- তারপর Theme এ ক্লিক করুন অতঃপর drop-down মেনু থেকে Edit HTML অপশনে ক্লিক করুন।
- এখন সার্চ করুন ]]></b:skin> অথবা /*]]>*/</style> এবং নিচে দেয়া সিএসএস কোডগুলো এই ট্যাগ এর উপরে পেস্ট করে দিন।যদি ]]></b:skin> অথবা /*]]>*/</style> কোনো ট্যাগ খুঁজে না পান, তবে <head> </head> ট্যাগ এর ভিতর <style> </style> ট্যাগ লিখে তার ভিতরে সিএসএস কোডগুলো পেস্ট করে দিন। Example : <style> css codes </style> । (মোবাইল দিয়ে সার্চ করার জন্য Hackers Keyboard ব্যবহার করুন।)
/* Reading Progress Bar by Blogpen.xyz */
.tTpB{justify-content:center;position:fixed;right:20px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:9999;transform:scale(0);transition:transform .3s ease,opacity .3s ease,visibility .3s ease,margin-bottom 1s ease}.tTpB.vbl{visibility:visible;opacity:1;transform:scale(1)}.tTpB{bottom:70px}.tTpB:hover{opacity:.8}.tTpB svg{height:100%;width:100%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer}.tTpB svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9}.tTpB svg .c{fill:none;stroke:#482dff;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round}.tTpB svg .d{fill:none;stroke:#08102b}.drK .tTpB svg .b{fill:#2d2d30;stroke:#404045}.drK .tTpB svg .c{stroke:#8775f5}.drK .tTpB svg .d{stroke:#fffdfc}.tTpB{display:flex;align-items:center}
(আপনার ওয়েবসাইটের dark mode class এর সাথে .drk চেঞ্জ করে নিবেন।)
- এখন </body> ট্যাগ খুঁজুন এবং তার উপরে নিচে দেয়া জাভাস্ক্রিপ্ট কোডগুলো পেস্ট করে দিন।
<div class="tTpB" id="backTop" onclick="window.scrollTo({top: 0});">
<svg viewBox="0 0 34 34">
<circle class="b" cx="17" cy="17" r="15.92"></circle>
<circle class="c scrollProgress" cx="17" cy="17" r="15.92"></circle>
<path class="line d" d="M15.07,21.06,19.16,17l-4.09-4.06"></path>
</svg>
</div>
<script type="text/javascript">
//<![CDATA[
var progressPath = document.querySelector(".scrollProgress");
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
var updateProgress = function() {
var scroll = document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - window.innerHeight;
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
window.addEventListener('scroll', (updateProgress));
var offset = 0;
var duration = 550;
window.onscroll = function() {
if (document.documentElement.scrollTop > offset) {
document.querySelector('.tTpB').classList.add('vbl');
} else {
document.querySelector('.tTpB').classList.remove('vbl');
}
};
document.querySelector('.tTpB').onclick = function() {
document.querySelector('html, body').animate(window.scroll({
top: ['8px', '280px']
},{ duration: 2500, // number in ms [this would be equiv of your speed].
easing: 'ease-in-out',
iterations: 1, // infinity or a number.
// fill: ''
}));
return false;
};
//]]>
</script>
- থিমটি সেভ করে দিন।
কপি করতে কোনো সমস্যা হলে এখানে ক্লিক করে কোডগুলো ডাউনলোড করে নিন।
উপসংহার
উপরে দেখানো সবগুলো স্টেপ মনোযোগ দিয়ে ফলো করলে আপনি Back to Top Button এবং Reading Progress Bar উইজেট আপনার ব্লগার ব্লগে যুক্ত করতে সক্ষম হবেন।কোনো সমস্যা ফেস করলে অবশ্যই কমেন্ট সেকশনে জানাবেন।যদি কোনো ব্লগার উইজেট নিয়ে পোস্ট চান,কমেন্ট করে জানিয়ে দিবেন।যথাসাধ্য চেষ্টা করবো শেয়ার করার।আজকের মত এতটুকুই।আল্লাহ হাফেজ।
প্রিমিয়াম ব্লগার টেমপ্লেট , ব্লগিং টিপস , ব্লগার উইজেট স্ক্রিপ্ট , এসইও টিপস পেতে ভিজিট করুন আমার Blogen ব্লগ।আল্লাহ হাফেজ।
