ওয়েবসাইট ডেভেলপমেন্ট (পার্ট ৩): ব্লগার লেআউট কাস্টমাইজেশন এবং অ্যাডভান্সড মেনু বার সেটিংস

ব্লগার ও ওয়ার্ডপ্রেস সিরিজের তৃতীয় পর্বে আপনাকে স্বাগতম। গত দুই পর্বে আমরা ওয়েবসাইট প্ল্যাটফর্ম নির্বাচন এবং ব্লগারে প্রাথমিক অ্যাকাউন্ট সেটআপ শিখেছি। একটি খালি ঘরের দেয়াল তুলে ফেললেই যেমন সেটি থাকার যোগ্য হয় না, তেমনি শুধু একটি ব্লগ খুললেই সেটি প্রফেশনাল দেখায় না। ঘরটিকে যেমন রঙ এবং আসবাবপত্র দিয়ে সাজাতে হয়, ওয়েবসাইটকেও তেমনি Layout এবং Menu Bar দিয়ে সাজাতে হয়।

​আজকের এই মেগা গাইডে আমরা শিখব কীভাবে একটি সাদামাটা ব্লগার সাইটকে একটি প্রফেশনাল ম্যাগাজিন বা নিউজ পোর্টালের মতো রূপ দেওয়া যায়।

​ওয়েবসাইট ডেভেলপমেন্ট (পার্ট ৩): ব্লগার লেআউট কাস্টমাইজেশন এবং অ্যাডভান্সড মেনু বার সেটিংস

​লিখেছেন: টিম Daily Tech News

ওয়েবসাইট: Dailynewsepaper26.blogspot.com

​একটি ওয়েবসাইটের প্রাণ হলো তার User Experience (UX)। আপনার ভিজিটর যদি আপনার সাইটে এসে তার প্রয়োজনীয় তথ্য সহজে খুঁজে না পায়, তবে সে দ্বিতীয়বার আপনার সাইটে আসবে না। এই তথ্যগুলোকে সাজিয়ে রাখার কাজটিই করে Layout এবং Navigation Menu। চলুন শুরু করা যাক আজকের মাস্টারক্লাস।

​অধ্যায় ১৬: লেআউট (Layout) কী এবং এর গুরুত্ব

​

ব্লগারের লেআউট হলো আপনার ওয়েবসাইটের সেই ডিজাইন কাঠামো।

ইলাস্ট্রেটর বা ফটোশপে আমরা যেমন ডিজাইন করি, ব্লগারের লেআউট হলো আপনার ওয়েবসাইটের সেই ডিজাইন কাঠামো। লেআউট প্যানেল থেকেই আপনি নিয়ন্ত্রণ করবেন আপনার লোগো কোথায় থাকবে, অ্যাডভার্টাইজমেন্ট কোথায় দেখাবে এবং সাইডবারে কী কী থাকবে।

​কেন লেআউট ঠিক করা জরুরি?

১. লোডিং স্পিড: অপ্রয়োজনীয় গ্যাজেট সরিয়ে ফেললে সাইট দ্রুত লোড হয়।

২. অ্যাডসেন্স প্লেসমেন্ট: বিজ্ঞাপনের জন্য সঠিক জায়গা নির্ধারণ করা যায়।

৩. প্রফেশনাল লুক: সাইটটি অগোছালো মনে হয় না।

​অধ্যায় ১৭: মেনু বার (Main Menu) কাস্টমাইজেশন ধাপে ধাপে গাইড

​মেনু বার হলো আপনার ওয়েবসাইটের ম্যাপ। সাধারণত থিম ইনস্টল করলে সেখানে কিছু ডেমো মেনু থাকে (যেমন: Home, Features, Mega Menu)। এগুলো পরিবর্তন করে আপনার নিজের ক্যাটাগরি বসাতে হবে।

​কীভাবে মেনু এডিট করবেন:

১. ব্লগারের Layout অপশনে যান।

২. Main Menu বা Link List নামক গ্যাজেটটি খুঁজে বের করুন এবং পেন্সিল আইকনে ক্লিক করুন।

৩. এখানে পুরনো ডেমো নামগুলো ডিলিট করে দিন।

৪. Add a New Item এ ক্লিক করুন।

৫. Site Name: এখানে আপনার ক্যাটাগরির নাম দিন (যেমন: 'প্রযুক্তি' বা 'মোবাইল রিভিউ')।

৬. Site URL: এটি সবথেকে গুরুত্বপূর্ণ। এখানে আপনার ওই ক্যাটাগরির লেবেল লিংক দিতে হবে।

​টিপস: ড্রপডাউন মেনু (Dropdown Menu) তৈরি করতে চাইলে নামের আগে একটি আন্ডারস্কোর (যেমন: _Android) দিন। এটি মূল মেনুর নিচে একটি সাব-মেনু তৈরি করবে।

​অধ্যায় ১৮: লেবেল (Label) লিংকিং সবথেকে বড় ভুল যা সবাই করে

​অনেকেই মেনু বারে নাম লিখেন কিন্তু লিংকে ভুল করেন। এর ফলে মেনুতে ক্লিক করলে "Page Not Found" দেখায়।

• ​সঠিক নিয়ম: আপনি যদি 'Tech' নামে মেনু বানাতে চান, তবে আপনার আগে 'Tech' লেবেলে একটি পোস্ট থাকতে হবে।
• ​আপনার ব্লগের ইউআরএল-এর পর /search/label/Tech যোগ করলে যে লিংকটি হয়, সেটিই মেনু বারে ব্যবহার করতে হবে।

​অধ্যায় ১৯: লোগো (Logo) এবং ফেভিকন (Favicon) সেটআপ

​একটি ব্র্যান্ডের পরিচয় তার লোগোতে।

• ​Header Logo: লেআউটে গিয়ে 'Header' গ্যাজেটে ক্লিক করুন। আপনার তৈরি করা লোগোটি (ফটোশপে বানানো ভালো) আপলোড করুন। 'Instead of title and description' অপশনটি সিলেক্ট করুন।
• ​Favicon: ব্রাউজারের ট্যাবে আপনার সাইটের নামের পাশে যে ছোট আইকনটি দেখা যায়, তাকে ফেভিকন বলে। এটি Settings > Favicon এ গিয়ে আপলোড করতে হয়। (এটি অবশ্যই স্কয়ার সাইজের হতে হবে)।

​অধ্যায় ২০: সাইডবার (Sidebar) কাস্টমাইজেশন

​সাইডবারে অতিরিক্ত জিনিস রাখলে ভিজিটর বিরক্ত হয়। প্রফেশনাল সাইটগুলোতে সাইডবারে সাধারণত নিচের জিনিসগুলো থাকে:

• ​Popular Posts: আপনার সাইটের সেরা লেখাগুলো দেখানোর জন্য।
• ​Social Plugin: আপনার ফেসবুক পেজ বা ইউটিউব চ্যানেলের লিংক।
• ​Categories (Label): ভিজিটর যেন এক ক্লিকে সব বিভাগ দেখতে পায়।

​অধ্যায় ২১: ফুটার (Footer) কাস্টমাইজেশন

​ফুটার হলো ওয়েবসাইটের একদম নিচের অংশ। এখানে কপিরাইট টেক্সট এবং প্রয়োজনীয় পেজগুলোর লিংক রাখা হয়।

• ​Copyright: আপনার থিমের এডিটর থেকে ফুটার ক্রেডিট পরিবর্তন করতে হয়। তবে অনেক ফ্রি থিমে এটি পরিবর্তন করলে সাইট রিডাইরেক্ট হয়ে যায়। সেক্ষেত্রে 'Premium Version' ব্যবহার করা ভালো।

​অধ্যায় ২২: অ্যাডভান্সড গ্যাজেট ব্যবহার (Featured Post)

​আপনি যদি চান আপনার সাইটের হোমপেজে একটি বিশেষ পোস্ট বড় করে দেখাবে, তবে Featured Post গ্যাজেটটি ব্যবহার করুন। এটি আপনার সবথেকে গুরুত্বপূর্ণ আর্টিকেলের দিকে ভিজিটরদের আকর্ষণ করবে।

​অধ্যায় ২৩: মোবাইল রেসপন্সিভনেস চেক করা

​২০২৬ সালে দাঁড়িয়ে প্রায় ৮০% ভিজিটর মোবাইল থেকে আপনার সাইট দেখবে। লেআউট কাস্টমাইজ করার পর অবশ্যই আপনার নিজের মোবাইল থেকে চেক করুন:

১. মেনু বারটি মোবাইলে ঠিকমতো ওপেন হচ্ছে কি না।

২. ছবিগুলো স্ক্রিনের বাইরে চলে যাচ্ছে কি না।

৩. লেখাগুলো পড়ার উপযোগী কি না।

​অধ্যায় ২৪: থিম এডিটিং এবং এইচটিএমএল (HTML) পরিচিতি

​কখনো কখনো লেআউট থেকে সব কিছু পরিবর্তন করা যায় না। সেক্ষেত্রে আমাদের Theme > Edit HTML এ যেতে হয়। এটি একটু ঝুঁকিপূর্ণ কাজ।

• ​সতর্কতা: এইচটিএমএল কোড এডিট করার আগে অবশ্যই একটি Backup নিয়ে নিন। যদি কোডিংয়ে ভুল হয়, তবে Ctrl + Z চেপে ব্যাকে চলে আসুন।

​একটি সুন্দর লেআউট আপনার ওয়েবসাইটকে ১০ গুণ বেশি প্রফেশনাল করে তোলে। আজকের এই গাইডে আমরা ব্লগার লেআউটের প্রতিটি অংশ ব্যবচ্ছেদ করে দেখেছি। এখন আপনার কাজ হলো আপনার ব্লগের মেনু এবং সাইডবার সুন্দর করে সাজিয়ে ফেলা।

​আগামী পর্বে আমরা শিখব "ব্লগার এসইও (SEO) এবং গুগল সার্চ কনসোল সেটআপ" কীভাবে আপনার ওয়েবসাইটকে গুগলের প্রথম পাতায় নিয়ে আসবেন। এটি এই সিরিজের সবথেকে গুরুত্বপূর্ণ পর্ব হতে যাচ্ছে।

​ধন্যবাদান্তে,

টিম Daily Tech News

ইউআরএল: Daily Tech News

ইউআরএল: Tech News 24

© ২০২৬ - আপনার অনলাইন শিক্ষক