২১ জানু, ২০১৬

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

কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করতে হয়?
4/ 5 stars - "কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করতে হয়?" Responsive Blog Designs কি তা নিয়ে আমরা ইতিপূর্বে একটি পোষ্ট শেয়ার করেছি। এ ব্যাপারে বেসিক বিষয়গুলি জানতে চাইলে আগের পোষ্টটি পড়ে নিবেন। ব...
-
Responsive Blog Designs কি তা নিয়ে আমরা ইতিপূর্বে একটি পোষ্ট শেয়ার করেছি। এ ব্যাপারে বেসিক বিষয়গুলি জানতে চাইলে আগের পোষ্টটি পড়ে নিবেন। ব্লগার টেমপ্লেটে Header, Body এবং Footer এই তিনটি গুরুত্বপূর্ণ অংশ রয়েছে। এই তিনটি অংশ এবং Image গুলিকে Responsive করতে পারলেই সম্পূর্ণ টেমপ্লেটই Responsive Designs এর হয়ে যায়। আমরা এই চারটি অংশকে আলাদা আলাদাভাবে Responsive করার টিউটরিয়াল শেয়ার করব।
কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করবেন?
ডিফল্ট ব্লগার টেমপ্লেটের Header এ সাধারণত দুটি সেকশন থাকে। প্রথম সেকশনে থাকে ব্লগের Logo এবং দ্বিতীয় অংশে থাকে ব্লগ পেজের Menu Bar. অন্যদিকে কাষ্টম ব্লগার টেমপ্লেটের Header অংশ দুট ভাগে ভাগ করা থাকে। বাম পাশে থাকে ব্লগার টেমপ্লেটের Logo এবং ডান পাশে একটি উইজেট যুক্ত করার অপশন থাকে। ডেস্কটপ এবং লেপটপ এর সাইজ বড় হওয়াতে এই অংশগুলি কম্পিউটার থেকে ভিজিট করার সময় কোন সমস্যা হয় না, কিন্তু মোবাইল থেকে ভিজিট করলে হেডার অংশ পরিষ্কারভাবে দেখার জন্য Zoom করার প্রয়োজন পড়ে। এই সমস্যা থেকে পরিত্রান পাওয়ার জন্য বিভিন্ন সাইজের Media Queries যুক্ত করে নিতে হয়।
সকল পোষ্ট দেখুন
Media Queries কিঃ Media Queries সকল ধরনের ডিভাইসের সাইজ অনুযায়ী ব্লগের Layout কে উপযুক্ত করে নেয় অর্থাৎ কম্পিউটার, টেবলেট ও মোবাইলের বিভিন্ন সাইজবেধে Layout কে সঠিকভাবে Display করে। এতেকরে ব্লগের সকল অপশন দেখতে সুবিধা হয়। উদাহরণ স্বরূপ-কম্পিউটার থেকে কোন সাইট ভিজিট করলে তখন ব্লগের Menu Bar গুলি সঠিকভাবে দেখা যাবে কিন্তু যখন 480PX এর মোবাইল থেকে ভিজিট করবে তখন Menu Bar ঠিকমত না দেখে এলোমেলোভাবে দেখা যাবে। এই জন্য প্রয়োজন হবে 480PX এর মাপমত Media Queries যুক্ত করা। 480PX এর Media Queries ঐ সাইজের মোবাইলে আপনার ব্লগের ম্যানুবারটি সঠিকভাবে Display করবে। এ ভাবে আপনি যখন ব্লগের প্রত্যেকটি অংশে সঠিক মাপের Media Queries যুক্ত করে নিবেন তখন ব্লগের প্রত্যেকটি অংশ সব ধরনের Device এ সঠিকভাবে Display করবে। কি কি সাইজের Media Queries যুক্ত করতে হয় তা নিয়ে আমরা ইতিপূর্বে আলোচনা করেছি।

কিভাবে Header অংশগুলিকে Responsive করবেন?

নিচের চিত্রে আমাদের ব্লগের কম্পিউটার ভার্সনের Header এর একটি Screenshot দেখুন। এখানে আপনি বেশ কিছু অপশন দেখতে পাচ্ছেন। যেটিতে Media Queries যুক্ত না করলে ছোট মাপের ডিভাইসে কিছুতেই সঠিকভাবে দেখা যাবে না।
কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করবেন?
উপরের চিত্রের এই Header টিতে বাম পাশে Blog Log, ডান পাশে Search Box, উপরে একটি Menu এবং নিচে আরেকটি Menu Bar রয়েছে। সুতরাং উপরের চারটি অংশকে প্রত্যেকটির Section অনুযায়ী Responsive করতে হবে অর্থাৎ প্রত্যেকটি অংশকে Media Queries এর ভীতরে রেখে সাইজমত CSS Style যুক্ত করতে হবে। তবেই এই Header টি Responsive হবে। এখন নিচে আরেকটি চিত্রে আমাদের ব্লগের Responsive Header এর Screenshot দেখুন-
কিভাবে ব্লগার ব্লগের Header অংশগুলিকে Responsive করবেন?
উপরের চিত্রটিতে দেখুন যেখানে আমরা Top Menu ও Bottom Menu সহ Search Box টি isMobileRequest ব্যবহার করে মোবাইল টেমপ্লেট হতে Disable করে রেখেছি। সর্বোপরি একটি সার্চ বক্সসহ মোবাইল ফ্রেন্ডলি ম্যানুবার যুক্ত করার পাশাপাশি Header Logo টিকে Center করে রেখেছি। এতেকরে Header অংশটি ছোট বড় সকল ধরনের ডিভাইসে সঠিকভাবে Display হবে।

কিভাবে Media Queries যুক্ত করবেন?

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

#header {overflow:hidden!important;width:100%!important;}

.headerleft{top:5px;margin-bottom:10px!important; width:100%;}
.headerright{float:none;margin:0 auto!important;width:100%;}

.headerleft a img,.headerright a img{
  max-width: 75%!important;
  height:auto;
  margin-left: 0;
  position: absolute;
  left: 30px;}
}
  • সবসময় মূল ID অথবা Class এ Overflow Property যুক্ত করতে হবে। এই overflow অংশটি Horizontal Scroll-Bar টি বন্ধ করে রাখবে। সব ধরনের ব্লগার টেমপ্লেটে #header সেকশনের ID টি এক ধরনের হয়ে থাকে।
  • প্রত্যেকটি সেকশনের Width:100% করার ফলে সবগুলি অংশ Full Width হয়ে থাকবে। যার ফলে কোন অংশ ডানে কিংবা বামে Float করতে পারবে না।
  • সবশেষের Header Logo টিকে 75% করা হয়েছে, যাতেকরে ব্লগের Logo টি Header এর চাইতে একটু ছোট হয়ে মাঝখানে বসে থাকে। আপনি ইচ্ছে করলে এই সাইজটি আপনার প্রয়োজনানুসারে ছোট বড় করে নিতে পারেন।
  • অপ্রয়োজনীয় Menu Bar ও Search Box বন্ধ করার জন্য isMobileRequest ব্যবহার করুন, যা আমরা পূর্বের দুটি পোষ্টে আলোচনা করেছি।
  • নোটঃ উপরের সবুজ কালের Class গুলি আপনার ব্লগের টেমপ্লেটের সাথে হুবহু মিল থাকতে নাও পারে। কাজেই আপনার ব্লগের সঠিক ID ও Class খোঁজে নিয়ে ঐ জায়গাগুলিতে বসাতে হবে।
সাহায্য জিজ্ঞাসাঃ যাদের HTML5 ও CSS3 সম্পর্কে ধারনা কম রয়েছে তাদের জন্য উপরের বিষয়গুলি কিছুটা কঠিন মনে হবে। তাপরও যদি সম্পূর্ণ পোষ্টটি ভালভাবে বুঝে পড়েন তাহলে খুব সহজেই Header অংশটিকে Responsive করে নিতে পারবেন। সব কিছুর পরেও যদি কোন অংশ বুঝতে অসুবিধা হয় তাহলে আমাদের কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা ২৪ ঘন্টা মধ্যে সমাধান করার চেষ্টা করব, ইনশাআল্লাহ্।
Subcribe to our all updates

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

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

  1. উত্তরগুলি
    1. কি বুঝতে পারেননি, সেটা বল্লে ভালভাবে বুঝিয়ে দিতে পারতাম।

      মুছুন
  2. আমি চেষ্টা করছি আপনাদের ইনট্রাকশন ফলো করার, কিন্তু ঠিক-ঠাক মত কাজ করছে না!

    উত্তরমুছুন
    উত্তরগুলি
    1. কি কাজ করছে না একটু বিস্তারিত বল্লে আমরা আপনার সমস্যার সমাধান দেয়ার চেষ্টা করব।

      মুছুন
  3. আমার ব্লগের টেমপ্লেট টা ব্লগস্পটের ডিপোল্ট টেমপ্লেট নয়, আপনার এই টিউটোরিয়াল কি আমার টেমপ্লেটে কাজ দেবে ? এবং আগের তাকা কোন css কোড কি ডিলেট করতে হবে ?

    উত্তরমুছুন
    উত্তরগুলি
    1. অবশ্যই কাজ করবে। তবে এ ক্ষেত্রে আপনার ব্লগের ID এবং Class গুলি Default Template এর সাথে মিলতে নাও পারে। শুধুমাত্র আপনার ব্লগের ID এবং Class নির্ধারিত জায়গায় বসিয়ে দিলেই হবে।

      মুছুন
  4. ভাইয়া আপনার লেখা অনুসারে সবই করলাম কিন্তু কোন কাজ হলোনা

    উত্তরমুছুন
    উত্তরগুলি
    1. ID এবং Class এর জায়গায় আপনার ব্লগের ID ও Class সঠিকভাবে বসিয়ে দিলে অবশ্যই কাজ করবে।

      মুছুন
  5. আমি আপনার Pro Design টেমপ্লেটটার header রেসপন্সিভ করতে চাচ্ছি। এখন প্রশ্ন হচ্ছে আপনারPro Design থিমটার হেডারকি উপরের css কোডগুলা দিয়ে রেসপন্সিভ করা যাবে?
    আর যদি যায় সেক্ষেত্রে কোন কোড কাস্টমাইজ করা লাগবে?
    যদি লাগে তবে কোনকোন কোডগুলা?
    আশাকরি আমার প্রশ্নটা বুঝেছেন।

    অগ্রিম ধন্যবাদ ♥

    উত্তরমুছুন
    উত্তরগুলি
    1. Pro Design টেমপ্লেটটা Responsive করাই আছে, এটি আর কিছুই করতে হবে না।

      মুছুন
  6. ভাই আমার একটা উপকার করেন। কম্পিউটার ভার্সনের মেনুবার কি বাবে পরিবথন করবো।? ভাই আমার এই উপকারটা করেন।??

    উত্তরমুছুন
    উত্তরগুলি
    1. আপনি যদি HTML ও CSS এর কাজ বুঝেন, তবে কাজটি সহজে করতে পারবেন। অন্যথায় কাজটা আপনার জন্য সহজ হবে না। আমাদের সাহায্য চাইলে ব্লগের যোগাযোগ ফরমের মাধ্যমে আমাদের সাথে যোগাযোগ করতে পারেন। ধন্যবাদ...

      মুছুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: