কিভাবে ব্লগার Template এর Body Sections কাষ্টমাইজ করতে হয়?

গত পর্বে আমরা বলেছিলাম প্রফেশনাল ব্লগার টেমপ্লেট তৈরি করার বিস্তারিত পোষ্ট সিরিজ আকারে শেয়ার করব। তারই ধারাবাহিকতায় আজ দেখাব ব্লগার Template এর সবচেয়ে গুরুত্বপূর্ণ অংশ Body Sections কিভাবে কাষ্টমাইজ করবেন। সিরিজ পূর্ণ হওয়ার পর সবগুলি পোষ্ট একসাথে ধারাবাহিকভাবে লিংক করে দেয়া হবে।

ব্লগের Body Section ব্লগার টেমপ্লেটের অত্যন্ত গুরুত্বপূর্ণ একটি অংশ। কারণ ব্লগে যত ধরনের আর্টিকেল শেয়ার করা হয় তার সবটুকু Body Sections এর মধ্যে থাকে। কাজেই ব্লগার টেমপ্লেটকে প্রফেশনাল রূপ দেয়ার আগে Body Section কে ঠিক করে নিতে হবে। Body Section ঠিক করার জন্য তেমন কিছু করতে হবে না। শুধুমাত্র Margin ও Padding গুলি ঠিকমত সেট করে দিলেই খুব সহজে সবকিছু OK হয়ে যাবে।

ব্লগার Body Section এর ভীতরে Side Bar সহ বেশ কয়েকটি গুরুত্বপূণ সেকশন রয়েছে। আমরা আজ একসাথে সবগুলি অংশ ঠিক করে নেব। উপরের ছবিটিতে যে Layout দেখতে পাচ্ছেন আমরা সে ধরনের একটি পরিপূর্ণ টেমপ্লেট তৈরি করব। উপরের চিত্রটিতে মাউজ ধরলেই ব্লগার ডিফল্ট টেমপ্লেট এবং আমাদের কাষ্টমাইজ করা টেমপ্লেটের পার্থক্য দেখতে পাবেন।

সকল পোষ্ট দেখুন

 কিভাবে কাষ্টমাইজ করবেন?

• প্রথমে আপনার ব্লগে লগইন করুন।
• তারপর Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে body { অংশটি সার্চ করলে নিচের কোডগুলি দেখতে পাবেন।

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

• উপরের কোডগুলির লাল চিহ্নিত অংশটি ডিলিট করুন।
• এরপর আবার .content-inner { অংশটি সার্চ করলে নিচের কোডগুলি দেখতে পাবেন।

.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

• এখন উপরের কোডগুলি জায়গায় নিচের কোডগুলি কপি করে Replace করুন।

.content-inner {

  padding: 0px;

  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24);

}

.content {

  background: $(body.background);

}

• পুনরায় কিবোর্ড হতে Ctrl+F চেপে .main-inner .column-center-inner { অংশটি সার্চ করলে নিচের কোডটি দেখতে পাবেন।

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
}

• উপরের কোডটির জায়গায় নিচের কোডটি Replace করুন।

.main-inner .column-center-inner {
  padding: 0px 0px 0px 10px;
}

• আবার কিবোর্ড হতে Ctrl+F চেপে .main-inner { অংশটি সার্চ করলে নিচের কোডটি দেখতে পাবেন।

.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
}

• উপরের কোডটির জায়গায় নিচের কোডটি Replace করুন।

.main-inner .column-right-inner {
  padding: 0px;
}

• সবশেষে Template Save করুন।

সাহায্য জিজ্ঞাসাঃ উপরের কোডগুলি আপনার ব্লগের Body Section-কে বিভিন্ন ভাগে ভাগ করে সম্পূর্ণ টেমপ্লেট কাষ্টমাইজ করার উপযোগী করে তুলবে। আশাকরি কারও কোন অংশ বুঝতে অসুবিধা হবে না। তারপরও যদি বুঝতে কোন অসুবিধা হয় তাহলে আমাদের কমেন্ট করে জনাতে পারেন। আমরা পরিপূর্ণ সমাধান দেবার চেষ্টা করব। আগামী পর্বে আমাদের সিরিজ পোষ্টের আরেকটি অংশ নিয়ে আলোচনা করব।