Jan 12, 2016

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

কিভাবে ব্লগার 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 এ ক্লিক করুন।
কিভাবে ব্লগার Template এর Body Sections কাষ্টমাইজ করতে হয়?
  • এরপর কিবোর্ড হতে 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-কে বিভিন্ন ভাগে ভাগ করে সম্পূর্ণ টেমপ্লেট কাষ্টমাইজ করার উপযোগী করে তুলবে। আশাকরি কারও কোন অংশ বুঝতে অসুবিধা হবে না। তারপরও যদি বুঝতে কোন অসুবিধা হয় তাহলে আমাদের কমেন্ট করে জনাতে পারেন। আমরা পরিপূর্ণ সমাধান দেবার চেষ্টা করব। আগামী পর্বে আমাদের সিরিজ পোষ্টের আরেকটি অংশ নিয়ে আলোচনা করব।
Subcribe to our all updates

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

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

Post a Comment

 
Subscribe for all Updates

Subscribe Now

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

Powered by: