how-to-customize-scrollbar-in-blogger-2020
how-to-customize-scrollbar-in-blogger-2020

 

Customize scrollbar in blogger

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

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

Full Process Of Customize scrollbar in blogger

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

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

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

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

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

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

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

how-to-customize-scrollbar-in-blogger-2020
how-to-customize-scrollbar-in-blogger-2020

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

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

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

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

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

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

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

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

Check My Youtube Channel 2nd Video For More DeTails

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

 

আশা করি ভিডিওটি দেখার পর কারো scrollbar Customize করতে কোনো সমস্যা হবে না এরপরেও যদি কোনো রকম সাহায্য লাগে আমাকে এইখানে অথবা ইউটিউব এ কমেন্টস এ জানাতে পারেন সবসময় আছি আপনাদের সাথে এবং থাকবো সামনে ইনশাল্লাহ ।

আজকের মতো এইখানেই সবাইকে ধন্যবাদ পরবর্তী ব্লগের নোটিফিকেশন পাওয়ার জন্য আপনার  ই-মেইল দিয়ে আমার ব্লগটি সাবস্ক্রাইব করে রাখুন । আর পোস্টটি ভালো লাগলে অবশই শেয়ার করে দিবেন ।

Check The Video Tutorial 

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here