Showing posts with label টেমপ্লেট. Show all posts
Showing posts with label টেমপ্লেট. Show all posts

টেমপ্লেট ডিজাইনার সবাই ব্যবহার করতে পারবেন

নতুন ব্লগার টেমপ্লেট ডিজাইনারআমরা এর আগে মার্চ মাসে 'ব্লগার ডিজাইনার' দিয়ে নিজের টেমপ্লেট নিজেই সম্পাদনা করার কথা জেনেছিলাম। তখন সুবিধাটি শুধুমাত্র draft.blogger.com ঠিকানায় পাওয়া যেত। কিন্তু এখন এই সুবিধাটি সবার জন্য উন্মুক্ত করা হয়েছে। এখন থেকে ব্লগার টেমপ্লেট ডিজাইনার সুবিধাটি blogger.com ঠিকানাতেও পাওয়া যাবে।ব্লগার টেমপ্লেট ডিজাইনার
  • গুগল আইডি ও পাসওয়ার্ড দিয়ে Blogger.com এ লগইন করুন।
  • দেখতে পারবেন যে, আগের Layout ট্যাবটির নাম পরিবর্তন করা হয়েছে।
  • এখন এর নাম Design, এখানে 'Template Designer' নামক নতুন একটি ট্যাব দেখা যাচ্ছে।
ইতিমধ্যে এই সুবিধাটিতে বেশ কিছু পরিবর্ধন ও পরিমার্জন করা হয়েছে। যেসব পরিবর্তন ইতিমধ্যে করা হযেছে সেগুলো হলঃ
  • সর্বমোট ১৯টি নতুন টেমপ্লেট
  • ডিজাইনকে লেআউট থেকে আলাদা করা হয়েছে। ফলে শুধুমাত্র CSS পাল্টিয়েই ব্লগের ডিজাইন পরিবর্তন করা যাবে। লেআউটের কোনরকম পরিবর্তন করতে হবে না।
  • একশয়ের বেশি উচুমানের ব্যাকগ্রাউন্ড ছবি বিনেপয়সাতে ব্যবহার করা যাবে।
  • একটিমাত্র জায়গা থেকে ডিজাইনের সব জায়গার রঙ পাল্টানো যাবে।
  • লেআউটের আকার ঠিক রাখতে পিক্সেল পর্যন্ত পরিবর্তন করা যাবে। ফলে নির্দিষ্ট মাপ পাওয়ার জন্য কষ্ট করতে হবে না।
  • রিয়াল টাইম প্রিভিউ ডিজাইন কন্ট্রোল প্যানেলের নিচে তাৎক্ষণিকভাবে দেখতে পারবেন।
  • সহজ এবং ঝামেলামুক্ত। ফলে সামান্য ধারণা থাকলেই এটা ব্যবহার করতে কোন সমস্যা হবে না।
  • Advanced ট্যাব ব্যবহার করে ডিজাইনারদের তৈরি CSS পাল্টে নিজের লেখা CSS ব্যবহার করতে পারেন। একই সাথে নিচের প্রিভিউ উইন্ডোতে তাৎক্ষণিক প্রিভিউ দেখতে তো পারবেনই।
  • সবরকমের ব্রাউজারে সাপোর্ট করে। যেমন যদি গোলাকার কর্ণার চান, তাহলে তার জন্য প্রয়োজনীয় কোড ব্লগার বসিয়ে দেবে। ফলে ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার এবং ক্রোমের জন্য আলাদা আলাদা কোড আপনাকে বসাতে হবে না।

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

এই বিষয়ক খবর প্রকাশিত হয়েছে ব্লগার বাজ এর Blogger Template Designer Now Available To Everyone নামক পোস্টে।

'ব্লগার ডিজাইনার' দিয়ে নিজের টেমপ্লেট নিজেই সম্পাদনা করুন

এবার নিজের ব্লগ নিজেই ডিজাইন করুন। হ্যাঁ, বন্ধুরা এতদিন ব্লগার.কম এর দেয়া ডিফল্ট টেমপ্লেটগুলো নিয়ে যাদের মনক্ষুন্নতা ছিল, তাদের জন্য আনন্দের খবর নিয়ে আমি আজ উপস্থিত হয়েছি। এখন থেকে নিজের ব্লগের টেমপ্লেট নিজেই ডিজাইন করতে পারবেন। অত্যাধুনিক সব ডিজাইন নিয়ে গুগল আপনার সেবার জন্য প্রস্তুত হয়েছে। আর এইসব ডিজাইন পরিবর্তন করার জন্য কোন xml ফাইল আপলোড করতে হবে না, কোথাও কোন HTML এডিট করতে হবে না।
  • সাধারণত আপনি www.blogger.com এ লগইন করেন, তাই না? এবার www.draft.blogger.com এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
  • ড্যাশবোর্ডের Layout ট্যাবে গেলে একেবারে ডানপাশে একটি নতুন লিঙ্ক দেখতে পারবেন।
  • নাম Template Designer
blogger new template designer

  • এক অন্যভুবনে প্রবেশ করবেন।
  • এখানে স্ক্রিন দুটি অংশে বিভক্ত। উপরের অংশটি টেমপ্লেট ডিজাইনার এবং নিচে আপনার ব্লগের প্রিভিউ।

  • templates menu in blogger new template designer panel
  • উপরের ডিজাইনার অংশের বামপাশের মেনুটি খুব শক্তিশালী। এখানে চারটি প্রধান মেনু আছে। সেগুলো হল: Templates, Background, Layout এবং Advanced
  • প্রয়োজনীয় সব কমান্ড এখান থেকেই প্রয়োগ করা সম্ভব।
  • Templates মেনু থেকে আপনি মোট চার রকমের টেমপ্লেট ডিজাইন এখান থেকে পাবেন। নাম: Simple, Picture window, Awesome এবং Watermark, তবে একটির তিনটিসহ বাকীগুলোর চারটি করে ভিন্নতা আছে। অতএব আপনি মোট ১৫ রকমের ডিজাইন এখান থেকে সিলেক্ট করতে পারবেন। যদি আপনার ব্লগের টেমপ্লেট কাস্টমাইজ করা হয়, তাহলে প্রথমে স্ক্রিণের মাঝামাঝি থাকা You've customized this template. Remove customizations লেখাতে ক্লিক করে কাস্টমাইজেশনগুলো মুছে ফেলুন।
  • Background মেনু থেকে ব্লগের কালার থীম পরিবর্তন করার সাথে সাথে ব্যাকগ্রাউন্ড হিসেবে বিভিন্নরকমের ছবি নির্বাচন করতে পারবেন। ব্যাকগ্রাউন্ড থীম পরিবর্তন করার জন্য Background Image লেখার নিচের ছবিতে ক্লিক করুন।
  • Background menu in blogger template designer
  • Abstract, The Arts, Business, Celebrations, Entertainment, Family, Food & Drink, Health & Beauty, Hobbies & Crafts, Home & Garden, Nature, Patterns, Recreation, Science, Shopping, Technology, Textures এবং Travel শিরোনামের অসংখ্য ছবি থেকে যে কোন একটাকে ব্যাকগ্রাউন্ড ছবি হিসেবে বেছে নিতে পারবেন।
  • Layout menu in blogger template designer
  • Layout মেনু থেকে ব্লগের কলাম সংখ্যা পরিবর্তন করতে পারবেন। এতকাল যারা ডিফল্ট দুইটি কলাম নিয়ে কাজ করতে করতে বিরক্ত হয়ে গেছেন, তাদের জন্য এই সুবিধাটি সত্যিই কাজে দেবে। এখান থেকে কয়টি কলাম দিয়ে ব্লগ সাজাতে চান, তা নির্বাচন করুন। এই Layout মেনুটি তিনটি সাবমেনুতে বিভক্ত। Body layout, Footer layout এবং Adjust width, ফুটার লেআউট দিয়ে ফুটারে কয়টি কলাম রাখতে চান, তা নির্বাচন করতে পারবেন। Adjust width দিয়ে ব্লগ ও সাইডবারের কলামগুলোর আকার বড়-ছোট করতে পারবেন।
  • Advanced menu in blogger new template designer
  • Advanced মেনু দিয়ে আপনার ব্লগের বিভিন্ন অংশের টেক্সট কালার ও ফন্ট পরিবর্তন করতে পারবেন।
  • স্ক্রিণের নিচে থাকা ব্লগ প্রিভিউতে পরিবর্তনগুলো খেয়াল রাখুন। যদি পছন্দ হয়, তাহলে উপরে ডানপাশে থাকা APPLY TO BLOG লেখা বোতামে ক্লিক করে পরিবর্তনগুলো ব্লগে প্রয়োগ করুন।
  • একটু লক্ষ্য করে দেখুন যে স্ক্রিণের ঠিক মাঝামাঝি অংশে Reset post to template default, যদি কোনরকম ভুলত্রুটি হয়ে যায়, তাহলে এখানে ক্লিক করে ডিফল্ট অবস্থায় ফিরে যেতে পারবেন।
এই Template Designer অংশে টেমপ্লেটের সৌন্দর্য পরিবর্তন করার পর উপরে ডানে থাকা Back to Blogger লেখাতে ক্লিক করে ব্লগের নিয়মিত ড্যাশবোর্ডে প্রবেশ করুন। যথারীতি Layout অংশের Page Elements ট্যাবে ব্লগের বিভিন্ন কলামে প্রয়োজনীয় গেজেটগুলো স্থাপন করতে পারবেন।
Redesign your blogger template with blogger new template designer.
আমার কাছে এই নতুন টেমপ্লেট ডিজাইনগুলি সত্যিই ভাল লেগেছে। দিনে দিনে প্রযুক্তি পরিবর্তন হয়ে যাচ্ছে। মানুষের রুচি, সৌন্দর্যবোধ পাল্টাচ্ছে। সময়ে সাথে সাথে মানুষ নতুন কিছু পাবার জন্য উন্মুখ হয়ে উঠেছে। মানুষের এই নতুন চাহিদার প্রতি সম্মান করে ব্লগার তাদের ডিজাইনেও যে পরিবর্তন এনেছে, তা সত্যি প্রশংসার দাবীদার। ব্লগের বর্ডার, পোস্ট অংশ, সাইডবারের গোলাকার কর্ণার, ব্লগ বডির অর্ধস্বচ্ছ ভাব ব্লগলিখিয়েদেরকে সন্তুষ্ট করবে এ আমি জোর গলায় বলতে পারি। নতুন ওয়েব দুনিয়ায় আপনার পরিচিতিকে অন্যভাবে উপস্থাপন করতে এই বৈশিষ্ট্যগুলো সহায়তা করবে। তবে সার্বিকভাবে ব্লগ লোডিং টাইম একটু বেশি লাগছে বলেই আমার কাছে মনে হয়েছে (এটা আমার ধীরগতির ইন্টারনেট কানেকশনের জন্যও হতে পারে)।

# মনে রাখুন যে এটা blogger.com এ পাওয়া যাবে না। পাওয়া যাবে draft.blogger.com সাইটে। অর্থাৎ এখনও এই সুবিধাটি নিয়ে পরীক্ষা নিরীক্ষা চলছে। কোনরকম সমস্যা হয়ে গেলে ব্লগার কর্তৃপক্ষ ক্ষতিপূরণের দায়িত্ব নেবে না।
নিচের ছবিটি একটি ডেমো ব্লগের। আপনাদের উদ্দেশ্যে নমুনা হিসেবে উপস্থাপন করছি।

demo blog design by draft.blogger.com template designer

কোন গেজেট না হারিয়ে নিরাপদে Blogspot.com ব্লগের টেমপ্লেট পরিবর্তন করুন

ব্লগারের টেমপ্লেট পরিবর্তন করার পদ্ধতি আমরা আগেই জেনেছি। আমরা এও জানি যে টেমপ্লেট পরিবর্তন করতে গিয়ে কিভাবে গেজেটগুলোকে সেভ করে রাখতে হয়। কিন্তু কখনও কখনও এমন সমস্যা হয় যে, কোন কোন গেজেটের কোড থাকে না ফলে সেগুলো সেভ করে রাখাও যায় না। আবার নতুন করে যে সাইট থেকে কোড নিয়েছেন, সেখান থেকে কোড সংগ্রহ করার প্রয়োজন পরতে পারে। এই সব সমস্যা সমাধানে ব্লগার.কম একটি নতুন ফিচার ব্লগলিখিয়েদের জন্য চালু করেছে। এখন থেকে আপনাকে আলাদাভাবে গেজেটগুলোর কোড সেভ করে রাখার প্রয়োজন আর নেই। যখন টেমপ্লেট সেভ করবেন, তখনই একটি ডায়ালগ আসবে যে আপনি কি আগের টেমপ্লেটের গেজেটগুলো মুছে দিতে চান, নাকি সেগুলো রেখে দিতে চান।
changing template is safe now
উপরের ছবি দেখুন। একটি টেমপ্লেট পরিবর্তন করতে গিয়ে তিনটি অপশন আপনার জন্য এসেছে। এর মধ্যে যে কোন একটিকে বেছে নিতে হবে।
  • KEEP WIDGETS: যদি পুরনো গেজেটগুলো রেখে দিতে চান, তাহলে এখানে সেভ করুন। এটাই ডিফল্ট হিসেবে নির্বাচন করা আছে।
  • DELETE WIDGETS: যদি মুছে ফেলতে চান, তাহলে এখানে ক্লিক করুন।
  • CANCEL: যদি টেমপ্লেট পরিবর্তন করার সিদ্ধান্ত পাল্টান তাহলে এখানে ক্লিক করুন।
Changing template is safe now in blogger blog. You can keep or delete any widget.

টেমপ্লেট পরিবর্তন করতে গিয়ে গেজেটগুলো নিরাপদে রাখুন

Blogger.com এর কোন ব্লগে টেমপ্লেট পরিবর্তন করার পদ্ধতি আমরা জানি। এই পোস্ট এবং এই পোস্টটিতে এ বিষয়ে বিস্তারিত আলোচনা করা হয়েছে। কিন্তু টেমপ্লেট পরিবর্তন করতে গেলে একটি সাধারণ সমস্যায় পড়তে হয়, আর তা হল গেজেট হারিয়ে যাওয়া। হয়তো অনেক কষ্ট করে বিভিন্ন জায়গা থেকে গেজেট সংগ্রহ করে ব্লগের সাইডবারগুলোতে লাগিয়েছেন। পরবর্তীতে টেমপ্লেট পরিবর্তন করতে গেলে এই গেজেটগুলো মুছে যায়। সাধারণ কয়েকটি গেজেট থাকলে সেগুলো মুছে দিয়ে নতুন টেমপ্লেট স্থাপন করা যেতে পারে। কিন্তু যদি ব্লগে বয়স বেশি হয় এবং আপনি শখ করে বা প্রয়োজনে বিভিন্নরকম গেজেট ব্লগে লাগানোর পর টেমপ্লেট পরিবর্তন করতে চান, সেক্ষেত্রে তো গেজেটগুলো মুছে যাওয়া কষ্টের হয়ে পরে। তাই না? তাই আজ আমরা জানবো কিভাবে টেমপ্লেট পরিবর্তন করতে গিয়ে পুরনো গেজেটগুলোকে আলাদাভাবে সেভ করে রাখতে পারি।
Save your favorite gadgets in blogger blog with notepad or leafpad.
গেজেটগুলোর বেশিরভাগ সাধারণত HTML কোড দিয়ে তৈরি হয়। আর এগুলো আমরা স্থাপন করি ব্লগের সাইডবারে বিভিন্ন HTML/ Javascript গেজেটবক্সে। যখন আপনি টেমপ্লেট পরিবর্তন করার সিদ্ধান্ত গ্রহণ করবেন, তার পূর্বে একটি সহজ পদ্ধতিতে এই গেজেটগুলো সেভ করে রাখতে পারেন।
  • ব্লগার.কম এ লগ ইন হয়ে নিন।
  • Layout > Page Elements ট্যাবে যান।
  • এখানে HTML/ Javascripst গেজেটগুলোর কোণে থাকা Edit বাটনে ক্লিক করুন। গেজেটটি খুলে যাবে।
  • সেখানে থাকা কোডগুলো সম্পূর্ণ কপি করে Notepad বা Leafpad যে কোন টেক্সট এডিটরে পেস্ট করুন।
  • এই টেক্সটফাইলটি my_blog_gadgets.txt নামে সেভ করুন।
  • ব্লগের গেজেটগুলোর কোড নিরাপদে থেকে গেল।
  • এবার টেমপ্লেট পরিবর্তন করার পর এক এক করে গেজেটগুলোর কোড নতুন নতুন HTML/ Javascropts গেজেটবক্সে কপি করে দিন।
  • সবগুলো গেজেট ফিরে পাবেন।
  • আশা করি এবার আর গেজেট হারানোর দুঃখ পেতে হবে না।
  • নতুন নতুন টেমপ্লেট পরীক্ষা করে দেখতে http://templates.banglahacks.com সাইটটি একবার ভিজিট করে দেখতে পারেন।

Blogger.com এর জন্য বর্ণময় টেমপ্লেট 'বর্ণিল ০২'

colorful template barnil 2 for blogger.com blogব্লগার.কম (Blogger.com) এর জন্য বর্ণময় টেমপ্লেট 'বর্ণিল ০২' নিয়ে আজ আমি উপস্থিত হয়েছি। আপনারা যারা 'বাংলা হ্যাকস' ব্লগের নিয়মিত পাঠক তারা 'বর্ণিল ০১' টেমপ্লেটটি সম্পর্কে জানেন। এই নতুন 'বর্ণিল ০২' টেমপ্লেটে আগের টেমপ্লেটটির যে প্রধান বৈশিষ্ট্য সেগুলো সব আছে। এছাড়া অতিরিক্ত আরও কিছু সুবিধা নিয়ে এই বর্ণিল ০২ টেমপ্লেটটির আবির্ভাব। আশা করি ব্লগার.কম প্লাটফর্মে যাঁরা ব্লগ খুলেছেন, তাঁদের কাছে এই টেমপ্লেটটিও হবে।

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

অতিরিক্ত যে বিশেষ বৈশিষ্ট্য এতে রয়েছে সেগুলো হলঃ
  • হেডারের পাশে ৪৬৮×৬০ পিক্সেলের একটি গেজেট বক্স রয়েছে। আমি এখানে গুগলের এডসেন্স লাগিয়ে রেখেছি। আপনারা ইচ্ছে করলে একই সাইজের অন্য কোন গেজেট এখানে লাগাতে পারবেন।
  • উপরে যাওয়ার যে বোতাম ব্লগশরীরের ডানে নীচে লাগানো আছে, তা এবার তৈরি করা হয়েছে গুগলের jquery কোড দিয়ে। ফলে ক্লিক করলে ধীরে ধীরে উপরে চলে আসবেন।
  • একেবারে নিচে চারটি কলামের বদলে এবার দিয়েছি তিনটি কলাম। এর বামপাশের ও মাঝের কলামটি অপেক্ষাকৃত বড় আকারের।
  • কমেন্ট বক্সে ব্লগলেখকের মন্তব্যটি নির্দিষ্ট রঙে রাঙানো থাকবে। এই রঙ এবং মন্তব্যটির বর্ডারের রঙ ব্লগারের ডিফল্ট রঙ পরিবর্তন করার জায়গা থেকে পাল্টাতে পারবেন।
এই বিশেষ বৈশিষ্ট্যগুলো ছাড়া পূর্বের যে বৈশিষ্ট্যগুলো এই নতুন 'বর্ণিল ০২' টেমপ্লেটের অক্ষুন্ন রয়েছে, সেগুলো হলঃ
Now I am publishing a new attractive colorful template for blogger.com blog.
প্রধান বৈশিষ্ট্য:
  • বাংলা ভাষা সাপোর্ট।
  • ৩ (তিন) কলাম।
  • ব্লগের নিচের কলাম রয়েছে।
  • 'বিস্তারিত পড়ুন' সুবিধাটি বিল্টইন রয়েছে
  • SEO পোস্ট টাইটেল এনাবল করা আছে
  • 'উপরে আসুন' বোতামটি বিল্টইন
  • শরীরে বিভিন্ন জায়গার রঙ ড্যাশবোর্ডের রঙ পাল্টানোর জায়গা থেকে পাল্টাতে পারবেন।
  • হেডারে ঠিক নিচে একটি মেনুবার/ ন্যাভিগেশন বার আছে।
  • ব্লগসার্চ বিল্টইন
টেমপ্লেটের যেসব অংশের রঙ ব্লগার.কম এর ডিফল্ট রঙ পরিবর্তন করার ট্যাব থেকে পাল্টাতে পারবেন সেগুলো হলো: This template is free to download and share.
    Page background color
    Outer background color
    Text color
    Link color
    Visited link color
    Link hover color
    Header background color
    Blog title color
    Blog description color
    Post title color
    Post title background color
    Post title hover color
    Post background color
    Border color
    Post image border color
    Post Quote left border color
    Navbar background color
    Navbar text color
    Navbar link color
    Navbar link hover color
    Navbar right border color
    Sidebar title background color
    Sidebar title border color
    Sidebar title text color
    sidebar text color
    Header 2 color
    Profile text color
    Bottom text color
    Bottom top border color
    Bottom title text color
    Bottom title border color
    Left bottom background color
    Center bottom 1 background color
    Center bottom 2 background color
    Right bottom background color
    Blog author comment background color
    Blog author comment background border color
    Footer background color
    Footer top border color
টেমপ্লেটটির আকারগত বৈশিষ্ট্যগুলো হলঃ
    হেডার ইমেজ সাইজঃ ৫০০ পিক্সেল
    ডানপাশের গেজেট বক্স সাইজঃ ৪৭০ পিক্সেল
    ব্লগ লেখার জায়গাঃ ৫০০ পিক্সেল
    বামপাশের সাইডবারঃ ১৬০ পিক্সেল
    ডানপাশের সাইডবারঃ ৩২০ পিক্সেল
    নিচের বামপাশের কলাম আকারঃ ৩৪০ পিক্সেল
    নিচের মাঝের কলাম আকারঃ ৩৪০ পিক্সেল
    নিচের ডানপাশের কলাম আকারঃ ২৫৫ পিক্সেল

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

Edit HTML পাতায় <div id="navigation"> কোডটি খুঁজে বের করুন। Cntrl+F চেপে সেখানে কোডটি লিখে দিলে সহজে খুঁজে পাবেন। <div id="navigation"> এর নিচের থাকা লিংকগুলো পরিবর্তন করে দিন। উপরের ছবিটি লক্ষ্য করুন। কোন কোন লিংক পরিবর্তন করতে হবে তা লাল দাগ দিয়ে চিহ্নিত করা হয়েছে। লিংক লেখার নিয়ম জেনে নিন এই পোস্ট থেকে।
আশা করি কোন সমস্যায় পড়লে নিঃসঙ্কোচে জানাতে দ্বিধা করবেন না।

গুগলপেজ ক্রিয়েটরে থাকা ফাইলগুলো সরিয়ে নিন

আমাদের অনেকেই Google page Creator (Google pages) অনেকদিন থেকেই ব্যবহার করে আসছি। মনের মতো করে স্ট্যাটিক ওয়েব সাইট তৈরির এই দারুণ ওয়েবটুলটি গুগল বন্ধ করে দিচ্ছে একথা ২০০৮ সাল থেকে শোনা যাচ্ছে। বহুবার বিভিন্নভাবে সতর্ক করে দেয়া সত্ত্বেও ব্যবহারকারীরা গুগল পেজ ক্রিয়েটর ব্যবহার করা বন্ধ করছেন না। কিন্তু এবার বোধহয় গুগল একেবারে শেষ সিদ্ধান্ত নিয়ে ফেলেছে যে আর কোন সুযোগ দেয়া হবে না।

গুগল আগেই বলে দিয়েছিল যে Google page creator এর মধ্যে যাদের ওয়েবসাইট খোলা আছে তারা যেন যত তাড়াতাড়ি সম্ভব Google Sites এ তাদের পেজ ও হোস্ট করা ফাইলগুলো সরিয়ে নেয়। আমরা অনেকেই পেজক্রিয়েটরে বিভিন্ন ছবি ও জাভাস্ক্রিপ্ট ফাইল হোস্ট করে রেখে দিয়েছি এবং সেই ফাইলগুলোর লিংক ব্লগারের ব্লগ সাজানোর জন্য ব্যবহার করছি। গুগল এর আগেও বলেছিল যে এই ফাইলগুলোকে গুগল সাইটে সরিয়ে নিয়ে আসতে। কিন্তু আমরা গুগল পেজ ব্যবহার বন্ধ করতে চাইনি, এই প্রতিবাদ হিসেবে এবং ঝামেলা মনে করে ফাইলগুলো সরাইনি। এবার গুগল একটি নতুন টুল তৈরি করেছে। এই টুল দিয়ে অতিসহজে Google page creator এ থাকা ফাইলগুলোকে Google sites (sites.google.com)এ নিয়ে আসা যাবে।

ব্লগার.কম এ লগইন করতে গিয়ে নিচের সতর্কবার্তাটি দেখেছেন কি?
Update your template linksএখানে লেখা রয়েছে
Update your templates

Your templates include links to files hosted on Google Page Creator, a service that is soon migrating to Google Sites. Do you want Blogger to update those links now? Learn more

Update and review Dismiss
এই বার্তার মাধ্যমে গুগলপেজেস ব্যবহারকারীকে গুগল একটা শেষ সুযোগ দিতে চাচ্ছে বলে মনে হয়। এখনই Update and review লেখাতে ক্লিক করুন। http://bloggerhosting.appspot.com এ আপনি একাউন্টে রেজিস্টার করা ব্লগগুলির আইডিসহ রিডাইরেক্ট হয়ে যাবেন। সেখানে নিচের ছবির মতো একটি নতুন পেজ আসবে। সেখানে Grant Access বোতামে ক্লিক করুন।
Blogger hostingখুলে যাওয়া পরের পাতায় আপনার একাউন্টে থাকা ব্লগগুলির একটি তালিকা দেখা যাবে।
Blogger Hosting Update pageআপনার কোন ব্লগ আপডেট করতে হবে কিনা তা এই পাতায় চিহ্নিত করা থাকবে। উপরের ছবিতে দেখুন 'বাংলা হ্যাকস' ব্লগের কোন ফাইল গুগলপেজেস এর সাথে লিংক করা নাই। তাই লেখা রয়েছে No references to Page Creator.

কিন্তু যদি কোন ফাইল কোন ব্লগের সাথে লিংক করা থাকে, যা আপনাকে সরিয়ে আনতেই হবে, তাহলে সেই ব্লগের পাশে লেখা থাকবে Found 3 references to Page Creator. নিচের ছবি দেখুন।
Found some references in your blogএক্ষেত্রে Update references লেখা লিংকে ক্লিক করুন। পরের পাতায় চলে আসবেন।
Backup your templatesএখানে Download your blog template লেখাতে ক্লিক করে আপনার ব্লগের টেমপ্লেটটি ডাউনলোড করে নিন। এবং Next লেখা বোতামে ক্লিক করে এগিয়ে যান।

আরেকটি পাতায় দেখা যাবে যে, গুগল নিজে থেকেই গুগল পেজ ক্রিয়েটরে থাকা ফাইলগুলোকে নিজস্ব হোস্টিং এ নিয়ে নিচ্ছে।
Update templates referencesএই পাতায় Update লেখাতে ক্লিক করে পরিবর্তনগুলো সংরক্ষণ করুন। সংরক্ষণ হয়ে গেলে আবার ব্লগ তালিকায় চলে আসবেন। আরও কোন ব্লগে যদি একই সমস্যা থাকে, তাহলে আবার একই পদ্ধতিতে এই সমস্যার সমাধান করতে হবে।

# যদি আপনি জানেন যে গুগল পেজ ক্রিয়েটরে আপনি কোন সাইট তৈরি করেননাই, কিংবা কোন ফাইল আপলোড করেন নাই। তাহলে ব্লগারে প্রবেশ করার সাথে সাথে যদি কোন সতর্কবার্তা দেখা যায়, সেখানে লেখা Dismiss লিংকটিতে ক্লিক করে দিন। আপনি যেহেতু নিশ্চিত যে এর ফলে আপনার কোন ক্ষতি হবে না, সেহেতু অযথা দুঃশ্চিন্তিত হবার কোন কারণ নেই।

আরও তথ্যের জন্য ব্লগারের এই হেল্প পাতাটি একবার দেখে নিতে পারেন।

এক বর্ণময় টেমপ্লেট 'বর্ণিল' ০১

bh-barnil template for blogspot blog

রঙিন এক টেমপ্লেট নিয়ে আজ আপনাদের সামনে আমি উপস্থিত হয়েছি। এর নাম 'বর্ণিল' ০১। এই টেমপ্লেটটি তিন কলামের। মূল পোস্ট অংশের দুইপাশে কলাম রয়েছে। ফুটারেও রয়েছে ৪টি কলাম।


বৈশিষ্ট:
  • তিন কলাম।
  • ফুটার কলাম ৪টি
  • বিস্তারিত পড়ুন বিল্টইন
  • SEO পোস্ট টাইটেল এনাবল করা আছে
  • 'উপরে আসুন' বোতামটি বিল্টইন
  • শরীরে বিভিন্ন জায়গার রঙ ড্যাশবোর্ডের রঙ পাল্টানোর জায়গা থেকে পাল্টাতে পারবেন।
  • হেডারে ঠিক নিচে একটি মেনুবার/ ন্যাভিগেশন বার আছে।
  • ব্লগসার্চ বিল্টইন
যেসব জায়গার রঙ পাল্টাতে পারবেন সেগুলো হলো:
  • Page background color
    Outer background color
    Text color
    Link color
    Visited link color
    Link hover color
    Header background color
    Blog title color
    Blog description color
    Post title color
    Post title background color
    Post title hover color
    Post background color
    Border color
    Post image border color
    Post Quote left border color
    Navbar background color
    Navbar text color
    Navbar link color
    Navbar link hover color
    Navbar right border color
    Sidebar title background color
    Sidebar title border color
    Sidebar title text color
    sidebar text color
    Header 2 color
    Profile text color
    Bottom text color
    Bottom top border color
    Bottom title text color
    Bottom title border color
    Left bottom background color
    Center bottom 1 background color
    Center bottom 2 background color
    Right bottom background color

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

Edit HTML পাতায় <div id="navigation"> কোডটি খুঁজে বের করুন। Cntrl+F চেপে সেখানে কোডটি লিখে দিলে সহজে খুঁজে পাবেন। <div id="navigation"> এর নিচের থাকা লিংকগুলো পরিবর্তন করে দিন। উপরের ছবিটি লক্ষ্য করুন। কোন কোন লিংক পরিবর্তন করতে হবে তা লাল দাগ দিয়ে চিহ্নিত করা হয়েছে। লিংক লেখার নিয়ম জেনে নিন এই পোস্ট থেকে।
This is a three column template. Download and use in your blogspot blog free.

একটি গাঢ় রঙের টেমপ্লেট 'মায়া' - ০১



আজ আমি উপস্থাপন করছি একটি গাঢ় রঙের ভিন্নরকমের ডিজাইনের টেমপ্লেট। নাম 'মায়া'। এই টেমপ্লেটটির বিশেষ বৈশিষ্ট্য হল এর বিভিন্ন জায়গায় কলাম স্থাপন করা হয়েছে। পোস্ট পাতাসহ মোট সাত (৭)টি কলামের এই টেমপ্লেটটিকে আপনি নিজের প্রয়োজনমতো সাজিয়ে নিতে পারবেন। যদি নিচের কলামগুলো ব্যবহার না করেন তাহলে এটাকে দুই কলামের টেমপ্লেট বলা যাবে। যদি শুধু পোস্ট অংশের নিচের ছোট কলামদুটি ব্যবহার করেন, তাহলে বলা যাবে চার কলাম। আর যদি একেবারে নিচের কলাম তিনটিতে গেজেট লাগান তাহলে ব্লগ টেমপ্লেটটি হবে সাত কলামের।

এই টেমপ্লেটটির ডিফল্ট বাংলা ফন্ট 'আদর্শলিপি'। ফলে বাংলা লেখা সঠিকভাবেই দেখা যাবে। আলাদাভাবে কোন সেটিংস পরিবর্তন করতে হবে না। 'আদর্শলিপি' সহ আরও কিছু ফন্টসহ একটি ছোট ফন্টপ্যাকেজ (ফাইলের আকার: 539.4 KB, জিপ ফাইল) ডাউনলোড করুন। কি কি ফন্ট এই প্যাকেজটিতে রয়েছে তা জানতে এই পাতাটি একবার পড়ে দেখতে পারেন।
This is a dark template. Download a zip file contain unicode Bangla Fonts. Main features are.
এর বৈশিষ্ট্যগুলো হল:
  • পোস্ট অংশের ডানপাশে একটি কলাম রয়েছে
  • ডানপাশের কলামটি শুরু হয়েছে হেডারের পাশাপাশি অবস্থান থেকে
  • পোস্ট অংশের নিচে রয়েছে দুইটি ছোট কলাম
  • ব্লগের একেবারে নিচে রয়েছে তিনটি কলাম
  • ব্লগের মূল ব্যাকগ্রাউন্ড গাঢ় কালচে নীল রঙের
  • পোস্ট পাতার ব্যাকগ্রাউন্ড গাঢ় নীল রঙের
  • সাইডবারের ব্যাকগ্রাউন্ড গাঢ় সবুজ রঙের
আরও কিছু বৈশিষ্ট্য: You can change all the elements. It is a adsense ready template.
  • ব্লগের প্রস্থ ৮৮৫ পিক্সেল
  • পোস্ট পাতার প্রস্থ ৫৪০ পিক্সেল
  • ডানপাশের সাইডবারের প্রস্থ ৩৩৫ পিক্সেল
  • পোস্ট পাতার নিচের কলাম দুটির প্রস্থ ২৫৫ পিক্সেল করে
  • একেবারে নিচের কলাম তিনটির প্রস্থ যথাক্রমে ২৫০ পিক্সেল, ২৪০ পিক্সেল ও ৩৫০ পিক্সেল
  • ফলে ব্লগের শরীরের বিভিন্ন জায়গায় গুগল এডসেন্স কোড লাগাতে কোনরকম সমস্যা হবে না।
  •  
  • এছাড়াও যা রয়েছে
  • This template has some unique and special feature.
  • 'বিস্তারিত পড়ুন' সুবিধা
  • Breadcramb সুবিধা
  • সার্চ ইঞ্জিন উপযোগী পোস্ট টাইটেল দেখানোর ব্যবস্থা
ব্লগারে ডিফল্ট রঙ পরিবর্তনের জায়গা থেকে যেসব রঙ পরিবর্তন করতে পারবেন সেগুলো হল:
  • Text Color
  • Post Body Link Color
  • Blog Title Color
  • Blog Description Color
  • Body Image Border Color
  • Sidebar Text Color
  • Post Body Visited Link Color
ব্লগের টেমপ্লেট পাল্টানোর পদ্ধতি জানুন এই পাতা থেকে। টেমপ্লেট পাল্টাতে গিয়ে একটি সাধারণ সমস্যায় পড়তে পারেন। সমাধান জানুন এখান থেকেIf you face any problem to change this blogger blogspot template please inform me.
আশা করি এই অনন্যসাধারণ টেমপ্লেটটি আপনাদের কাছে ভালো লাগবে। I wish you like this.

সঠিক ব্লগ টেমপ্লেট বেছে নিন

আপনার ব্লগ ওয়ার্ডপ্রেস হোক কিম্বা ব্লগস্পট, সুন্দর একটি থিম কিম্বা টেমপ্লেট ব্যাবহার করতে কার না ইচ্ছা করে? অসংখ্য ওয়েবসাইট আছে যেখানে নানা ডিজাইনের থিম এবং টেমপ্লেট পাওয়া যায়। কিন্তু হাজার হাজার টেমপ্লেটের মাঝে কিভাবে সঠিক টেমপ্লেট পছন্দ করবেন? কি কি দিক মাথায় রেখে ব্লগ টেমপ্লেট বাছাই করবেন অল্প কথায় তাই জেনে রাখা ভালো।

প্রথমেই যেটা মাথায় রাখতে হবে তা হল আপনার ব্লগের বিষয়বস্তু অনুযায়ী টেমপ্লেট পছন্দ করতে হবে। নাহলে টেমপ্লেটের অনেক অংশ আপনের ব্লগ অনুযায়ী বদল করতে হতে পারে, নানারকম অদলবদল করতে করতে শেষে দেখা যাবে যা দেখে পছন্দ করেছিলেন তার বিন্দুবিসর্গও বাকি নেই টেমপ্লেটে। সহজ কথায়, রান্নার রেসিপির ব্লগের জন্য স্বাস্থ্য বিষয়ক টেমপ্লেট বেছে নেবেন না, টেকনোলজি ব্লগের জন্য ফ্যাশান টেমপ্লেট বেছে নেবেন না; দেখতে যতোই সুন্দর লাগুক না কেন। এমন করলে আপনাকে ব্লগের হেডার ছবি পরিবর্তন করতে হবে, অন্যান্য কিছু দিকও বদলে ফেলতে হতে পারে। ব্লগের কোড কিভাবে লেখা সেই বিষয়ে সামান্য জ্ঞান না থাকলে এইসব করা হবে আরো কঠিন কাজ। তাই চেষ্টা করুন যতো অল্প পরিবর্তন ঘটানো যায় মূল টেমপ্লেটে।


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


২-কলাম বিশিষ্ট নাকি ৩-কলাম বিশিষ্ট টেমপ্লেট নেবেন? এটি পরবর্তী প্রধান আলোচ্য বিষয়। আপনি যদি মূলত ছোট আকারের পোস্ট লেখেন, তাহলে ৩-কলাম বিশিষ্ট টেমপ্লেট নেওয়াই ভালো হবে, সেক্ষেত্রে দুটি সাইডবার পাবেন যাতে পছন্দমতো উইজেট সাজাতে পারবেন; কিন্তু যদি আপনি বড় আকারের পোস্ট লেখেন, তাহলে ২-কলাম বিশিষ্ট টেমপ্লেট আপনার জন্য উপযোগী হবে। তাতে লেখার স্থান থাকবে চওড়া, পাশে একটিই সাইডবার যেখানে কেবল প্রয়োজনীয় উইজেট দেবেন। চওড়া একটি পোস্ট কলামের আরেকটি আকর্ষনীয় দিক আপনি এতে একটু বড় আকারের ছবি যুক্ত করে পোস্ট লিখতে পারবেন। পোস্টে ভিডিও যুক্ত করলেও তা চওড়া পোস্ট কলামে ভালোই দেখাবে।

ব্লগ ফুটার সাজান সুন্দর করে। বাংলা হ্যাকস্‌ ফুটার দেখুন, ৪'টি কলাম দিয়ে সুন্দর করে সাজানো আছে, দেখতেও সুন্দর লাগে এইগুলি। এখানে প্রয়োজনীয় এবং অপ্রয়োজনীয় যাবতীয় উইজেট আপনি দিতে পারেন, এতে পাঠকের কোনোই বিরক্তিবোধ হবেনা এবং যেহেতু ব্লগের একেবারে নিচে থাকে, তাই মূল পোস্টের সাথে কোনোভাবেই দৃশ্যতঃ ব্যাঘাত ঘটাবেনা। এখানেই দিন সাম্প্রতিক পোস্ট, সাম্প্রতিক মন্তব্য, ব্লগের সম্বন্ধে কিছু কথা ইত্যাদি উইজেট, এবং শেষেরটি দিন আপনার পছন্দের অন্যকিছু উইজেট। দিতে পারেন পাঠকদের রায় চেয়ে একটি উইজেট।

আপনাদের কথা মাথায় রেখেই তৈরী হয়েছে বাংলা হ্যাকস্‌ টেমপ্লেট ব্লগ, পছন্দ করে নিন আপনার মনের মতো টেমপ্লেট!

ব্লগার.কম এর ব্লগে Breadcrumb স্থাপনের পদ্ধতি

অনেক ওয়েবপেজের (Webpage) উপরে একটি অন্যরকম তথ্য (Information) থাকে। এই তথ্য থেকে জানা যায়, বর্তমানে যে পেজটি দেখছি, তা মূল 'হোম' পেজ থেকে কত দূরে রয়েছে। কোন ক্যাটাগরী (Category) বা লেবেলের (Label) অন্তর্ভূক্ত থেকে প্রদর্শিত হচ্ছে।

অর্থাৎ তথ্যটি দেখে পাঠক নিজেই বুঝতে পারবেন যে তিনি এই মুহূর্তে ওয়েবসাইটের ঠিক কোথায় রয়েছেন। এটা অনেকটা এরকম মূলপাতা >> লেবেল >> পোস্ট নাম

ওয়ার্ডপ্রেসের (Wordpress) ব্লগে এই সুবিধাটি ডিফল্টভাবে (Default) পাওয়া যায়। কিন্তু ব্লগার.কম (Blogger.com) এর ব্লগে এটা সহজলভ্য নয়। আসলে কোন ব্লগের জন্যই এই জিনিষটা ঠিক উপযোগী নয়। কারণ ব্লগে একটি পোস্ট একাধিক লেবেলের (Label) অন্তর্ভুক্ত থাকে। সেক্ষেত্রে কোন লেবেলের অন্তর্ভুক্ত হয়ে পোস্ট পেজটি প্রদর্শিত হবে, তা অনেক সময় জটিল হয়ে পড়ে। যা হোক, ব্লগের টেমপ্লেটের (Blog Template) কিছু কোড (Code) পরিবর্তন করে আমরা ব্লগার.কম (Blogger.com) এ খোলা ব্লগেও (Blog) এই Breadcrumb স্থাপন (Add) করতে পারি।

কিভাবে ব্লগার.কম এর ব্লগে Breadcrumb স্থাপন করা যাবে তার বর্ণনাঃ
  • ব্লগার.কম (Blogger.com) এ আপনার গুগল আইডি ও পাসওয়ার্ড (Google ID and Password) দিয়ে লগইন (Login) করুন।
  • Layout >> Edit HTML পাতায় চলে যান।
  • Expand Widget Templates লেখার পাশে টিক চিহ্ন দিয়ে দিন।
  • এখানে ]]></b:skin> লেখাটি খুঁজে বের করুন। এই লেখাটির ঠিক উপরে/ পূর্বে নিচের কোডটি স্থাপন করুন।
  • .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }

  • এবার <b:include data='top' name='status-message'/> লেখাটি খুঁজে বের করুন। এই লাইনটির ঠিক নিচে আরেকটি লাইন যুক্ত (Add) করুন। লাইনটি নিচে দেয়া হল:
  • <b:include data='posts' name='breadcrumb'/>
  • এখনও কাজ শেষ হয় নাই। আর একটি বড় কোড স্থাপন করতে হবে। ভয় পাওয়ার কিছু নেই। কপি (Copy) করে নির্দিষ্ট জায়গায় পেস্ট (Paste) করলেই হবে।
  • <b:includable id='main' var='top'> লেখা লাইনটি খুঁজে বের করুন। নিচে দেয়া কোডটি দিয়ে এই লাইনটি প্রতিস্থাপন (Replace) করুন।
  • <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- No breadcrumb on home page -->
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    »Unlabelled
    </b:if>
    » <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
  • কোডটি দেখতে বড় হলেও তা স্থাপন করা তত কঠিন নয়।
  • এবার সেভ (Save) করুন।
  • অন্য ট্যাবে থাকা ব্লগটির (ফায়ারফক্সে, ডাউনলোড করুন) কোন একটি পোস্টের টাইটেলে (Post Title) ক্লিক করুন বা পোস্টটি খুলুন (Open Post)। দেখুনতো পোস্ট টাইটেলের ঠিক উপরে Breadcrumb দেখা যাচ্ছে কি না।
  • নমুনা দেখতে আমার BH Template ব্লগের যে কোন একটি পোস্ট সম্পূর্ণ খুলে দেখুন।

এবার প্রকাশিত হলো 'আকাশ - ০২' টেমপ্লেট

আকাশ-০১ টেমপ্লেটটি (Akash 01 Template) প্রকাশিত হবার পর অনেকের কাছ থেকে দারুণ সাড়া পেয়েছি। তারা বিভিন্নভাবে আমাকে আরও টেমপ্লেট ডিজাইন (Template Design) করতে উৎসাহিত করেছেন। তাদের সবাইকে অন্তরের অন্তঃস্থল থেকে ধন্যবাদ জানাচ্ছি। আজ আমি আপনাদের সামনে উপস্থিত হয়েছি 'আকাশ-০২' টেমপ্লেট (Akash 02 Template) নিয়ে। এই নামটি বেছে নেবার কারণ হলো পূর্বের আকাশ টেমপ্লেটটির সাথে নতুন টেমপ্লেটটির বেশ কয়েকটি দিক দিয়ে মিল আছে। এর মধ্যে প্রধানত ব্লগ ব্যাকগ্রাউন্ড রঙ (Background Color) ও হেডারের ছবিটি (Header Image) প্রধান। তবে যারা এই নতুন টেমপ্লেটটি ব্যবহার করবেন, তারা একেবারে নতুন টেমপ্লেট ব্যবহারের তৃপ্তি পাবেন একথা নিশ্চিত করে বলতে পারি।

প্রথমে একটি কৃতজ্ঞতা প্রকাশ করিঃ
হেডারের (Header) সারি সারি মেঘের অসাধারণ ছবিটি আমাকে উপহার দিয়েছেন প্রতিশ্রুতিশীল সাহিত্যিক খালিদ উমর। তিনি তাঁর ব্যক্তিগত সংগ্রহ (Personal Collection) থেকে আমাকে এই ছবিটি (Picture) ব্যবহার করার জন্য প্রদান করেছেন। কোনরকম লাইসেন্সের (Licence) বিধিনেষেধ আরোপ করেননি। মহানুভব মি. খালিদ উমর তাঁর প্রাত্যাহিক ব্যস্ত জীবনের ফাঁকে ফাঁকে নিয়মিতভাবে উপন্যাস ও কবিতা লিখে চলেছেন নিজ ব্লগে। তাঁর ব্লগ ঠিকানা: নীল নক্ষত্র

মি. খালিদ উমর প্রদত্ত হেডারের মূল ছবিটি আমি আপলোড (Upload) করে দিলাম। এই লিংক থেকে ডাউনলোড করতে পারবেন (ছবির আকার ২০৩৮×১৫৩৬ পিক্সেল, ফাইল সাইজ: 446.6 KB)। সাইজ মতো করে কেটে নেয়া হেডারের ছবিটি স্থাপন করা হয়েছে এই পদ্ধতিতে (ফলে টেমপ্লেটটি আপনার ব্লগে ইনস্টল করলে হেডারে কোন ছবি দেখাবে না)। নিজের ব্লগের বিষয় অনুযায়ী ছবি ব্যবহার করুন কিংবা নির্দিষ্ট আকারের ছবিটি এই লিংক থেকে ডাউনলোড করে ব্যবহার করতে পারেন (ছবির আকার ৮৮৩×২০০ পিক্সেল, ফাইল সাইজ: 9.8 KB) । নিজের তৈরি করা ছবির প্রস্থ ৮৮৫ পিক্সেল (Width: 885px) এর মধ্যে হতে হবে। ছবির উচ্চতা ২০০ পিক্সেলের (200 Pixel) বেশি ব্যবহার করতে পারবেন। তবে তা দৃষ্টিকটু দেখায়।

আকাশ- ০২ টেমপ্লেটের ডিজাইন করতে গিয়ে আকাশ -০১ টেমপ্লেটটির মতো কোন ছবি ফাইল (Image File) ন্যাভিগেশন মেনুবার (Navigation Menubar), পোস্ট টাইটেল (Post Title) কিংবা সাইডবার টাইটেলের (Sidebar Title) ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করিনি। ফলে ব্লগ লোড হওয়ার সময় (Blog Load TIme) আরও কমে যাবে। আরো দ্রুত ব্লগ লোড হবে (Load Faster)।


এই ছবিটি টেমপ্লেটের উপরের অংশের


এই ছবিটি টেমপ্লেটের নিচের অংশের

এই ছবিটি টেমপ্লেটটির পেজ এলিমেন্ট (Page Element) অংশের। এখানে বিভিন্ন জায়গায় লেখা Add A Gadget লেখাতে ক্লিক করে গুগল এডসেন্স (Google Adsense) বা যে কোন কোড বসাতে পারবেন।

আকাশ ০২ টেমপ্লেটের কিছু বিশেষ বৈশিষ্ট্যঃ
  • 'আদর্শলিপি' (Adorsholipi) ফন্ট ডিফল্ট (Default Font) হিসেবে সেট করা আছে। আপনার কম্পিউটারে 'আদর্শলিপি' ফন্ট ইনস্টল না থাকলেও অসুবিধা নেই। অন্য বাংলা ফন্টেও ব্লগ লেখা যাবে। একটি ছোট ফন্ট সংগ্রহ ডাউনলোড (Download) করুন।
  • ন্যাভিগেশন মেনুবার (Navigation Menubar) এর ব্যাকগ্রাউন্ডে (Background) কোন ছবি নেই। তার বদলে রঙ ব্যবহার করা হয়েছে। ন্যভিগেশন মেনুতে থাকা লিংকগুলো (Links) পরিবর্তনের নিয়ম আলোচনা করেছি। স্ক্রল (Scroll) করে নিচে নামুন।
  • পোস্ট টাইটেলের ব্যাকগ্রাউন্ডে (Post Title Background) কোন ছবি নেই। তার বদলে রঙ ব্যবহার করা হয়েছে।
  • সাইডবার টাইটেলের (Sidebar Title) কোন ব্যাকগ্রাউন্ড ছবি নেই। তার বদলে রঙ ব্যবহার করা হয়েছে।
  • পোস্টের উপরে লেখা তারিখে ব্যাকগ্রাউন্ড রঙ (Date Background Color) দেয়া হয়েছে।
  • ব্লগের নিচে থাকা Subscribe to: Posts (Atom) লেখার পাশে একটি ফিড আইকন (Feed Icon) যোগ করা হয়েছে।
  • লেখকের মন্তব্যটির (Blog Author Comment) ব্যাকগ্রাউন্ড ভিন্ন রঙের হবে। এই ব্যাকগ্রাউন্ড রঙটি (Background Color) ব্লগারের (Blogger.com) ডিফল্ট পদ্ধতিতে পাল্টানো সম্ভব।
  • কখনও কখনও ন্যাভবার লোড হতে সমস্যা করে বলে ব্লগের উপরের ন্যাভবারটিকে লুকিয়ে রেখেছি। ঢেকে রাখিনি। তাই ন্যাভবার এর সুবিধাগুলো সব ব্যবহার করতে কোন অসুবিধা হবে না।

টেমপ্লেটটির কিছু সাধারণ বৈশিষ্ট্যঃ
  • মূল ব্যাকগ্রাউন্ডের রঙ (Main Background Color) ডিফল্টভাবে নীল।
  • পোস্ট করার জায়গার ব্যাকগ্রাউন্ড (Post Background) সাদা।
  • বিস্তারিত পড়ুন (Read more) সুবিধা ডিফল্টভাবে সংযুক্ত।
  • ড্রপডাউন মেনু (Dropdown menu) স্বয়ংক্রিয়ভাবে (Automatically) যে কলামে রাখবেন, সেই কলামের আকার ধারণ করবে।
  • লেবেল সার্চ (Label Search) করলে সম্পূর্ণ পোস্ট (Full Post) না দেখিয়ে শুধুমাত্র পোস্ট টাইটেল (Post Title) দেখাবে।
  • হেডারের (Header) ঠিক নিচে একটি নেভিগেশন মেনুবার (Navigation Menubar) যুক্ত। এটাতে নিজের প্রয়োজনমাফিক লিংক যুক্ত করা মোটেও কঠিন নয়।
  • একটি মূল কলাম ডানপাশে (Right Sidebar)।
  • তিনটি কলাম টেমপ্লেটের একেবারে নিচে অবস্থিত (3 Column on Bottom)।
  • সবশেষে একটি বড় কলাম।
  • ব্লগের শরীরের বিভিন্ন জায়গায় যেমন হেডারের উপরে নিচে, পোস্টের উপরে নিচে, সাইডবারে, নিচের কলামে খুব সহজে বিভিন্ন আকারের গুগলের এডসেন্স কোড (Adsense Code) বসাতে পারবেন। অর্থাৎ এই টেমপ্লেটটি 'এডসেন্স রেডি' (Adsense Ready)।
  • কোন লেখাকে উদ্ধৃতি (Quote) হিসেবে ব্যবহার করলে, সেই লেখাটুকুর উপরে ও নীচে একটি দাগ বসে যাবে। ব্যকগ্রাউন্ড পাল্টাতে পারবেন ব্লগার.কমের নিজস্ব রঙ পরিবর্তন করার পদ্ধতি থেকে।
ব্লগার.কমের নিজস্ব রঙ পরিবর্তন করার জায়গা থেকে যে সব উপাদানের রঙ পাল্টাতে পারবেন:
  • ব্লগের ব্যাকগ্রাউন্ড রঙ (Page BAckground Color)
  • প্রধান টেক্সটের রঙ (Text Color)
  • লিংক রঙ (Link Color)
  • ব্লগের টাইটেল রঙ (Blog Title Color)
  • ব্লগের বর্ণনার রঙ (Blog Description Color)
  • পোস্ট টাইটেল রঙ (Post Title Color)
  • পোস্ট টাইটেলের উপরে মাউস নিয়ে গেলে তা পরিবর্তন করলে কি রঙ হবে তা পরিবর্তন করতে পারবেন। (Post Title Hover Color)
  • পোস্টের উদ্ধৃতির ব্যাকগ্রাউন্ড (Post Quote Color)
  • ব্লগ লেখকের মন্তব্য'র ব্যাকগ্রাউন্ড (Author Comment Background Color)
  • বর্ডার রঙ (Border Color)
  • সাইডবারের টাইটেল রঙ (Sidebar Title Color)
  • পোস্টের উপরে লেখা তারিখের রঙ (Post Date Color)
  • নিচের কলামের টাইটেলের রঙ (Footer and Bottom Header Color)
  • সাইডবারের টেক্সট রঙ (Sidebar Text Color)
  • যে সব লিংক ভ্রমণ করা হয়েছে তাদের রঙ (Visited Link Color)
  • টেমপ্লেটটির প্রস্থ: ৮৮৫ পিস্কেল (885 px)
  • মেইন পোস্ট অংশের প্রস্থ: ৫৭০ পিস্কেল (570 px)
  • বামপাশের প্রধান সাইডবারটির প্রস্থ: ৩০৫ পিস্কেল (305 px)
একেবারে নীচের কলাম তিনটির আকার হলো:
  • বামপাশেরটির আকার: ৩৫০ পিক্সেল
  • মাঝেরটির আকার: ২৯০ পিক্সেল
  • একেবারে ডানেরটির আকার: ২২০ পিক্সেল
* নেভিগেশন মেনুবারে (Navigation Menubar) থাকা লিংকগুলো পরিবর্তন করে নিজের পছন্দ ও প্রয়োজনমতো লিংক স্থাপন করার জন্য নিচের ছবিটি ভালোভাবে লক্ষ্য করুন।
Edit HTML পাতায় <div id="navigation"> কোডটি খুঁজে বের করুন। Cntrl+F চেপে সেখানে কোডটি লিখে দিলে সহজে খুঁজে পাবেন। <div id="navigation"> এর নিচের থাকা লিংকগুলো পরিবর্তন করে দিন। উপরের ছবিটি লক্ষ্য করুন। কোন কোন লিংক পরিবর্তন করতে হবে তা লাল দাগ দিয়ে চিহ্নিত করা হয়েছে। লিংক লেখার নিয়ম জেনে নিন এই পোস্ট থেকে।

ডাউনলোড করুন:
* টেমপ্লেট পরিবর্তন করার নিয়ম / পদ্ধতি জানুন এই পোস্টটি থেকে।
এই টেমপ্লেটটি ব্যবহার করতে গিয়ে কোন সমস্যায় পড়লে কিংবা কোন ত্রুটি চোখে পড়লে তা জানানোর জন্য অনুরোধ রইল

ব্লগারের ব্লগে টেমপ্লেট পরিবর্তনের পদ্ধতি নং - ২

আমরা এর আগের একটি পোস্টে জেনেছিলাম, কিভাবে ব্লগার.কম (Blogger.com) এ খোলা ব্লগের টেমপ্লেট (Blog Template) পরিবর্তন করা যায়। সেই পোস্টে ব্লগার.কম এ ডিফল্টভাবে (Default) দেয়া যে টেমপ্লেটগুলো থাকে সেগুলো থেকে বাছাই করে একটি টেমপ্লেট নির্বাচন করে কিভাবে তা নিজের ব্লগে প্রয়োগ করা যায়, তার পদ্ধতি জেনেছিলাম। আজ আমরা জানবো বিভিন্ন ডিজাইনারের কাছ থেকে সংগ্রহ করা ব্লগ টেমপ্লেট দিয়ে কিভাবে নিজের ব্লগটিকে সাজানো যেতে পারে।

বহু পূর্বের একটি পোস্টে এই বিষয়ে সংক্ষেপে একটু আলোচনা করেছিলাম। কিন্তু কোন কোন পাঠক আরও বিস্তারিতভাবে (Details) বিষয়টি জানতে চেয়েছেন।
  • প্রথমে ব্লগার.কম এ আপনার গুগল আইডি ও পাসওয়ার্ড (Google ID and Password)  দিয়ে লগইন (Login) করুন।
  • ড্যাশবোর্ডে (Dashboard) আপনার ব্লগের নামের ঠিক নিচে Layout লেখাটিতে ক্লিক করুন।
  • লেআউট অপশনের Edit HTML লেখাতে ক্লিক করুন। পাশের ছবির মতো একটি পেজ আসবে।
  • এখানেই আপনি ব্লগের টেমপ্লেটটিকে মনের মতো করে পরিবর্তন করতে পারবেন।
  • আমার ডিজাইন করা কিংবা অন্য কারো ডিজাইন করা আপনার পছন্দের টেমপ্লেটটিকে ডাউনলোড (Download) করে কম্পিউটারের হার্ডডিস্কে (Harddisk) সেভ (Save) করে রাখুন। খেয়াল রাখবেন যে টেমপ্লেট ডিজাইনের ফাইলের শেষে 'xml' লেখা থাকবে। নামটি হবে Filename.xml - এরকম।
  • এবার লাল রঙের দাগ দেয়া জায়গাতে লেখা Browse বোতামে ক্লিক করে xml ফাইলটিকে সিলেক্ট করুন।
  • নীল রঙের দাগ দেয়া জায়গাতে লেখা Upload বোতামে ক্লিক করে টেমপ্লেটটিকে ইনস্টল করুন।
  •  
  • উপরের ছবির মতো SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তিত টেমপ্লেটটিকে সংরক্ষণ করুন।
  • আপনার ব্লগের ডিজাইন বা চেহারা পরিবর্তিত হয়ে যাবে।
  • একটি সাধারণ সমস্যা দেখা দিতে পারে। তার জন্য এই পোস্টটি পড়ুন।
  • শেষ পর্যন্ত যদি কোন সমস্যায় পড়েই যান, তাহলে আমি তো আছিই। কোনরকম ইচ্ছা প্রকাশের পূর্বে সামান্যতম দ্বিধা করবেন না বলে আশা করি।

ব্লগারের ব্লগে টেমপ্লেট পরিবর্তনের পদ্ধতি নং - ১

সম্প্রতি আমার জনৈক পাঠক জানতে চেয়েছেন, কিভাবে ব্লগার.কম (Blogger.com) এ তৈরি করা ব্লগের টেমপ্লেট পরিবর্তন করা যায়। নতুন ব্লগারদের জন্য টেমপ্লেট (Template) পরিবর্তন করা একটি সমস্যাই বটে। চট করে কোথা থেকে যে ব্লগারের টেমপ্লেট পরিবর্তন করা যেতে পারে, তা খুঁজে পাওয়া কখনও কখনও একটু মুশকিল হয়ে পড়তে পারে। আসলে ব্লগার.কম এ টেমপ্লেট পরিবর্তন করা মোটেও কঠিন কাজ নয়। টেমপ্লেট পরিবর্তন করার দুইটি পদ্ধতি আছে। আজ আমরা আলোচনা করবো প্রথম পদ্ধতিটি নিয়ে।

টেমপ্লেট পরিবর্তন করার প্রথম পদ্ধতি:
  • ব্লগার.কম এ আপনার গুগুল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
  • ড্যাশবোর্ডে থাকা আপনার ব্লগটির Layout বোতামে মাউসের বাম বোতাম দিয়ে একবার ক্লিক করুন।
  • Layout পাতার ডানপাশে লেখা Pick New Template লেখাটিতে মাউসের বাম বোতাম দিয়ে একবার ক্লিক করুন।
  • ডিফল্টভাবে থাকা টেমপ্লেটের একটি তালিকা প্রদর্শিত হবে।
  • নিচের ছবি দেখুন।
  • এখানে মোট ৩৮টির মতো বিভিন্ন ডিজাইনের টেমপ্লেট (Template) ডিফল্টভাবে দেয়া হয়েছে।
  • এর মধ্যে যে কোন একটি ডিজাইনের বামপাশের রেডিও বাটনে (গোল অংশ) (Radio Button) ক্লিক করে চিহ্ন দিন।
  • উপরের ডানপাশে লেখা Save Template লেখাটিতে ক্লিক করে সেভ করে নিন।
  • আপনার পছন্দের ডিজাইন অনুযায়ী ব্লগের চেহারা পরিবর্তিত হয়ে গেছে।

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

আজ আমি আপনাদের সামনে একটি নতুন ডিজাইনের (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) ছবিটি পরিবর্তন করতে চাইলে নিচের ছবিতে লাল দাগ দিয়ে চিহ্নিত ছবির লিংকটি পরিবর্তন করে আপনার পছন্দের কোন ছবির ডাইরেক্ট লিংক স্থাপন করুন।


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

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

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

এক আকষর্ণীয় টেমপ্লেট

আজ আমি আপনাদের সামনে উপস্থিত হয়েছি একটি আকর্ষণীয় টেমপ্লট নিয়ে। আপনারা নিশ্চয় জানেন আমার একটি ব্লগ আছে যার নাম Attractive Templats। এই ব্লগে আমি প্রখ্যাত ব্লগার (Famous blogger) ও ওয়েব ডেভেলপারদের (Web Developer) তৈরি বিভিন্ন ডিজাইনের টেমপ্লেটগুলি (Template) সকলের সাথে শেয়ার (Share) করি। এই ব্লগটির টেমপ্লেটটি চেয়ে আমার কোন কোন পাঠক ইমেইল (Email) করেছেন। তাদের অনুরোধের প্রেক্ষিতে আজ এই টেমপ্লটটি আজ সবার জন্য উন্মুক্ত করে দিলাম। গাঢ় কালো রঙের ব্যাকগ্রাউন্ডযুক্ত (Black Background) এই টেমপ্লটটি কারো কারো কাছে যে এতটাই আকর্ষণীয় লাগে তা আমি ভাবতেও পারিনি। এই টেমপ্লটটির বাম পাশের সাইডবারটি (Left Sidebar) ডানপাশের সাইডবার থেকে অপেক্ষাকৃত সরু। আর ডানপাশের সাইডবারটি বামপাশের সাইডবার থেকে অপেক্ষাকৃত মোটা। ফলে বামপাশে বিভিন্নরকম বাটন (Button) রেখে দিতে পারেন আর ডানপাশের সাইডবারে (Right Sidebar) বিভিন্ন ওয়েবসাইট বা ব্লগের ফিড কনটেন্ট (Feed Content) স্থাপন করতে পারেন। ফলে সেইসব বিভিন্ন ব্লগে সরাসরি ভ্রমণ না করেও নিজের ব্লগ থেকেই সেইসব ব্লগের নতুন লেখাগুলোর হেডলাইন (Headline) পড়ে নিতে পারবেন। এই পোস্টটিতে কিভাবে কোন সাইট বা ব্লগের ফিড স্থাপন করতে হয় তার একটি নমুনা দেয়া আছে। একই পদ্ধতিতে ব্লগে একটি গেজেট (Gadget) নিয়ে তার মধ্যে প্রিয় সাইট বা ব্লগের ফিড (Blog Feed) স্থাপন করতে পারবেন।

বিশেষ বৈশিষ্ট্য:

  • তিন কলাম।
  • দুই সাইডবার মূল পোস্টের দুইপাশে (Both side of main post) অবস্থিত।
  • টেমপ্লটটির ব্যাকগ্রাউন্ড ও ডানপাশের সাইডবার কাল রঙের।
  • টেমপ্লটটির আকার: 840px
  • পোস্ট লেখার জায়গাটির আকার: 384 px
  • বামপাশের সাইডবারের আকার: 125px
  • ডানপাশের সাইডবারের আকার: 310px
  • এডসেন্স রেডি (Adsense Ready)
  • হেডারের ঠিক নিচেই একটি বড় ব্যানারের আকারের এডসেন্স স্থাপন করতে পারবেন।
  • আরও পড়ুন বা Read More সুবিধাটি বিল্টইনভাবে দেয়া আছে।
নির্দেশনা: আপনার ব্লগে স্থাপন করার পর ব্লগের ড্যাশবোর্ডের ফরমেটিং অংশের পোস্ট টেমপ্লেট (Post Template) এ একটি নির্দিস্ট কোড বসাতে হবে। আমার আগের একটি পোস্টে (লেখার নিচের দিকে) বিষয়টি বিস্তারিত আলোচনা করা আছে।

একটিভ ব্লগ: Attractive Templates
ডাউনলোড: Download now. Size 9KB

একই পোস্ট করা হয়েছে এখানেও

এক নতুন টেমপ্লেট - 'অনুভব'

বহুদিন পর একটি অন্যরকম স্টাইলের (Style) টেমপ্লেট (Template) ডিজাইন করলাম। বরাবরের মতোই একটি নতুনত্ব আনার চেষ্টা করেছি এই টেমপ্লেটটিতে। পাশাপাশি বাংলাদেশের ব্লগারদের প্রতি আমার যে অঙ্গীকার তার বাস্তবায়ন রয়েছে এই ডিজাইনের মধ্যে। অর্থাৎ এবারও আমি টেমপ্লেট ডিজাইন করতে গিয়ে কোনরকম ইমেজ ফাইল ব্যবহার করিনি। শুধুমাত্র কাঠামোগত পরিবর্তনটাকেই প্রাধান্য দিয়েছি। এতে ব্লগারগণ একটি নতুন ডিজাইন পেলেন এবং তা বাংলাদেশের ধীরগতির ইন্টারনেটের জন্য একেবারে দারুন উপযোগী। অর্থাৎ কোনরকম বাহুল্য না থাকার কারণে এই টেমপ্লেটটি ব্যবহার করলে আপনার ব্লগ অধিকতর দ্রুত লোড হবে। বিটিআরসির লাইন ব্যবহার করলেও তেমন সমস্যা হবে না।

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

এই টেমপ্লেটের কিছু সাধারণ বৈশিষ্ট্য:
  • সম্পূর্ণ টেমপ্লেটটির প্রশস্ত: 988px
  • সাইডবার রয়েছে: ২টি
  • মাঝে রয়েছে পোস্ট অংশ আর তার দুপাশে রয়েছে সাইডবার দুটি
  • বামপাশের সাইডবারের সাইজ: 290 px
  • ডানপাশের সাইডবারের সাইজ: 200 px
  • ডেমোব্লগে সাইডবারগুলোতে বিভিন্ন ব্লগের ফিড লাগানো রয়েছে। এর মাধ্যমে পোস্টগুলো যদি সাইডবারে সাজিয়ে রাখি, তাহলে কেমন দেখা যাবে, তা বোঝা যাচ্ছে সহজে।
  • গুগলের এডসেন্স রেডি
  • ফায়ারফক্স ৩, ইন্টারনেট এক্সপ্লোরার ৭ এবং ওপেরা ৯ তে টেস্ট করা হয়েছে। কোনরকম সমস্যা পাওয়া যায়নি।
==========

নতুন ব্লগ - বাংলা হ্যাকস ব্লগের তৈরা করা টেমপ্লেট

একটি নতুন ব্লগ (New Blog) লেখা শুরু করলাম। এই নতুন ব্লগটি আসলে নতুন কোন বিষয়ে নয়। বাংলা হ্যাকস ব্লগের পক্ষ থেকে যেসব টেমপ্লেট (Template) ডিজাইন (Design) বা মডিফাই (Modify) করা হবে, তার সবগুলোকে একটিমাত্র জায়গায় সহজে খুঁজে (Search) পাবার জন্য এই ব্লগটির প্রয়োজন বোধ করলাম। আশা করি আপনারাও আমার সাথে একমত হবেন।

আপনারা যাঁরা ব্লগারের (blogger.com) টেমপ্লেট ডিজাইন (Design) বা মডিফাই (Modify) করতে আগ্রহী বা করেছেন, তাদের করা টেমপ্লেটগুলোকেও (Templates) আমরা প্রদর্শন (Publish/ show) করতে ইচ্ছুক। এখানে ক্লিক করে আপনার টেমপ্লেটটি সম্পর্কে আমাদেরকে জানান (Inform us)। বিস্তারিত (Details) বর্ণনা প্রদান করুন। আমরা আপনার টেমপ্লেটটি যত দ্রুত সম্ভব BH Templates ব্লগে প্রদর্শন করবো।

বাংলা হ্যাকস এর ডিজাইন করা টেমপ্লেটগুলি যদি আপনার ভালো লাগে, তাহলে এই পরিশ্রম সার্থক বলে মনে হবে। আশা করি আপনার গঠনমূলক মন্তব্য প্রকাশ করতে ভুল করবেন না।

নতুন ব্লগের ঠিকানা: BH Templates

এক স্বপ্নিল টেমপ্লেট - স্বপ্ন

উল্লাস, অপূর্ব, দুর্লভ এবং হিল্লোল টেমপ্লেটের পর আমি আজকে হাজির হয়েছি এক স্বপ্নিল টেমপ্লেট স্বপ্ন'কে নিয়ে। স্বপ্নের (Dream) মতো রহস্যময় (Mystery) রঙে রাঙানো এই টেমপ্লেটটি বাংলা হ্যাকস এর ডিজাইন (Design) করা অন্য টেমপ্লেটগুলি (Templates) থেকে একেবারে আলাদা (Different) রকমের। অন্য টেমপ্লেটগুলো সাজানোর জন্য কোনরকেমের ছবি বা ইমেজ ফাইল (Image File) ব্যবহার করা হয় নাই। আপনারা নিশ্চয়ই খেয়াল করেছেন, অনলাইনে (Online) থাকা বিভিন্নরকম টেমপ্লেটের প্রধান সৌন্দর্যই হলো ফটোশপে (Photoshop) তৈরি করা বিভিন্ন রকমের ছবি। বেশিরভাগ সময় ছবির কারুকাজ ও সৌন্দর্যের উপাদানের মাধ্যমে তারা টেমপ্লেটের নামকরণ করে থাকে। এই টেমপ্লেটগুলো দেখতে যতই সুন্দর বা আকর্ষণীয় হোক না কেন, বাংলাদেশের কম স্পিডের (Slow Speed) ইন্টারনেট লাইনে (Internet line) সেগুলো ব্যবহার করা বিড়ম্বনামাত্র। এইসব টেমপ্লেট দিয়ে সাজানো ব্লগ লোড হতে যতটা সময় নেয়, তাতে যেকোন মানুষ বিরক্ত বোধ করতে বাধ্য হবেন। কিন্তু বাংলা ব্লগ টিপ্‌স এর ডিজাইন করা টেমপ্লেটগুলো এই সমস্যা থেকে অনেকটাই মুক্ত। একেবারে সাধারণভাবে কয়েকটি কোড প্রয়োগ করে এইসব টেমপ্লেট ডিজাইন করা হয়েছে। 'অপূর্ব' সিরিজের টেমপ্লেটগুলোকে সাজানোর জন্য ছবি ব্যবহার করা হলেও তার সাইজ এত ছোট যে তা লোড হতে খুব বেশি সময় অপচয়ের সম্ভাবনা অনেক কম।

আজকের স্বপ্ন নামক টেমপ্লেটটি সম্পর্কেও একই কথা খাটে। এই টেমপ্লেটটিকে হালকা রঙের প্রয়োগ দিয়ে স্বপ্নের মতো রহস্যময় করে তুলতে খুব বেশি ছবি বা ইমেজ ফাইল ব্যবহার করা হয়নি। যে কয়েকটি ইমেজ ফাইল এখানে রহস্যময়তা তৈরি করছে তার সাইজও রাখা হয়েছে অনেক ছোট। ফলে ব্লগ লোড হতে খুব বেশি দেরি হবার কথা নয়।

# টেমপ্লেটগুলোর জিপ ফাইল (Zia File) ডাউনলোড (Download) করার পদ্ধতি:-
লিংকের উপরে মাউসের ডানবোতাম চাপুন (ফায়ারফক্সে) , Save Link As সিলেক্ট করুন। হার্ডডিস্কের (Harddisk) কোথায় সেভ (Save) করবেন তা দেখিয়ে দিন।
# টেমপ্লেটগুলো জিপ ফাইল (Zip File) হিসেবে দেয়া আছে। ব্যবহার করার আগে আনজিপ (Unzip) করে নিন। জিপ ফাইলের ভিতরের xml ফাইলটিই টেমপ্লেট ফাইল।
# টেমপ্লেট কিভাবে পরিবর্তন (How to change template) করবেন তা এই লেখাটি থেকে জেনে নিন।
# টেমপ্লেট আপলোড (Upload) করার পর একটি সাধারণ সমস্যায় (Common Problem) পড়তে পারেন। তার সমাধান রয়েছে এখানে


স্বপ্ন - ০১:
কয়েকটি সাধারণ বৈশিষ্ট্য:
* দুইকলামযুক্ত (Two Column)।
* সাইডবার রয়েছে ডানপাশে (Right Sidebar)।
* টেমপ্লেটের বাহ্যিক আকার ৭২৫ পিক্সেল (Pixel)।
* পোস্ট লেখার অংশের আকার ৫২০ পিক্সেল (px)।
* সাইডবারের আকার ২০০ পিক্সেল।
* হেডারে (Header) কোন ছবি ব্যবহার করা হয়নাই। কিন্তু ডিফল্ট (Default) পদ্ধতিতে হেডারে ছবি স্থাপন করতে পারবেন।
* প্রতিটি পোস্টের নিচে একটি হালকা রঙের রেখা (Line) দিয়ে পোস্টগুলোকে আলাদা করা হয়েছে।
* উদ্ধৃতি বা উক্তিকে (Quote) চিহ্নিত করতে একটি হালকা রঙের ব্যাকগ্রাউন্ড (Background) তো দেয়া হয়েছেই তা ছাড়াও একটি ছোট্ট আকারের কমা চিহ্নের ছবি (Image) ব্যবহার করা হয়েছে।

ডেমোব্লগ দেখুন
ডাউনলোড করুন। ফাইলের আকার: ৭.৫ কিলোবাইট (KB)

এক অন্যরকমের অনন্য টেমপ্লেট- হিল্লোল

আজ আমি আপনাদের সামনে উপস্থাপন করবো হিল্লোল নামের এক অন্যরকমের অনন্য টেমপ্লেট (Unique Template)। এর আগে উল্লাস, অপূর্ব এবং দুর্লভ সিরিজের কয়েকটি টেমপ্লেট বাংলার ব্লগারদের জন্য ডিজাইন (Design) করা হয়েছিল। আজকের টেমপ্লেটটি এদের চাইতে একেবারে আলাদা। যারা বড় বড় আকারের লেখা ব্লগে লিখে থাকেন, তাদের জন্য এই টেমপ্লেটটি খুব উপযোগী। ডিজাইন করা হয়েছে ব্লগারের ডিফল্ট মিনিমা টেমপ্লেটকে ভিত্তি ধরে (Based on default Minima Template)। ডিজাইন করা হয়েছে বাংলাদেশের কম স্পিডের (Slow Speed) কথা ভেবে, ফলে খুব বেশি কাস্টমাইজ (Customize) এখানে স্থাপন করা হয়নাই। ব্যাকগ্রাউন্ড (Body background) বা হেডার (Header) ফাইল হিসেবে কোনরকম ছবি (Image) ব্যবহারা করা হয়নাই। আশা করা হচ্ছে যে অনলাইনে (Online) থাকা অন্যান্য টেমপ্লেটের চাইতে এই টেমপ্লেট (Template) একটু দ্রুত লোড (Load Faster) হবে। তবে ব্লগারের ডিফল্ট পদ্ধতিতে আপনি হেডারে যেকোন রকমের ছবি (Picture) বা ইমেজ (Image) স্থাপন করতে পারবেন।


# টেমপ্লেটগুলোর জিপ ফাইল (Zia File) ডাউনলোড (Download) করার পদ্ধতি:-
লিংকের উপরে মাউসের ডানবোতাম চাপুন (ফায়ারফক্সে) , Save Link As সিলেক্ট করুন। হার্ডডিস্কের (Harddisk) কোথায় সেভ (Save) করবেন তা দেখিয়ে দিন।
# টেমপ্লেটগুলো জিপ ফাইল (Zip File) হিসেবে দেয়া আছে। ব্যবহার করার আগে আনজিপ (Unzip) করে নিন। জিপ ফাইলের ভিতরের xml ফাইলটিই টেমপ্লেট ফাইল।
# টেমপ্লেট কিভাবে পরিবর্তন (How to change template) করবেন তা এই লেখাটি থেকে জেনে নিন।
# টেমপ্লেট আপলোড (Upload) করার পর একটি সাধারণ সমস্যায় (Common Problem) পড়তে পারেন। তার সমাধান রয়েছে এখানে

হিল্লোল - ০১:
কিছু সাধারণ বৈশিষ্ট্য:
* তিন কলাম (Three Column)।
* সাইডবার (Sidebar) দুটো রয়েছে ডানপাশে।
* একটি সরু মার্জিন দিয়ে পোস্ট অংশ ও সাইডবারের কলাম অংশকে আলাদা করা হয়েছে।
* মাঝের কলামটি (Middle Column) হালকা নীল রঙের ব্যাকগ্রাউন্ডযুক্ত।
* সাইডবারের টাইটেল (Sidebar Title) হালকা ধূসর রঙের ব্যাকগ্রাউন্ডযুক্ত।
* ব্লগের উক্তি বা উদ্ধৃতি (Quote) প্রদর্শন করবে হালকা রঙের ব্যাকগ্রাউন্ড নিয়ে।
* সম্পূর্ণ টেমপ্লেটটির প্রস্থ: ১০০০ পিক্সেল (Pixel)
* পোস্ট লেখার জায়গাটি ৬০০ পিক্সেলের।
* প্রথম সাইডবারটির আকার ২৩০ পিক্সেল
* দ্বিতীয় বা অপেক্ষাকৃত সরু কলামটি ১৬০ পিক্সেলের।

ডেমোব্লগ দেখুন
ডাউনলোড করুন। সাইজ: ৮ কিলোবাইট (KB)

এক দুর্লভ টেমপ্লেট - দুর্লভ

আমি আজ আপনাদেরকে এক দুর্লভ (Rare) টেমপ্লেটের খবর দিব। তার নাম দুর্লভ। দুর্লভ সিরিজের আর একটি টেমপ্লেটের (Template) সুচনা করলাম। এর আগে আপনাদেরকে তিন কলামের (3 Column) টেমপ্লেট উপহার দেয়া হয়েছে। আজ দিচ্ছি চার কলামের (4 Columns) টেমপ্লেট। অনেকে নিজের টেমপ্লেটে একটু বেশি উইজেট (Widget) ব্যবহার করেন। তাদের জন্য এই টেমপ্লেটটি কার্যকরী হবে বলে আশা করি।

দুর্লভ - ০১:
কিছু সাধারণ বৈশিষ্ট্য:
* চার কলাম (4 Columns)।
* মূল পোস্ট অংশের ডানপাশে দুইটি সাইডবার (Two Sidebar on right side) ও বামপাশে একটি সাইডবার (One on left side)।
* আর্কাইভ মেনুটি (Archive Menu) স্বয়ংক্রিয়ভাবে (Automatic) যে কলামে রাখবেন সেই কলামের আকার ধারণ করবে।

ডেমো ব্লগ দেখুন
ডাউনলোড করুন, ফাইল সাইজ ৭.৩ KB
 

পাঠকের প্রতিক্রিয়া

কিছু কথা

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

Search This Blog

© 2009-2014 Bangla Hacks | Design by: Bangla Hacks. Powered by: Blogger