উপরের চিত্রে দেখুন বেশ কয়েকটি ম্যানুবার এবং Social Media বাটন দেখা যাচ্ছে। এই অংশটি ব্লগার টেমপ্লেট এর সবার উপরে থাকবে। এটিকে ওয়েব ডিজাইনের ভাষায় Top Nav Bar বলা হয়। আমরা এটিতে Menu Bar যুক্ত করার পাশাপাশি Social Media বাটনও যুক্ত করেছি। যার ফলে Top Nav Bar টি আরও আকর্ষণীয় হয়ে উঠবে। তাছাড়া এটির Social Media Button গুলিতে আকর্ষণীয় Css3 ইফেক্ট দেয়া হয়েছে। আপনার ব্লগে এটি যুক্ত করলে এর সম্পর্কে আরও পরিষ্কার ধারনা নিতে পারবেন। এ ধরনের Top Bar কেবলমাত্র প্রফেশনাল ব্লগার টেমপ্লেটে দেখা যায়।
কিভাবে Header কাষ্টমাইজ করবেন?
- প্রথমে আপনার ব্লগে লগইন করুন।
- তারপর Template > Edit Html এ ক্লিক করুন।
- কিবোর্ড হতে Ctrl+F চেপে <header> অংশটি সার্চ করলে নিচের চিত্রেরমত দেখতে পাবেন।
- উপরের চিত্রে আপনাদের বুঝার সুবিধার্থে আমি দুটি Screenshot একসাথে যুক্ত করে দিয়েছি। প্রথমে <header> অংশটি সার্চ করুন। টেমপ্লেটের <header> অংশ সার্চ করার পর বাম পাশের ১ নং চিত্রটি দেখতে পাবেন।
- তারপর ১ নং চিত্রের তীর চিহ্ন দ্বারা মার্ক করা ঐ সংখ্যাটিতে ক্লিক করার পর ডান পাশের ২ নং চিত্রটি দেখতে পাবেন।
- এখন ২ নং চিত্রে মার্ক করা <header>...</header> অংশটি মাউস অথবা কীবোর্ডের সাহায্যে Cut করুন।
- এরপর ব্লগার টেমপ্লেটের <body অংশটি সার্চ করলে নিচের কোডগুলি দেখতে পাবেন।
- এখন <header>...</header> এর Cut করা অংশটি উপরের লাইনের নিচে পেষ্ট করুন।
- এখন পুনরায় নিচের কোডগুলি আগেরমত <body .... এর নিচে কপি করে পেষ্ট করুন।
- আবার <div class='fauxborder-left header-fauxborder-left'> অংশটি সার্চ করুন।
- উপরের কোডটির ঠিক উপরে <div class='max-wrapper'> লাইনটি যুক্ত করুন।
- তারপর পুনরায় কিবোর্ড হতে Ctrl+F চেপে </header> অংশটি সার্চ করুন।
- এখন </div> অংশটি </header> ট্যাগের উপরে পেষ্ট করুন।
Top Nav Bar স্টাইলশীট যুক্ত করাঃ
- কিবোর্ড হতে Ctrl+F চেপে .header-outer { অংশটি সার্চ করলে নিচের কোডটি দেখতে পাবেন।
- উপরের কোডটির জায়গায় নিচের কোডগুলি কপি করে Replace করুন।
- এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- নিচের CSS কোডগুলি কপি করে ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
- সবশেষে Template Save করলেই আকর্ষণীয় পরিবর্তন দেখতে পাবেন।
পরবর্তী পোষ্টঃ আমাদের পরবর্তী পোষ্টে দেখাব কিভাবে ব্লগার টেমপ্লেটে আকর্ষণীয় Main Menu Bar যুক্ত করতে হয়? ততক্ষণ আমাদের সাথেই থাকুন। এই পোষ্টের কোথাও বুঝতে কোন অসুবিধা হলে আমাদের কমেন্ট করে জানাতে পারেন। আমরা ২৪ ঘন্টার মধ্যে আপনার সমস্যা সমাধান করার চেষ্টার করব,
