Jan 23, 2016

কিভাবে ব্লগার ব্লগের Footer অংশ-কে Responsive করতে হয়?

আজকের পর্বে আমরা শেয়ার করব কিভাবে ব্লগের 3 Column Footer কে Responsive করতে হয়? সাধারণত ব্লগে ৩/৪ কলামের Footer হয়ে থাকে যেটির Width অনেক বড় হয়। যার ফলে মোবাইল ভার্সনে নরমালি একসাথে তিনটি বা চারটি কলাম দেখানো সম্ভব হয় না। সেই জন্য সবগুলিকে Responsive করে নিতে হয়। সবগুলি Footer Widgets Responsive করার ফলে Full Width হয়ে একটির নিচে আরেকটি শো করতে থাকে। এতেকরে সবগুলি উইজেট মোবাইল ভার্সনের সব সাইজের ডিভাইস থেকে পড়তে সহজ হয়।
কিভাবে ব্লগার ব্লগের Footer অংশ-কে Responsive করতে হয়?
ব্লগার টেমপ্লেটের তিন কলামের Footer সাধারণত নিচের চিত্রের মত হয়ে থাকে। যেটির মধ্যে Credits সহ আরও কিছু অপশন থাকে। এটি নরমালি যে কোন ধরনের বড় সাইজের ডিভাইসে নিচের চিত্রের মত দেখাবে।
সকল পোষ্ট দেখুন
কিভাবে ব্লগার ব্লগের Footer অংশ-কে Responsive করতে হয়?
এটিতে Responsive Media Queries যুক্ত করার পর Footer তিনটি Full Width হয়ে যাবে। যার ফলে ‍তিনটি উইজেট একটির নিচে আরেকটি শো করবে। নিচের চিত্রে দেখুন Footer Responsive করার পর কেমন দেখাচ্ছে।
কিভাবে ব্লগার ব্লগের Footer অংশ-কে Responsive করতে হয়?

কিভাবে ব্লগের Footer Responsive করবেন?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • তারপর নিচের Media Queries টি ]]></b:skin> এর উপরে পেষ্ট করুন।
@media only screen and (max-width:768px) {

#footer, #footer-wrapper, #credits-wrapper, #powered-wrapper {overflow:hidden!important;width:100%!important;}

#footerbar-wrapper {overflow:hidden!important; width:90%!important; padding:20px}

#credits p{text-align:center!important}

}
  • সর্ব প্রথম Overflow অংশটি Horizontal Scroll-Bar টি বন্ধ করে রাখবে। 
  • উপরের কোডের মূল আইডি এর Width:100% রেখেছি, যা আমরা গত পর্বগুলিতে আলোচনা করেছিলাম।
  • মূল আইডি এর অভ্যন্তরিন সেকশনগুলির মাপ 90% বা তার চেয়ে একটু কম-বেশী করে দিতে পারেন।
  • Footer এর কোন উইজেট Hide করতে isMobileRequest ব্যবহার করুন, যা আমরা পূর্বের দুটি পোষ্টে আলোচনা করেছি।
  • সর্বশেষ Credits এর লেখাগুলিকে Center করে দেয়া হয়েছে। 
  • এছাড়াও আপনার প্রয়োজনানুসারে বিভিন্ন সাইজের Media Queries যুক্ত করে নিতে পারেন।
  • নোটঃ উপরের সবুজ কালের ID গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।
সর্বশেষঃ আশা করছি পোষ্টটি আপনাদের বুঝতে কোন অসুবিধা হবে না। শুধুমাত্র উপরের ID ও Class এর জায়গায় আপনার ব্লগের ID ও Class বসিয়ে দিলেই হয়ে যাবে। তারপরও যদি বুঝতে কোন অসুবিধা হয় তাহলে আমাদের জানাতে পারেন। পরবর্তী পোষ্টে শেয়ার করব কিভাবে ব্লগার ব্লগের Image Responsive করতে হয়?
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

2 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. আমার ব্লগের আই,ডি, ক্লাস, কি করে,জানবো?
    যদি দয়া করে বলেন ৷

    ReplyDelete
    Replies
    1. ব্রাউজার হতে আপনার ব্লগ ভিজিট করে মাউসের রাইট বাটনে ক্লিক করে Inspect Element হতে আপনার ব্লগের সকল আইডি এবং ক্লাস বের করতে পারবেন।

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: