মেঘে ঢাকা 'আকাশ' টেমপ্লেট ০১

আজ আমি আপনাদের সামনে একটি নতুন ডিজাইনের (New Design), নতুন আঙ্গিকের (New Style) টেমপ্লেট (Blogger template) উপস্থাপন করতে যাচ্ছি। এর নাম রেখেছি 'আকাশ'। আমি টেমপ্লেট ডিজাইন করতে গিয়ে সাধারণত কোন ইমেজ ফাইল ব্যবহার করি না। কারণ বাংলাদেশের ইন্টারনেটের যে স্পিড (Internet speed), তাতে বিভিন্নরকম ছবি দিয়ে সাজানো টেমপ্লেটযুক্ত ব্লগ লোড (Loading time) হতে যে কত সময় ব্যয় হয়ে যায়, তা ভুক্তভোগীমাত্রই ভালমতো বোঝেন ও জানেন। সেজন্য আমি এতদিন পারতপক্ষে কোনরকম ইমেজ ফাইলকে যুক্ত করে টেমপ্লেট ডিজাইন করতে চাইনি। কিন্তু তীব্র গরমের পর বর্ষার (Rainy Season) আগমনে আকাশ যেভাবে মেঘে ঢেকে গেছে, তাতে করে মেঘ ও আকাশকে সমন্বয় করে 'আকাশ' নাম দিয়ে একটি টেমপ্লেট ডিজাইন করার লোভ সামলাতে পারলাম না। এই টেমপ্লেটটির মাত্র তিনটি জায়গায় {পোস্ট টাইটেল (Post Title) , সাইডবার টাইটেল (Sidebar Title) ও মেনুবার ব্যাকগ্রাউন্ড (Menubar Background)} ছোট সাইজের ইমেজ ফাইল (Image File) ব্যবহার করা হয়েছে। বিভিন্ন টেক্সট (Text) বা লিংকগুলোর (Links) রঙ ব্লগের ডিফল্ট রঙ পরিবর্তন করার সিস্টেম থেকে পাল্টানো যাবে। হেডারের (Header) বড় ছবিটি ডিফল্টভাবে (Default) যুক্ত নয় (Not Built in)। ফলে আপনি যখন আপনার ব্লগে এই টেমপ্লেটটি স্থাপন (Install) করবেন, তখন হেডারের ছবিটি প্রদর্শিত হবে না। আপনাকে এই পদ্ধতি অনুযায়ী হেডারের ছবিটি পরিবর্তন করে নিতে হবে।

টেমপ্লেটের Snapshot

তবে কেউ যদি ছোট ইমেজফাইলগুলো ছাড়া এই টেমপ্লেটটি ব্যবহার করতে চান, তাহলে তাও সম্ভব। আমি একে একে সবকিছু আলোচনা করছি।

টেমপ্লেটটির বৈশিষ্ট্য:

• মূল ব্যাকগ্রাউন্ডের রঙ (Main Background Color) ডিফল্টভাবে নীল।
• পোস্ট করার জায়গার ব্যাকগ্রাউন্ড (Post Background) সাদা।
• Read more... সুবিধা ডিফল্টভাবে সংযুক্ত।
• ড্রপডাউন মেনু (Dropdown menu) স্বয়ংক্রিয়ভাবে (Automatically) যে কলামে রাখবেন, সেই কলামের আকার ধারণ করবে।
  
• হেডারের ঠিক নিচে একটি নেভিগেশন মেনুবার (Navigation Menubar) যুক্ত। এটাতে নিজের প্রয়োজনমাফিক লিংক যুক্ত করা মোটেও কঠিন নয়।
• একটি মূল কলাম বামপাশে (Left Sidebar)।
• তিনটি কলাম টেমপ্লেটের একেবারে নিচে অবস্থিত (3 Column on Bottom)।
• সবশেষে একটি বড় কলাম।
• ব্লগের শরীরের বিভিন্ন জায়গায় গুগলের এডসেন্স কোড (Adsense Code) বসাতে পারবেন। অর্থাৎ 'এডসেন্স রেডি' (Adsense Ready)।
• কোন লেখাকে উদ্ধৃত (Quote) করলে তা বামপাশে একটি গাঢ় লম্বাদাগ যুক্ত হয়ে নীল ব্যাকগ্রাউন্ডের রঙে প্রদর্শিত হবে।

• টেমপ্লেটটির প্রস্থ: ৮৮৫ পিস্কেল (885 px)
  
• মেইন পোস্ট অংশের প্রস্থ: ৫৭০ পিস্কেল (570 px)
  
• বামপাশের প্রধান সাইডবারটির প্রস্থ: ৩০৫ পিস্কেল (305 px)
  

-: নিচের কলাম তিনটির আকার :-

• বাংলা হ্যাকস এর ফিড রয়েছে যেটাতে, তার আকার: ৩০০ পিক্সেল (300 px)
  
• মাঝের এডসেন্স স্থাপিত কলামটির আকার ৩২০ পিক্সেল (320 px)
  
• আর্কাইভ রয়েছে যেটাতে, তার আকার ২০০ পিক্সেল (200 px)
  

টেমপ্লেটের সেটিং:

প্রথমে ব্লগারে লগইন করুন। এবার এই পোস্টের পদ্ধতি মোতাবেক 'আকাশ ০১' টেমপ্লেটটিকে ইনস্টল করে ফেলুন।

• নেভিগেশন মেনুবারে (Navigation Menubar) থাকা লিংকগুলো পরিবর্তন করে নিজের পছন্দ ও প্রয়োজনমতো লিংক স্থাপন করার জন্য নিচের ছবিটি ভালোভাবে লক্ষ্য করুন।

উপরের ছবিতে দেখানো অংশে থাকা লিংকগুলো পরিবর্তন করে নিজের প্রয়োজনীয় লিংক লিখে দিন। লিংক লেখার নিয়ম জেনে নিন এই পোস্ট থেকে।

ডেমো ব্লগের হেডারে থাকা ছবিটিই যদি ব্যবহার করতে চান তাহলে তা এখানে ক্লিক করে ডাউনলোড করুন।

হেডারের ছবিটির মূল উৎস এটা। Right ক্লিক করে সম্পূর্ণ ছবিটিই ডাউনলোড করতে পারবেন।

যদি টেমপ্লেটে সংযুক্ত ছবিগুলো পরিবর্তন করতে চান কিংবা রাখতে না চান তাহলে নিচের পদ্ধতিগুলো অনুসরণ করুন।

ব্লগারে লগইন করার পর লেআউট অংশের HTML পরিবর্তন করার জায়গায় নিচে প্রদর্শিত চিত্র দেখে দেখে বিভিন্ন ছবির লিংকগুলো পরিবর্তন করে ফেলুন। যদি কোনকিছুর ব্যাকগ্রাউন্ডে কোনরকম ছবি দেখাতে না চান, তাহলে একেবারে ছবিযুক্ত লাইনটি মুছে ফেলুন। যেমন

background-image: url(http://i28.tinypic.com/97rwn7.jpg):

এরকম লাইনটি সম্পূর্ণ মুছে ফেলুন। তাহলে আর ব্যাকগ্রাউন্ডে কোন ছবি দেখা যাবে না।

• নেভিগেশন মেনুবারের (Navigation Menubar) ব্যাকগ্রাউন্ডের ছবিটি পরিবর্তন করতে চাইলে নিচের ছবিতে লাল দাগ দিয়ে চিহ্নিত ছবির লিংকটি পরিবর্তন করে আপনার পছন্দের কোন ছবির ডাইরেক্ট লিংক (Direct Link) স্থাপন করুন।

• পোস্টের টাইটেল বারের (Post Title bar) ব্যাকগ্রাউন্ডের ছবিটি পরিবর্তন করতে চাইলে নিচের ছবিতে লাল দাগ দিয়ে চিহ্নিত ছবির লিংকটি পরিবর্তন করে আপনার পছন্দের কোন ছবির ডাইরেক্ট লিংক (Direct Link) স্থাপন করুন।

• সাইডবারের ব্যাকগ্রাউন্ডের (Sidebar) ছবিটি পরিবর্তন করতে চাইলে নিচের ছবিতে লাল দাগ দিয়ে চিহ্নিত ছবির লিংকটি পরিবর্তন করে আপনার পছন্দের কোন ছবির ডাইরেক্ট লিংক স্থাপন করুন।

আশা করি কোনকিছু বুঝতে আপনার অসুবিধা হচ্ছেনা।

ডেমো ব্লগ ভিজিট করুন। (আপনার বোঝার সুবিধার্থে বিভিন্ন রকম গেজেট লাগানোর কারণে লোডিং স্পিড কিছুটা কম।)

ডাউনলোড করুন:

• জিপ ফরমেট (Zip File), সাইজ: 8.2 KB
• .7z ফরমেট, সাইজ: 7.9 KB

কোনরকম সমস্যা চোখে পড়লে কিংবা কোনরকম পরামর্শ দিতে চাইলে তা জানাতে দ্বিধা করবেন না।