Blogger এর Scrollbar customize করবেন?নিজের ওয়েবসাইটের একরকম scrollbar দেখতে আর ভালো লাগে না। customize করে নিন আপনার ব্লগারের scrollbar কিভাবে জানতে হলে দেখুন বা আমার ব্লগে থেকে সব ভালো মতো বুঝে আসুন আর কোডটি পেতে চলে যান আমার ব্লগে।

https://www.technabo.me/2020/04/how-to-customize-scrollbar-in-blogger.html

অনেকেই হয়ত বিভিন্ন ওয়েবসাইটে এমনকি আমার ব্লগ এ আপনারা অন্য একরকম scrollbar দেখতে পাবেন কিভাবে করেছি জানতে চান। আজকের আমার এই ব্লগ আমি আপনাদের বলবো কিভাবে আপনারাও পারবেন আপনাদের ব্লগারের scrollbar customize করতে তো চলুন সরাসরি চলে যাই আসল স্টেপ এ

প্রথমে আপনাদের এটি করতে হলে কিছু CSS সম্পর্কে ধারণা থাকা লাগবে বেশি না আপনি HTML color codes এর ধারণা জানলে আর HTML edit করতে পারলে খুব সহজে নিজেই করে নিতে পারবেন নিজের পছন্দের কালার দিয়ে নিজের পছন্দের ডিজাইন করে scrollbar নিজের ওয়েবসাইট বা ব্লগার এ ব্যবহার করতে তো

প্রথমেই আপনারা আপনাদের HTML Editor চলে যাবেন এর জন্য আমি বলবো সাধারন NOTEPAD না ব্যবহার করে notepad+ নামের একটা সফটওয়্যার পাওয়া যায় সেটি দিয়ে করতে কারণ সেখানে অনেক আপডেট ফিচার থাকার কারনে আপনি অনেক সহজে HTML EDIT এবং CSS EDIT করতে পারবেন।

HTML Editor এ যাওয়ার পর আপনারা লিখবেন

::- webkit-scrollbar {এতটুকু লেখার পরে আপনারা আপনাদের scrollbar এর সাইজ কতটুকু হবে তা নির্ধারণ করবেন এর জন্য px ব্যবহার করতে হয় আপনারা অনেক চিকন scrollbar ইউুজ করতে চাইলে 8px অথবা 9px ব্যবহার করতে পারেন এর থেকে বেশি মোটা চাইলে 13px অথবা 15px দিতে পারবেন এর থেকে বেশি দিলে আপনার scrollbar অধিক মোটা হয়ে যাবে দেখতে ও তেমন ভালো লাগবে না।

width: 11px;}

এরপরে আপনারা scrollbar এর track নির্ধারণ করবেন বুঝতেই পারছেন track হল যেখানে আপনারা scrollbar কে উপরে নিচে উঠান সেই জায়গাকে track বলে তো সেইম ভাবে দিবেন

::-webkit-scrollbar-track{এরপরে দিবেন background-image আপনার ট্রাক এর কালার আপনারা কি দিবেন কিভাবে দিবেন সেটা এই background image এর মাধ্যমে নির্ধারণ করে দিতে পারবেন তার জন্য আপনাকে HTML color code সম্পর্কে জানতে হবে আর কথা হল আপনি যদি না জানেন তাহলে অনেক এমন ওয়েবসাইট আছে যেখানে গেলে আপনি আপনার মন মতো কালার নিতে পারবেন আর সেটা আপনাকে কোড হিসাবে দিয়ে দিবে সেটা কপি করে আপনারা কালার অনেক সহজে দিয়ে দিতে পারেন এর জন্য আপনারা দিবেন

background-image: linear-gradient(315deg,

এতোটুকু দেওয়ার পরে আপনারা যেই কালার নিয়েছেন সেটাকে পেস্ট করেবন এই 315deg এর পরে যেমন সাদা নিতে হলে আপনাকে দিতে হবে

#ffffff 100%,

আর যদি আপনি চান দুইটি কালার ব্যবহার করে shade দিবেন তাহলে এইখানে 100% এর পরিবর্তে 2% অথবা 3% দিবেন প্রথম কালার হবে আপনার Shade আর এরপরের কালার হবে আপনার মেইন কালার সেইখানে দিবেন #999999 আর এর পাশে দিবেন 85% around 90% তাহলে পুরটা হল

#ffffff 3%, #999999 85%);

এরপরে ব্যবহার করবেন border-radius যাতে আপনার scrollbar track টা আরো ফুটে উঠে। এর জন্য দিবেন

border-radius: 10px;}

এখন আসলো মেইন scrollbar thumb যেইটাকে আপনারা customize করতে চান সেটা তার জন্য আপনাকে যেই কোড দিতে হবে তা হল

::-webkit-scrollbar-thumb {এরপরে যেহেতু কালার দিবেন তাই আপনাকে দিতে হবে background-image এরপরে দিবেন linear-gradient তাহলে কোডটি পুরোটা হল

background-image: linear-gradient (315deg,

এখন দিবেন আপনার scrollbar এর মেইন কালার এইটাও সেইম আপনি যদি shade চান তাহলে দুইবার কালার দিবেন আর shade না চাইলে একবার তো যেইভাবে দিবেন

#979797 1%, #656565 77%);

এরপরে সেইম ভাবে দিবেন border তাহলে scrollbar টি ফুটে উঠবে এর জন্য দিবেন এর সাথে আপনাকে কালার দিতে হবে তাহলে এটি আরো বেশি সুন্দর লাগবে দেখতে তাই দিবেন

border: 2px solid rgba(255, 255, 255, 0.5)}

এইতো css code এর মাধ্যমে আপনি আপনার ব্লগের বা ওয়েবসাইটের Customize scrollbar ready করে ফেললেন হয়তো একটু বুঝতে পেরেছেন CSS কিভাবে কাজ করে এইভাবে নিজে নিজে practice কর‍তে করতে আরো অনেক কিছুই আপনি নিজে নিজে করতে পারবেন তখন আপনার নিজের কাছে ব্লগিং করতে ভালো লাগবে মন থাকবে

এখন কোড তো রেডি কিন্তু এটি ব্লগে কিভাবে অ্যাড করবেন সেটা ভাবছেন তাহলে দেখুন আপনি সরাসরি কোডটি নোটপ্যাড থেকে কপি করে নিয়ে আপনারা ব্লগের HTML Editor এ যাওয়ার পর দেখবেন Customize Theme নামে একটা অপশন থাকে যেইখান থেকে আপনারা EDIT HTML  এ ঢুকেন তার পাশেই সেইখানে গেলে আপনি ADVANCE নামে একটি অপশন পাবেন সেইখানে যেয়ে Add Css এর একটা বক্স থাকে সেইখানে পুরো কোড পেস্ট করে দিলে আপনি দেখবেন আপনার scrollbar টি নিচে viewer এ দেখতে পারবেন তারপরে উপরের সেভ অপশন এ চেপে দিলে আপনার কোডটি সরাসরি আপনার HTML এ যোগ হয়ে যাবে অনেক সহজে।

আর যদি কেউ পুরো ব্যাপারটা ঠিক মতো বুঝতে না পারেন তাহলে নিচে আমি আমার ভিডিও টিউটোরিয়াল দিয়ে দিচ্ছি সেখানে পুরো ভিডিও দেখলে আপনারা পুরো ব্যাপার আরো clear করে বুঝতে পারবেন আর যেহেতু গুগল আমাকে পুরো কোড দেওয়ার অনুমতি দেয় না তার ফলে আমি ভেঙ্গে ভেঙ্গে আপনাদের কোডটি দিয়েছি উপরে আর আপনারা চাইলে আমার ভিডিওতে description box এ google drive এর লিঙ্ক দিয়েছি সেইখান থেকে কপি করতে পারেন কিন্তু আমি বলবো আপনারা ভিডিওটি দেখেন আর নিজে notepad এ লিখে তারপর দেন তাহলে আপনারা কিছুটা শিখতে পারবেন