গত পর্বে আমরা বলেছিলাম প্রফেশনাল ব্লগার টেমপ্লেট তৈরি করার বিস্তারিত পোষ্ট সিরিজ আকারে শেয়ার করব। তারই ধারাবাহিকতায় আজ দেখাব ব্লগার Template এর সবচেয়ে গুরুত্বপূর্ণ অংশ Body Sections কিভাবে কাষ্টমাইজ করবেন। সিরিজ পূর্ণ হওয়ার পর সবগুলি পোষ্ট একসাথে ধারাবাহিকভাবে লিংক করে দেয়া হবে।
ব্লগের Body Section ব্লগার টেমপ্লেটের অত্যন্ত গুরুত্বপূর্ণ একটি অংশ। কারণ ব্লগে যত ধরনের আর্টিকেল শেয়ার করা হয় তার সবটুকু Body Sections এর মধ্যে থাকে। কাজেই ব্লগার টেমপ্লেটকে প্রফেশনাল রূপ দেয়ার আগে Body Section কে ঠিক করে নিতে হবে। Body Section ঠিক করার জন্য তেমন কিছু করতে হবে না। শুধুমাত্র Margin ও Padding গুলি ঠিকমত সেট করে দিলেই খুব সহজে সবকিছু OK হয়ে যাবে।
ব্লগার Body Section এর ভীতরে Side Bar সহ বেশ কয়েকটি গুরুত্বপূণ সেকশন রয়েছে। আমরা আজ একসাথে সবগুলি অংশ ঠিক করে নেব। উপরের ছবিটিতে যে Layout দেখতে পাচ্ছেন আমরা সে ধরনের একটি পরিপূর্ণ টেমপ্লেট তৈরি করব। উপরের চিত্রটিতে মাউজ ধরলেই ব্লগার ডিফল্ট টেমপ্লেট এবং আমাদের কাষ্টমাইজ করা টেমপ্লেটের পার্থক্য দেখতে পাবেন।
ব্লগার 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 করুন।
আসসালামু আলাইকুম
ReplyDeleteআশা করি কুশলেই আছেন প্রিয় হারুন অর রশিদ ভাই।
আপনার ব্লগটি বেশ সুন্দর। অনেক উপকৃত হয়েছি।
কিন্তু body {
.content-inner {
এসব কোড আমার ব্লগে খুঁজেই পেলাম না।
দ্বিতীয়ত, আমার ব্লগকে আর কীভাবে উন্নত করতে পারি, যদি প্রয়োজনীয় পরামর্শ দিতেন।
আমার ব্লগ-https://islamicradio-bd.blogspot.com
আপনার টেমপ্লেট কাস্টমাইজ করা, সে জন্য হয়ত পাচ্ছেন না। অধীকন্তু ব্লগকে উন্নত করার বিষয়ে আমাদের ব্লগে অনেক পোষ্ট রয়েছে। পোষ্টগুলি অনুসরণ করলে বিস্তারিত জানতে পারবেন।
Deleteভাই মোবাইল দিয়ে কি বাবে করবো???
ReplyDeleteএগুলো সুক্ষ ব্যাপার ভাই। মোবাইল দিয়ে করা খুব কঠিন হয়ে যাবে। কম্পিউটার দিয়ে করাটাই ভালো হবে।
Delete