আজকের পর্বে আমরা শেয়ার করব কিভাবে ব্লগের 3 Column Footer কে Responsive করতে হয়? সাধারণত ব্লগে ৩/৪ কলামের Footer হয়ে থাকে যেটির Width অনেক বড় হয়। যার ফলে মোবাইল ভার্সনে নরমালি একসাথে তিনটি বা চারটি কলাম দেখানো সম্ভব হয় না। সেই জন্য সবগুলিকে Responsive করে নিতে হয়। সবগুলি Footer Widgets Responsive করার ফলে Full Width হয়ে একটির নিচে আরেকটি শো করতে থাকে। এতেকরে সবগুলি উইজেট মোবাইল ভার্সনের সব সাইজের ডিভাইস থেকে পড়তে সহজ হয়।
ব্লগার টেমপ্লেটের তিন কলামের Footer সাধারণত নিচের চিত্রের মত হয়ে থাকে। যেটির মধ্যে Credits সহ আরও কিছু অপশন থাকে। এটি নরমালি যে কোন ধরনের বড় সাইজের ডিভাইসে নিচের চিত্রের মত দেখাবে।
এটিতে Responsive Media Queries যুক্ত করার পর Footer তিনটি Full Width হয়ে যাবে। যার ফলে তিনটি উইজেট একটির নিচে আরেকটি শো করবে। নিচের চিত্রে দেখুন Footer Responsive করার পর কেমন দেখাচ্ছে।
কিভাবে ব্লগের Footer Responsive করবেন?
- প্রথমে ব্লগে লগইন করুন।
- তারপর Template > Edit Html এ ক্লিক করুন।
- এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- তারপর নিচের Media Queries টি ]]></b:skin> এর উপরে পেষ্ট করুন।
- সর্ব প্রথম Overflow অংশটি Horizontal Scroll-Bar টি বন্ধ করে রাখবে।
- উপরের কোডের মূল আইডি এর Width:100% রেখেছি, যা আমরা গত পর্বগুলিতে আলোচনা করেছিলাম।
- মূল আইডি এর অভ্যন্তরিন সেকশনগুলির মাপ 90% বা তার চেয়ে একটু কম-বেশী করে দিতে পারেন।
- Footer এর কোন উইজেট Hide করতে isMobileRequest ব্যবহার করুন, যা আমরা পূর্বের দুটি পোষ্টে আলোচনা করেছি।
- সর্বশেষ Credits এর লেখাগুলিকে Center করে দেয়া হয়েছে।
- এছাড়াও আপনার প্রয়োজনানুসারে বিভিন্ন সাইজের Media Queries যুক্ত করে নিতে পারেন।
- নোটঃ উপরের সবুজ কালের ID গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।
সর্বশেষঃ আশা করছি পোষ্টটি আপনাদের বুঝতে কোন অসুবিধা হবে না। শুধুমাত্র উপরের ID ও Class এর জায়গায় আপনার ব্লগের ID ও Class বসিয়ে দিলেই হয়ে যাবে। তারপরও যদি বুঝতে কোন অসুবিধা হয় তাহলে আমাদের জানাতে পারেন। পরবর্তী পোষ্টে শেয়ার করব কিভাবে ব্লগার ব্লগের Image Responsive করতে হয়?
