Zemanta : ব্লগ লেখার নতুন যাদু। আপনার ব্লগ পোস্টগুলো সাজিয়ে তুলুন মনের মতো

Image via Wikipedia

From Bangla Hacks

         এই ২য়  ছবিটা দেখেছেন ? বুঝতেই পারছেন এটি পোস্ট লেখার, সম্পাদনা করবার পাতা। ডানদিকে লক্ষ্য করুন। Zemanta নামে একটা গেজেট রয়েছে। তাতে ছবি দেখাচ্ছে। নিচে দরকারি কিছু কাজের লিঙ্ক। নিচের দিকে দেখুন in text link দেখাচ্ছে। Labelsএর বাক্সখানা খোলা। যেন কিছু নিজে থেকেই বেরিয়ে এসে বসে যাবার জন্যে মুখিয়ে আছে।
          এবারে নিচে ৩য়  ছবিটি দেখুন। আমাদের পুরোনো Labelএর নিচে আরো কিছু আপনাতেই দেখিয়ে যেন জিজ্ঞেস করতে চাইছে আমরা কি সেগুলোর থেকেও কিছু বাছাই করতে চাইছি? করতেই পারি । ডানদিকে একটা ছবির উপর মাউস রাখতেই সেটি বড় হয়ে যাচ্ছে। যাতে ভালো করে দেখতে পারি। এবং বাছাই করতে পারি। একই ঘটনা ঘটবে নিচের Related Articleএর উপর মাউস রাখলে। সেগুলো বড় হয়ে গিয়ে পড়তে সুবিধে করে দেবে। সেখান থেকে বাছাই করলেই সেগুলোর লিঙ্ক এসে  পোস্টের নিচে  এ ভীড় করবে। আমারা স্ক্রল ডাউন করে Look what's new in Gmail পছন্দ করে ক্লিক করতেই দেখুন নিচে কী হয়েছে। আমরা ডানদিকের ছবিগুলো থেকে একটিতে বাছাই করে ক্লিক করতেই একেবারে উপরের Wikipedia থেকে ২১এর শহিদ বেদির  ছবি এসে বসে গেছে।সম্ভবত পিকাসাকে এখনো সমর্থণ দিচ্ছে না , আমরা তাই আমাদের নিজেদের দরকারি ছবিগুলো আলাদা করেই তুলেছি। কিন্তু, আপনি My Sources এ ক্লিক করলে এমন আরো অজস্র বিকল্প পেয়ে যাবেন। মায়, ফেসবুক, টুইটারে সেয়ার করবার সহজ পথের দিশা অব্দি।একবার পোস্ট করবার পর দ্বিতীয়বার সম্পদনার পাতা খুলে দেখবেন পাশের ছবি বা নিবন্ধের লিঙ্কগুলো অনেক বেশি নির্দিষ্ট তথা আপনার পোষ্টের সঙ্গে সম্পর্কযুক্ত হয়ে গেছে। আপনি , আবারো সেখান থেকে বাছাই করে পোষ্ট সম্পাদনা করে ফেলতে পারেন।

From Bangla Hacks

                    আপনার ব্লগ লেখাকে এমন সহজ করতে চান কি? ব্যাপারটা একেবারেই সোজা। আপনার ব্রাউসারের Tool মেনুতে গিয়ে Add onsএ টিপুন। সেখানে Get Adds on মেনু খুলে Zemanta লিখে ক্লিক করুন । ইন্সটল করুন, যেভাবে অন্য Add ons ইন্সটল করে থাকেন। আপনার কাজ হয়ে গেল। ব্রাউসার বন্ধ করে আবারো খুলে আপনার পুরোনো কোনো পোস্ট সম্পাদনার পাতা খুলে দেখুন জেমান্টা এসে গেছে। আপনারা অবশ্যি, জেমান্টার লিঙ্কটা আমাদের এই পোস্টেই সরাসরি পেয়ে যাবেন। খোঁজে নিতে পারবেনতো? নীল শব্দগুলোতে মাউস বুলিয়ে দেখুন।
               ব্লগস্পট এরকম আর বেশকিছু মজার মজার ব্যাপার চালু করেছে। যেমন, এখন সেয়ার গেজেট আলাদা ইন্সটল করতে হয় না, আপনার ব্লগ পাঠকের পুরো হিসেব (Blog statistics) সহজেই দেখতে পারেন। আমরা চেষ্টা করব একে একে তার কিছু কিছু লিখতে।
              আমাদের সবার প্রিয় এরোর অনেক দিন সাড়া শব্দ পাচ্ছি না। আশা করছি সে ভালোই আছে। এবং চট জলদি কিছু একটা ভালো খবর পাবো । কিন্তু আমাদের প্রিয় বাংলা হ্যাক্স অনেকদিন নীরব ছিল বলে দেখে ভালো লাগছিল না। তাই আমি চট জলদি এই পোস্টটা লিখে ফেললাম। আশা করছি , আপনাদের এটি ভালো লাগবে। কোনো অসুবিধে হলে লিখে জানাবেন। তাতে পরে আর বিস্তৃত জানাবার চেষ্টা করব।

Related articles by Zemanta

• Look what's new in Gmail! (annetteholland.com)

সম্পূর্ণ  →  Zemanta : ব্লগ লেখার নতুন যাদু। আপনার ব্লগ পোস্টগুলো সাজিয়ে তুলুন মনের মতো

সহজ ট্যাবভিত্তিক গেজেট বক্স

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

• গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করে নিন।
• এবার ড্যাশবোর্ডের Layout ট্যাবে গিয়ে একটি নতুন HTML গেজেট নিন।
• নতুন নেয়া HTML/ JavaScript গেজেটটিতে নিচের কোডটুকু সম্পূর্ণ কপি করে নিয়ে পেস্ট করে দিন। গেজেটবক্সটির কোন নাম দেবেন না।

• <style type="text/css">
  div.tbgtes div.TTs
  {height: 24px; overflow: hidden; }
  div.tbgtes div.TTs a:hover, div.tbgtes div.TTs a.Active
  { background-color: #9B946A; }
  div.tbgtes div.Bhtbgdts
  { clear: both; border: 1px solid #000000; overflow: hidden; background-color: #ffffff;}
  div.tbgtes div.Bhtbgdts div.Bhtbgdt
  { height: 100%; padding: 0px; overflow: hidden; }
  div.tbgtes div.Bhtbgdts div.Bhtbgdt div.Alas
  { padding: 3px 5px; }
  div.tbgtes div.TTs a
  { border-left:1px solid #000000; border-right:1px solid #000000; border-top:1px solid #000000; border-bottom:0px solid#000000; float: left;
  display: block; width: 100px; text-align: center; vertical-align: middle; height: 25px; padding-top: 4px; text-decoration: none; font-family: "Arial", Serif;
  font-size: 12px; font-weight: 900; color: #000000}
  </style>
  <form action="tbgtes.html" method="get">
  <div id="tbgtes" class="tbgtes">
  <div style="width: 320px;" class="TTs"> <a>নতুন পোস্ট</a> <a>কৃতজ্ঞতা</a> <a>মন্তব্য</a></div>
  <div style="width: 320px; height: 200px;" class="Bhtbgdts">
  <div class="Bhtbgdt">
  <div class="Alas">
  <script style="text/javascript" src="http://sites.google.com/site/banglahacks/tools/recentposts.js"></script><script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = false;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
  </div>
  </div>
  <div class="Bhtbgdt">
  <div class="Alas">
  <div align="center"> <a href="http://www.banglahacks.com/"> <img alt="Bangla Hacks" border="0" src="http://sites.google.com/site/banglahacks/image/banglahacks.jpg" title="Bangla Hacks" /></a> </div>
  </div>
  </div>
  <div class="Bhtbgdt">
  <div class="Alas">
  <script style="text/javascript" src="http://sites.google.com/site/banglahacks/shrd/swrcntcmnts.js"></script><script style="text/javascript">var numcomments = 10;var showcommentdate = false;var showposttitle = true;var numchars = 50;</script><script src="/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
  </div>
  </div>
  </div>
  </div></form>
  <script style="text/javascript" src="http://sites.google.com/site/banglahacks/shrd/tabwidget-bh.js"></script>
  <script type="text/javascript">tbgtes_inisial('tbgtes');</script>

• এই কোডটুকু স্থাপন করা গেজেটটি সেভ করুন।
• ব্যাস তৈরি হয়ে গেল নতুন সহজ ট্যাবভিত্তিক গেজেটবক্স।
• আমি এখানে তিনটি ট্যাব তৈরি করেছি। এবং সেখানে নিজের মনমতো তিনরকম কোড বসিয়ে দিয়েছি (সবুজ রঙের কোডগুলো)। এই কোডগুলো আপনার পছন্দমতো পাল্টে নিন।

কনফিগারেশন

• লাল রঙের সংখ্যাগুলো পাল্টিয়ে ট্যাবের প্রস্থ এবং উচ্চতা পাল্টাতে পারবেন।
• 100px পাল্টালে ট্যাবের সাইজ বড়- ছোট হবে।
• 320px পাল্টালে গেজেটের প্রস্থ বড়-ছোট হবে।
• 200px পাল্টালে গেজেটের উচ্চতা কম-বেশি হবে।
• কমলা রঙের বাংলা শব্দগুলো পাল্টে ট্যাবের নাম পরিবর্তন করতে পারবেন।
  

উপরে দেয়া কোড যদি কাজ না করে, তাহলে এই লিংক থেকে কোডলেখা টেক্সট ফাইলটি ডাউনলোড করে নিন। এই টেক্সট ফাইলটি থেকে কোড কপি করে HTML/ JavaScript গেজেটে পেস্ট করুন।

• ডাউনলোড করুন কোডলেখা টেক্সট ফাইল
  

সম্পূর্ণ  →  সহজ ট্যাবভিত্তিক গেজেট বক্স

গুগলসাইটস- এ আপলোড করা ফাইলের ডাইরেক্ট লিংক পাবার উপায়

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

ডাইরেক্ট লিংক কাকে বলেঃ
ডাইরেক্ট লিঙ্ক হল কোন ফাইলের সরাসরি লিংক। এটা সাধারণত নির্দিষ্ট ফাইলকে সরাসরি পয়েন্ট করা হয়। তাই অনেকে এই লিংককে Hot Link বলে থাকেন।

অনলাইনে ফাইল শেয়ার করার যেসব সাইট আছে, তারা ডাইরেক্ট লিংক দিতে চায় না। কারণ যদি ফাইলের সাইজ বড় হয়, তাহলে তা লোড হওয়ার সময় সাইটের ব্যান্ডওয়াইথ অনেকটা ব্যবহার করে ফেলে। ফলে হোস্টিং খরচ অনেকটা বেড়ে যায়। বিশেষ করে কোন কোন ফোরামে দেখবেন কোন ছবি সরাসরি দেখানোর জন্য নিষেধ করে, কারণ, যদি ছবির সাইজটি বড় হয়, তাহলে পেজ লোড হবার সময় বেড়ে যায়।

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

ডাইরেক্ট লিংকের চেহারা:
সাধারণত এরকম হয়, ধরি যদি ছবির ফাইল হয়, তাহলে হবে এরকম
www.yoursite.com/imagefile.png
এখানে সরাসরি ছবিটিকে ব্যবহার করা হয়েছে। আগে পিছে কোন কোড দিয়ে ছবিটিকে ছোটবড় করা হয়নাই। ফলে যখন ছবিটি কোথাও ব্যবহার করবেন, তখন সরাসরি সম্পূর্ণ ছবিটিই লোড হবে। ফলে ব্লগ বা ফোরাম লোড হবার সময় বেড়ে যাবে। পাঠকও বিরক্ত হয়ে পোস্ট পড়া বাদ দিয়ে সাইট ত্যাগ করতে পারেন।

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

গুগলসাইটস এ আপলোড করা ফাইলের ডাইরেক্ট লিংক পাবার উপায়ঃ
উপরের ছবিতে দেখুন। এখানে গুগলসাইটস এ আপলোড করা দুইরকম ফাইলকে দেখা যাচ্ছে। এর মধ্যে প্রথমটি একটি ছবি ফাইল এবং দ্বিতীয়টি একটি জাভাস্ক্রিপ্ট ফাইল। দুটোতে দুইরকম লিংক আছে। একে একে দুইরকম ফাইল নিয়ে আলোচনা করি।

প্রথম ফাইলঃ এখানে দুইটি লিংক আছে। একটি View এবং অপরটি Download
View লিংকটি রয়েছে এরকম
http://sites.google.com/site/banglahacks/shrd/feed-icon.gif?attredirects=0
আর Download লিংকটি রয়েছে এরকম
http://sites.google.com/site/banglahacks/shrd/feed-icon.gif?attredirects=0&d=1
লিংকদুটো ভালো করে লক্ষ্য করুন। এখানে http://sites.google.com/site/banglahacks/shrd/feed-icon.gif অংশটুকু দুইরকম লিংকেই রয়েছে। তবে লিংকভেদে শেষে কখনও ?attredirects=0 লেখা রয়েছে আবার কখনও ?attredirects=0&d=1 লেখা রয়েছে। আমাদের যদি কখনও ডাইরেক্ট লিংক প্রয়োজন পড়ে তাহলে আমরা নির্দিষ্ট ফাইলটির লিংকের প্রথম অংশটুকু ব্যবহার করবো। অর্থাৎ আমরা প্রযোজ্য ক্ষেত্রে ব্যবহার করবো এই লিংকটি
http://sites.google.com/site/banglahacks/shrd/feed-icon.gif
এটাই ফাইলটির ডাইরেক্ট লিংক
এবং শেষে লেখা ?attredirects=0&d=1 এই জাতীয় অংশটুকু সম্পূর্ণ মুছে দেব।

দ্বিতীয় ফাইলঃ দ্বিতীয় ফাইলটি একটি জাভাস্ক্রিপ্ট ফাইল। ব্লগের বিভিন্ন গেজেট যেমন সাম্প্রতিক পোস্ট, বিস্তারিত পড়ুন, রিলেটেড পোস্ট ইত্যাদি গেজেট তৈরিতে জাভাস্ক্রিপ্ট ফাইল ব্যবহার করা হয়। সেসব ক্ষেত্রে জাভাস্ক্রিপ্টের ডাইরেক্ট লিংক ছাড়া কাজ করতে হয়। এইরকম জায়গায় যদি আপনার নিজস্ব গেজেটের জাভাস্ক্রিপ্টের ডাইরেক্ট লিংক প্রয়োজন হয় তাহলে কি করবেন?
দেখুন আপলোড করা ফাইলটির লিংক দেখা যাচ্ছে এরকম
http://sites.google.com/site/banglahacks/shrd/layout.js?attredirects=0&d=1
এই লিংকটিতেও দুটি অংশ আছে।
প্রথমে রয়েছে http://sites.google.com/site/banglahacks/shrd/layout.js
এবং শেষে রয়েছে ?attredirects=0&d=1
এই ফাইলটির ডাইরেক্ট বা হট লিংক হল প্রথমটুকু। প্রয়োজনমতো ব্যবহার করতে চাইলে শেষের ?attredirects=0&d=1 লেখাটুকু মুছে দিন। আর নির্দিষ্ট জায়গায় ডাইরেক্ট লিংকটি প্রয়োগ করুন।

আশা করি কিভাবে গুগলসাইটস থেকে আপলোড করা ফাইলের ডাইরেক্ট লিংক পেতে হয়, তা বোঝাতে পেরেছি।

সম্পূর্ণ  →  গুগলসাইটস- এ আপলোড করা ফাইলের ডাইরেক্ট লিংক পাবার উপায়

উবুন্টু ১০.০৪ - এ আইবাস দিয়ে বাংলা লিখুন

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

বাংলা লেখার জন্য SCIM এর চাইতে অধিক উন্নত প্রোগ্রাম হল iBus । এটা বেশ উন্নত একটি ইনপুট মেথড, আকারে ছোট, আর উবুন্টু ৯.১০ (কারমিক কোয়ালা) থেকে iBus ডিফল্টভাবে দেয়া হচ্ছে। এখানে ডিফল্টভাবে প্রচলিত বাংলা লেআউটগুলো আগে থেকেই রেখে দেয়া হয়েছে। ফলে iBus ব্যবহার করার জন্য কোন সফটওয়ার ডাউনলোড করতে হবে না। উবুন্টু ইনস্টল হবার সাথে সাথে iBus ইনস্টল হয়ে যায়। iBus এর পূর্ণ অর্থ হল IBus - Intelligent Input Bus for Linux / Unix OS, আর এর হোমপেজ http://code.google.com/p/ibus/
আসুন আজ আমরা জেনে নিই কিভাবে iBusকে বাংলা লেখার জন্য একটু কনফিগার করে নেয়া যায়।

ডেস্কটপের উপরের প্যানেলে থাকা System মেনুতে ক্লিক করলে যে ড্রপডাউন মেনু খুলে যাবে, সেখানে প্রথমে থাকা Preferences মেনুর সাবমেনুতে iBus preferences রয়েছে। এখানে ক্লিক করলে একটি মেসেজ দেখা যাবে।
সেখানে লেখা আছে:

IBus daemon is not started. Do you want to start it now?

আপনি কি IBus চালু করতে চান? যদি আপনার উত্তর হ্যাঁ-বোধক হয়, তাহলে Yes চাপুন। ibus চালু হয়ে যাবে। এবার দেখুন আর একটি মেসেজ আসবে।
এখানে বলা আছে যে ibus কে একটু কনফিগার করে নিতে হবে। তাহলে কাজ করতে সুবিধা হবে। এই মেসেজবক্সে OK লেখাতে ক্লিক করুন। এবার কনফিগারেশন প্যানেল খুলে যাবে।

আমাদেরকে এখানে কিছু সামান্য পরিবর্তন আনতে হবে।
প্রথমে আসি General ট্যাবে।
সাধারণত এখানে করার কিছু নেই। কিবোর্ডের কোন বাটন চেপে লেখার ভাষা পরিবর্তন করতে হবে, তা এখানে নির্দিষ্ট করা আছে। সাধারণত কন্ট্রোল এবং স্পেস (Ctrl+Space) বাটনদুটো একসাথে চাপ দিয়ে আইবাসের ইনপুট ভাষা পরিবর্তন করা হয়। আপনি চাইলে এই বাটন পরিবর্তন করতে পারেন এখান থেকে।

এবার আসুন Input Method ট্যাবে। আমাদেরকে এখানেই পছন্দের কীবোর্ড লেআউট নির্বাচন করতে হবে।
এখানে Select an input method লেখাতে ক্লিক করুন। একটি ড্রপ ডাউন মেনু নিচের ছবির মতো বিভিন্ন ভাষার একটি লম্বা তালিকা নিয়ে খুলে যাবে।
এখানে Bengali ভাষার অন্তর্ভুক্ত চারটি কিবোর্ড লেআউট আছে। probhat, itrans, inscript, unijoy এগুলোর মধ্যে আপনি যে লেআউট ব্যবহার করে লিখতে অভ্যস্ত তা সিলেক্ট করুন। input method ট্যাবের ডানপাশে থাকা Add বাটনে ক্লিক করে লেআউটটিকে যোগ করুন। তালিকায় অন্য কোন ভাষা থাকলে (সাধারণত ইংরেজি থাকে) তা সিলেক্ট করে Remove বাটনে ক্লিক করে মুছে দিন। ব্যাস আপনার প্রাথমিক কাজ হয়ে গেল। এবার আর একটি ছোট্ট কাজ করতে হবে।

টার্মিনাল খুলে সেখানে gedit .bashrc লিখে এন্টার চাপুন। bashrc নামক একটি ফাইল খুলে যাবে। ফাইলটিতে যা কিছু লেকা আছে তার একেবারে শেষে নিচের লাইনগুলো লিখে দিন।

export GTK_IM_MODULE=ibus
export XMODIFIERS=@im=ibus
export QT_IM_MODULE=ibus

ছবিতে দেখুন

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

সাধারণত প্রত্যেকবার কম্পিউটার স্টার্ট হবার সাথে সাথে আইবাস চালু হয়না। আমরা ইচ্ছে করলে প্রত্যেকবার কম্পিউটার চালু হবার সাথে সাথে আইবাস চালু করার একটি সুবিধা এবার যোগ করতে পারি।

এ জন্য System > Preference > Startup Application এ যেতে হবে।
একটি নতুন লাঞ্চার তৈরি করার জন্য এই উইন্ডোর ডানপাশে থাকা Add লেখা বাটনে ক্লিক করুন।
নতুন লাঞ্চারটিতে যেসব তথ্য ইনপুট করতে হবে তা নিম্নরূপঃ

Name: IBus daemon
Command: /usr/bin/ibus-daemon -d
Comment: Start IBus daemon when Gnome starts

Add লেখা বাটনে ক্লিক করে এটাকে স্টার্টআপ এপ্লিকেশন তালিকায় যোগ করুন। এবার থেকে প্রত্যেকবার কম্পিউটার চালু হবার সাথে সাথে ibus রান হয়ে যাবে।

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

এবার আপনি যে কীবোর্ডে অভ্যস্ত সেই লেআউন অনুযায়ী বাংলা লেখা শুরু করে দিন। পারলেন কি না জানাবেন কিন্তু।

সম্পূর্ণ  →  উবুন্টু ১০.০৪ - এ আইবাস দিয়ে বাংলা লিখুন

ব্লগার ব্লগের জন্য একটি আলতো করে সরে যাওয়া মেনু

আসুন এবার ব্লগার.কম ব্লগে একটি সমান্তরার মেনু তৈরি করি। এই মেনুটির উপরে মাউস নিয়ে গেলে আলতো করে আগের লেখার পিছনে থাকা ছবিটি সরে যায়। আসলে এই মেনুটিতে গুগল এর এজাক্স দিয়ে একটি অন্যরকম ভালোলাগার মতো সৌন্দর্য সৃষ্টি করা হয়েছে।

• গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগারে লগইন করুন।
• Layout > Edit HTML অংশে যান। এখানে ]]></b:skin> এর ঠিক উপরে নিচের কোড স্থাপন করুন।
  

• .container {
  width: 520px;
  height: 100px;
  position: absolute;
  top: 10%; left: 60%;
  margin: 0px 0 0 -80px;
  overflow: hidden;
  }
  img {border: none;}
  ul#topnav {
  margin: 10px 0 20px;
  padding: 0;
  list-style: none;
  font-size: 1.1em;
  clear: both;
  float: left;
  width: 520px;
  }
  ul#topnav li{
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
  height:40px;
  }
  ul#topnav a, ul#topnav span {
  padding: 10px 10px;
  float: left;
  text-decoration: none;
  color: #fff;
  clear: both;
  height: 20px;
  line-height: 20px;
  background: #1d1d1d;
  }
  ul#topnav a { color: #7bc441; }
  ul#topnav span {
  display: none;
  }
  ul#topnav.bh span{
  color: #FF0000;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlzKB-eTEiLCbWqZLfYho_AF0X15MkxkS6AXqM0-8KpwdOrbO2CvKJiZdrR8gYSqZttEXDs2Djefa_C6kOc2gJCAit8og3SwyxzKQ6g0RqaI-Bta_OocJfwV12SSpzAqL71xgdKLc7QTAm/s320/hmenu.png) repeat-x left top;
  }
  ul#topnav.bh a{
  color: #555;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlzKB-eTEiLCbWqZLfYho_AF0X15MkxkS6AXqM0-8KpwdOrbO2CvKJiZdrR8gYSqZttEXDs2Djefa_C6kOc2gJCAit8og3SwyxzKQ6g0RqaI-Bta_OocJfwV12SSpzAqL71xgdKLc7QTAm/s320/hmenu.png) repeat-x left bottom;
  }

  
  
• এখনি সেভ করবেন না। একটু নিচে দেখুন </head> লেখা আছে। এর উপরে নিচের কোডটুকু বসিয়ে দিন।

• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
  
  <script type='text/javascript'>
  $(document).ready(function() {
  $("#topnav li").prepend("<span/>");
  
  $("#topnav li").each(function() {
  var linkText = $(this).find("a").html();
  $(this).find("span").show().html(linkText);
  });
  
  $("#topnav li").hover(function() {
  $(this).find("span").stop().animate({
  marginTop: "-40"
  }, 250);
  } , function() { //On hover out...
  $(this).find("span").stop().animate({
  marginTop: "0"
  }, 250);
  });
  
  });
  </script>

• এবার আরও নিচে নামতে থাকুন। যেখানে <div id='content-wrapper'> লেখা রয়েছে, তার উপরে নিচের কোডগুলো বসান।
  

• <ul class='bh' id='topnav'>
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Ubuntu</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Email me</a></li>
  <li><a href='#'>Archive</a></li>
  <li><a href='#'>Tutorial</a></li>
  </ul>

• এখানে আপনার পছন্দমতো লিংক ও লিংকের নাম বসাতে হবে। লাল রঙে বোল্ড করে দেখিয়ে দিয়েছি। # চিহ্নটির বদলে লিংক লিখুন ও Home, Ubuntu ইত্যাদির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
• এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।
• খেয়াল করুনঃ যদি <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> এই অংশটি আগে কোন গেজেট বা মেনুর জন্য ব্লগে ইনস্টল করে থাকেন, তাহলে নতুন করে আর এই লাইনটুকু ব্লগে বসাতে হবে না। যেমন: এর আগে প্রকাশ করা
• সাইডবারের লিংকগুলোকে ঠেলে সরিয়ে দেয়া
  এবং
• আরও উন্নত "রিলেটেড পোস্ট" (Related Posts) গেজেট
  যদি আপনার ব্লগে লাগানো থাকে তাহলে ওই লাইনটি বাদ দিয়েই বাকী কোডগুলো বসিয়ে দিন।
  

সম্পূর্ণ  →  ব্লগার ব্লগের জন্য একটি আলতো করে সরে যাওয়া মেনু

বামপাশের ভাঁজকরা মেনু

বামপাশের ছবিটি দেখুন একটি সাইডবার মেনু খুলে যাওয়ার জন্য অপেক্ষা করছে। আমরা নিজেদের ব্লগার.কম ব্লগে আজ ঠিক এই মেনুটি তৈরি করবো। আমরা এর আগে ভাসমান স্থির সাইডমেনু ব্লগার.কম ব্লগে তৈরি করার পদ্ধতি জেনেছি। সেই মেনুটির সুবিধা ছিল বেশ কয়েকটি, কিন্তু কোন কোন পাঠক এটাকে ততোটা পছন্দ করেননি। কারণ বামপাশে বা ডানপাশে মেনুটি ভেসে থাকার কারণে কিছুটা জায়গা দখল করে রাখতো। ফলে যাদের ব্লগে তিনটি কলাম ছিল, তাদের ক্ষেত্রে পোস্টের কিছু অংশ মেনুটি দ্বারা ভেসে থাকতো। তারা আজকের মেনুটি ব্যবহার করতে পারেন। এটা যখন ছোট আকারের থাকবে, তখন পাশের ছবিটির মতো ব্লগের বামদেয়াল ঘেঁষে ভেসে থাকবে। স্ক্রল করে নিচে নামা বা উপরে ওঠার সাথে সাথে মেনুটিও ওঠানামা করবে। যখন গোলাপী রঙের ছোট তীরচিহ্নটির উপরে ক্লিক করা হবে, তখন মেনুটি খুলে গিয়ে নিচের ছবিটির মতো বড় আকার ধারণ করবে।মেনুটি তৈরি জন্য আপনাদেরকে কোন রকমের কষ্ট স্বীকার করতে হবে না। শুধুমাত্র নিচে দেয়া কোডটুকু কপি করে নিয়ে কোন একটি HTML/ Javascript গেজেটবক্সের মধ্যে পেস্ট করে দিন।

<script src="http://sites.google.com/site/banglahacks/shrd/prototype.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/banglahacks/shrd/effects.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/banglahacks/shrd/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQsvmqdqu0Trox59qW9Gi45bTvQJY_DwtMGE8E7pPfD892nlwankGhNBQBarxnKg2KslUuuFfrLh9H-W0TEpY-IQc7g82BMsgzdjYMCMf5n_P5LHZo0Nyb9mml8lWiGU4kKUp-m5MP5zV_/s320/left.collapse.border.gif);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-519KjQu8iBMCqfr1EOBy1gTMOjOwxM465uo0OT7NzXY_oIZhkG8A6yh-tCk6GNjv_UyzY8DUAeJyYgOO6OAkMSGKCl9A_ug0sIeEGUv4n6SDe3XOjQtk2qpvXFaeNPlOklIMbfiFfe7W/s320/sidebarcollapse.gif" title="sideBar" /></a>
</div>

• কোডের একেবারে নিচের বোল্ড করা অংশের " # " চিহ্নটির জায়গায় ব্লগের কোন পোস্টের ওয়েবলিংক ও Link One শব্দগুলো সঠিক শব্দ দিয়ে পরিবর্তন করে নিতে ভুলবেন না যেন। এই লিংকগুলোই মেনুবারে দেখা যাবে।
  
• গেজেটটি সেভ করুন।
• এবার আপনার ব্লগটিকে একবার রিফ্রেস করে দেখুন তো, কেমন লাগছে।
• আমি নমুনা হিসেবে চারটি মাত্র লিংক দিয়েছি। ১০টির বেশি লিংক ব্যবহার করা যাবে।
  
• উল্লেখ্য যে, এই মেনুটি শুধুমাত্র ফ্রি ব্লগার ব্লগে কাজ করবে। যাদের নিজস্ব ডোমেইন আছে, তারা মন্তব্য আকারে জানান, সমাধান জানানো হবে।
  

সম্পূর্ণ  →  বামপাশের ভাঁজকরা মেনু

ব্লগার.কম ব্লগে সাবমেনুসহ মেনুবার লাগানোর পদ্ধতি

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

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

• যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
• এবার Layout> Edit HTML পাতায় চলে যান।
• সেখানে ]]</b:skin> এর উপরে নিচের কোডটি বসিয়ে দিন।

• /* Navigation ----------*/
  #NavbarMenu {
  background: #A0CFEC;
  width: 980px;
  height: 34px;
  font-size: 12px;
  font-weight: bold;
  font-family: 'AdorshoLipi', Arial, Tahoma, Verdana;
  color: #000000;
  margin: 0;
  padding: 0;
  float:left;
  }
  #NavbarMenuleft {
  width: 690px;
  float: left;
  margin: 0;
  padding: 0;
  }
  #NavbarMenuright {
  width: 285px;
  float: right;
  margin: 0;
  padding: 6px 0 0;
  }
  #nav {
  margin: 0;
  padding: 0;
  }
  #nav ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  }
  #nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  #nav li a, #nav li a:link, #nav li a:visited {
  color: #2008AF;
  display: block;
  font-size: 14px;
  font-weight: bold;
  font-family: Georgia, Times New Roman;
  margin: 0;
  padding: 5px 10px 5px;
  }
  #nav li a:hover, #nav li a:active {
  
  color: #000000;
  font-weight: bold;
  margin: 0;
  padding: 5px 10px 5px;
  text-decoration: underline;
  }
  #nav li li a, #nav li li a:link, #nav li li a:visited {
  background: #A0CFEC;
  width: 100px;
  color: #2008AF;
  font-size: 14px;
  font-family: 'AdorshoLipi', Georgia, Times New Roman;
  font-weight: normal;
  float: none;
  margin: 0;
  padding: 3px 4px;
  border-bottom: 1px solid #FFF;
  
  }
  #nav li li a:hover, #nav li li a:active {
  
  color: #000000;
  padding: 3px 4px;
  }
  #nav li {
  float: left;
  padding: 0;
  }
  #nav li ul {
  z-index: 9999;
  position: absolute;
  left: -999em;
  height: auto;
  width: 150px;
  margin: 0;
  padding: 0;
  border-left:1px solid #BFC0C0;
  
  }
  #nav li ul a {
  width: 100px;
  }
  #nav li ul ul {
  margin: -28px 0 0 100px;
  }
  #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
  }
  #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left: auto;
  }
  #nav li:hover, #nav li.sfhover {
  position: static;
  }

• উপরের অংশে কালার চার্ট (Color Chart) দেখে দেখে মেনুটির বিভিন্ন অংশের রঙ পাল্টাতে পারবেন।
• এবার নিচের দিকে স্ক্রল করে যান।
• নিচের দিকের <div id='content-wrapper'> লেখাটির ঠিক উপরে নিচের কোডটি লিখুন।

• <div id='NavbarMenu'>
  <div id='NavbarMenuleft'>
  <ul id='nav'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li>
  <a href='#'>Blogging</a>
  <ul>
  <li>
  <a href='http://www.banglahacks.com/search/label/Blogger'>Blogger</a>
  <ul>
  <li><a href='http://www.banglahacks.com/search/label/Tutorial'>Tutotial</a></li>
  <li><a href='http://www.banglahacks.com/search/label/Template'>Templates</a></li>
  <li><a href='http://www.banglahacks.com/search/label/Gadget'>Gadgets</a></li>
  </ul>
  </li>
  <li><a href='http://www.banglahacks.com/search/label/Wordpress'>Wordpress</a></li>
  
  <li><a href='http://www.banglahacks.com/search/label/আমারব্লগ.কম'>আমারব্লগ.কম</a></li>
  <li><a href='http://www.banglahacks.com/search/label/সামহোয়ারইন'>সামহোয়ারইন</a></li>
  </ul>
  </li>
  <li><a href='http://www.banglahacks.com/search/label/Linux'>Linux</a>
  <ul>
  <li><a href='http://www.banglahacks.com/search/label/Ubuntu'>Ubuntu</a></li>
  <li><a href='http://www.banglahacks.com/search/label/Puppy'>Puppy</a></li>
  </ul>
  </li>
  <li><a href='#'>More Stuff</a>
  <ul>
  <li><a href='http://www.banglahacks.com/search/label/E%20Book'>E Book</a></li>
  <li><a href='http://www.banglahacks.com/search/label/Download'>Download</a></li>
  <li><a href='http://www.banglahacks.com/search/label/HTML'>HTML</a></li>
  <li><a href='http://www.banglahacks.com/2009/07/blog-post_4349.html'>About</a></li>
  <li><a href='http://www.banglahacks.com/2008/08/email-me.html'>E mail me</a></li>
  <li><a href='http://www.banglahacks.com/2008/11/blog-post_08.html'>Link to us</a></li>
  <li><a href='http://www.banglahacks.com/2009/04/table-of-contents.html'>Table of Contents</a></li>
  </ul></li>
  <li><a href='http://templates.banglahacks.com/'>BH Templates</a></li>
  </ul>
  </div>
  
  <div id='NavbarMenuright'>
  <script src='http://tareq.wedevs.com/bangla_date_widget.php' type='text/javascript'></script>, <script type='text/javascript'>
  var d=new Date();
  var weekday=new Array(7);
  weekday[0]="রবিবার )";
  weekday[1]="সোমবার )";
  weekday[2]="মঙ্গলবার )";
  weekday[3]="বুধবার )";
  weekday[4]="বৃহস্পতিবার )";
  weekday[5]="শুক্রবার )";
  weekday[6]="শনিবার )";
  document.write(" ( " + weekday[d.getDay()]);
  </script>
  </div>
  </div>

• নিজের প্রয়োজনমতো লিংকগুলি ও এ্যাংকর টেক্সটগুলি বদলিয়ে নিন।
• একটু ধীরে ধীরে সময় নিয়ে করবেন, না হলে সবকিছু এলোমেলো হয়ে যাবে।
• আমি ন্যাভবারটির ডানপাশে বাংলা তারিখ দেখানোর কোডসহ দিলাম। আপনারা <div id='NavbarMenuright'>এই অংশের মধ্যে অন্যকিছুও বসিয়ে দিতে পারেন। সবুজ রঙ করা কোডগুলো পাল্টিয়ে দিন।
• আশা করি সমস্যা না করেই সফলভাবে একটি ড্রপডাউন মেনু তৈরি করতে পারবেন।
  

সম্পূর্ণ  →  ব্লগার.কম ব্লগে সাবমেনুসহ মেনুবার লাগানোর পদ্ধতি

সাইডবারের লিংকগুলোকে ঠেলে সরিয়ে দেয়া

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

সুবিধাবলীঃ

• এই গেজেটটির মাধ্যমে অর্থাৎ বিশেষ ডিজাইনে লিংককে দেখানোর মাধ্যমে আপনি আপনার ব্লগ পাঠকের কাছে একটু ভিন্নভাবে উপস্থিত হচ্ছেন।
• তারা আপনাকে অন্যচোখে দেখবে।
• আপনার ব্লগেও একটি আধুনিক বৈশিষ্ট্য যোগ হবে।

আসুন তাহলে এই ইফেক্টটি নিজেদের ব্লগে স্থাপন করে নেয়ার নিয়মটা জেনে ফেলি।

• যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগের ড্যাশবোর্ডে প্রবেশ করুন।
• Layout > Edit HTML ট্যাবে গিয়ে </head> লেখাটির ঠিক উপরে নিচের কোডটি স্থাপন করুন।

• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  
  <script type='text/javascript'>
  //<![CDATA[
  
  $(document).ready(function()
  {
  slide("#sliding-navigation", 25, 15, 150, .8);
  });
  
  function slide(navigation_id, pad_out, pad_in, time, multiplier)
  {
  // creates the target paths
  var list_elements = navigation_id + " li.sliding-element";
  var link_elements = list_elements + " a";
  
  // initiates the timer used for the sliding animation
  var timer = 0;
  
  // creates the slide animation for all list elements
  $(list_elements).each(function(i)
  {
  // margin left = - ([width of element] + [total vertical padding of element])
  $(this).css("margin-left","-180px");
  // updates timer
  timer = (timer*multiplier + time);
  $(this).animate({ marginLeft: "0" }, timer);
  $(this).animate({ marginLeft: "15px" }, timer);
  $(this).animate({ marginLeft: "0" }, timer);
  });
  
  // creates the hover-slide effect for all link elements
  $(link_elements).each(function(i)
  {
  $(this).hover(
  function()
  {
  $(this).animate({ paddingLeft: pad_out }, 150);
  },
  function()
  {
  $(this).animate({ paddingLeft: pad_in }, 150);
  });
  });
  }
  
  //]]>
  </script>

• সেভ করুন।
• এবার Layout > Page Elements ট্যাবে গিয়ে একটি নতুন HTML/ Javascript গেজেট নিয়ে সেখানে নিচের লিংকলিস্টটি স্থাপন করুন।

• <ul id="sliding-navigation">
  <li class="sliding-element"><a href="#">Link 1</a></li>
  <li class="sliding-element"><a href="#">Link 2</a></li>
  <li class="sliding-element"><a href="#">Link 3</a></li>
  <li class="sliding-element"><a href="#">Link 4</a></li>
  <li class="sliding-element"><a href="#">Link 5</a></li>
  </ul>

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

সম্পূর্ণ  →  সাইডবারের লিংকগুলোকে ঠেলে সরিয়ে দেয়া

আরও উন্নত "রিলেটেড পোস্ট" (Related Posts) গেজেট

গতকালকে প্রকাশিত একটি সহজ "রিলেটেড পোস্ট" (Related Posts) গেজেটটি অনেকের পছন্দ হয়েছে। সম্মানিত পাঠকদের মধ্যে কেউ কেউ এটাকে নিজের মনের মতো করে কাস্টমাইজ করতে চাচ্ছেন। তাদের জন্য আজকে গতকালকের রিলেটেড পোস্ট গেজেটের একটি আপডেটেড কোড প্রকাশ করছি।

সুবিধাসমূহঃ

1. Related Posts লেখাটি পাল্টানো যাবে।
2. Loading লেখাটি পাল্টানো যাবে।
3. রিলেটেড পোস্টের সংখ্যা কমানো বাড়ানো যাবে।
4. সাম্প্রতিক পোস্ট গেজেট হিসেবে ব্যবহার করা যাবে।
5. অন্য ব্লগ থেকেও পোস্ট দেখানো যাবে।

তাহলে আসুন কোডটি জেনে নিই।

• যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগারের ড্যাশবোর্ডে প্রবেশ করুন।
• Layout > Edit HTML অংশে যান।
• একটি HTML/ Javascript গেজেটে নিচের কোডগুলি স্থাপন করুন।

• <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
  <script type="text/javascript">
  relatedPostsWidget({
  'containerSelector':'div.post-body'
  ,'relatedTitle':'Related Posts:'
  ,'recentTitle':'Recent Posts:'
  ,'loadingText':'loading...'
  ,'maxPosts':'5'
  ,'blogURL':'http://another_blog.com'
  });</script>

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

কাস্টমাইজ করাঃ

• Related Posts লেখাটি পাল্টে ফেলুন।
• loading... লেখাটি পাল্টে ফেলুন।
• Recent Posts লেখা লাল রঙের লাইনটি একটি বিশেষ লাইন। যদি এই গেজেটটিকে সাম্প্রতিক পোস্ট গেজেট হিসেবে দেখাতে চান, তাহলে Related Posts লেখা লাইনটি সম্পূর্ণ মুছে ফেলুন। আর গেজেটটিকে সাইডবারে স্থাপন করুন। সেক্ষেত্রে Recent Posts লেখাটি পাল্টে দিন।
• ,'maxPosts':'5' এ পাঁচ এর পরিবর্তে অন্য সংখ্যা লিখে দিন।
• যদি রিলেটেড পোস্টগুলোর বদলে অন্য ব্লগের পোস্টসূচী দেখাতে চান, তাহলে ,'blogURL':'http://your-another.blog.com' এই লাইনটি রাখুন। না হলে সম্পূর্ণ লাইনটি মুছে ফেলুন।

আর কোন প্রশ্ন আছে কি? জানাতে দ্বিধা করবেন না কিন্তু।

সম্পূর্ণ  →  আরও উন্নত "রিলেটেড পোস্ট" (Related Posts) গেজেট

একটি সহজ "রিলেটেড পোস্ট" (Related Posts) গেজেট

গতকালকে পোস্ট করা ব্লগার.কম ব্লগে রিলেটেড বা একইরকম পোস্ট দেখানো গেজেটটি নিয়ে আমার কোন কোন পাঠক একটু সমস্যায় পড়েছেন। তাদের জন্য আজ আমি সবচাইতে সহজ একটি "রিলেটেড পোস্ট" গেজেট প্রকাশ করছি। আশা করি এবার আর কোন সমস্যায় পড়বেন না।

• ব্লগার.কম এর ড্যাশবোর্ডে প্রবেশ করে Layout >Page elements এ একটি New gadget নিন।
• এখানে একটি HTML/ Javascript বক্সে নিচের কোডটুকু পেস্ট করে দিন। গেজেটটি সাইডবার বা পোস্টের নিচে বা ফুটার যেখানে খুশি রাখতে পারেন, ঠিকমতো কাজ করবে।

• <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script> <script type="text/javascript"> relatedPostsWidget({ 'containerSelector':'div.post-body' ,'loadingText':'Loading Related Posts...' });</script>

• সেভ করুন।
• ব্যাস হয়ে গেল।
• এবার প্রতিটি পোস্টের নিচে ৫টি একই রকম পোস্ট দেখা যাবে।
• এই রিলেটেড পোস্ট অংশটিকে একটু রঙিন করে তুলতে পারেন। না করলেও কোন অসুবিধা নেই।
  
• সেক্ষেত্রে Layout > Edit HTML অংশে গিয়ে ]]></b:skin> এর ঠিক উপরে নিচের কোডটুকু পেস্ট করে দিন।

• #related-posts{
  margin:4px;
  padding:10px;
  }
  #related-posts h2{
  background: #BDEDFF;
  color: #000000;
  }
  #related-posts ul{
  background: #e0ffff;
  color: #2008AF;
  font-size: 12px;
  }
  #related-posts-loadingtext{
  color:#ff0000;
  }
  

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

সম্পূর্ণ  →  একটি সহজ "রিলেটেড পোস্ট" (Related Posts) গেজেট

ব্লগার.কম ব্লগে রিলেটেড বা একইরকম পোস্ট দেখানো

আমরা এর আগে ব্লগার.কম ব্লগে একইরকম পোস্ট কিভাবে পোস্টের শেষে প্রদর্শন করবেন তার পদ্ধতি জেনেছি। সেই পদ্ধতিটি একটি থার্ড পার্টির সাহায্য নিয়ে তৈরি করা ছিল। এটার বেশ কিছু সুবিধা ছিল। কিন্তু পাশাপাশি আর একটি বিশেষ অসুবিধা ছিল। ওই গেজেটটি অন্য সাইট থেকে সরাসরি পরিচালনা করা হত বলে সেই সাইটের ব্যান্ডউইথ ব্যবহারের প্রভাব নিজেদের ব্লগে পড়তো। ফলে কখনও কখনও সেটা লোড হতে খুব দেরী হত। আজ আমরা আর একটি পদ্ধতিতে প্রতিটি ব্লগপোস্টের নিচে একই রকম পোস্ট (Related Posts) দেখানোর একটি পদ্ধতি জানবো। এই পদ্ধতির প্রধান সুবিধা হল যে এটা খুব দ্রুত লোড হয়। ফলে পাঠকের মনে কোনরকম বিরক্তির উদ্রেক হয়না।

* এই কোডটি কাজ করার শর্ত কিন্তু একটাই। তা হলো, আপনার ব্লগপোস্টের নিচে আগে থেকেই লেবেল দেখানো থাকতে হবে। লেবেল একটিভ না থাকলে এই রিলেটেড পোস্ট গেজেটটি কাজ করবে না।

কিছু বৈশিষ্ট্যঃ

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

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

• গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম ড্যাশবোর্ডে প্রবেশ করুন।
• Layout> Edit HTML ট্যাবে যান।
• সেখানে Expand Widget Templates এর পাশে টিক চিহ্ন দিয়ে দিন।
• এবার <data:post.body/> লেখাটি খুঁজে বের করুন। যদি আপনার ব্লগে খুব সহজে পোস্টের শেষে "বিস্তারিত পড়ুন" হটলিংক স্থাপন করুন সুবিধাটি লাগানো থাকে, তাহলে <data:post.body/> কোডটি দুইবার থাকতে পারে। পরের কোডের ঠিক নিচের লাইনে রিলেটেড পোস্টের কোডগুলি স্থাপন করতে হবে।
  
• ব্লগপোস্টের মধ্যে কোডগুলি ঠিকমতোভাবে দেখাচ্ছিল না বলে একটি টেক্সটফাইলে আপলোড করে দিলাম।
• এখানে থাকা টেক্সট ফাইলটি ডাউনলোড করে নিয়ে, তার সবগুলো কোড কপি করে নির্দিষ্ট জায়গায় পেস্ট করে দিন।
• কোডের যে অংশগুলো পরিবর্তনযোগ্য তা নিচে উল্লেখ করে দিলাম।
  

• <b:if cond='data:blog.pageType == "item"'>
  <div class='similiar'>
  <div class='widget-content'>
  <h3>Related Posts</h3>
  <div id='rpostsbh2010'/><br/><br/>
  <script type='text/javascript'>
  var homeUrl3 = "<data:blog.homepageUrl/>";
  var maxNumberOfPostsPerLabel = 4;
  var maxNumberOfLabels = 7;
  maxNumberOfPostsPerLabel = 7;
  maxNumberOfLabels = 3;
  function listEntries10(json) {

• এখানে কোডের শুধু উপরের পরিবর্তনযোগ্য অংশটুকু দেয়া হল। সম্পূর্ণ কোড ডাউনলোড করে নিন।
  
• এখানে বোল্ড করা সংখ্যাগুলো নিজের পছন্দমতো পাল্টে নিন।
• Related Posts লেখাটি পাল্টে "একইরকম পোস্ট", 'সম্পর্কিত পোস্ট' ইত্যাদি লিখে দিতে পারেন।
• সবশেষে SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তনগুলো সেভ করুন।

টেক্সটে ফাইলে রাখা রিলেটেড পোস্টের কোড এখান থেকে ডাউনলোড করুন।

আপডেট: ব্লগপোস্টে কোডগুলি ঠিকভাবে প্রদর্শিত হচ্ছিল না বলে সম্পূর্ণ কোড টেক্সটফাইলে আপলোড করে দেয়া হল।

সম্পূর্ণ  →  ব্লগার.কম ব্লগে রিলেটেড বা একইরকম পোস্ট দেখানো

মেটাট্যাগ কি এবং ব্লগার.কম ব্লগে লাগানোর পদ্ধতি

'বাংলা হ্যাকস' ব্লগের একজন পাঠক জানতে চেয়েছেন ব্লগার.কম এর ব্লগে কিভাবে মেটা ট্যাগ বসাতে হয়। তার আগ্রহের প্রেক্ষিতে এই পোস্টটি লিখছি।

মেটা ট্যাগ হল বর্ণনামূলক কিছু শব্দ যার মাধ্যমে গুগল বা যে কোন সার্চ ইঞ্জিনকে সাইটটি সম্পর্কে কিছু বিশেষ ধরণের তথ্য দেয়া হয়। সার্চ ইঞ্জিনকে বিশেষ ধরণের কিছু নির্দেশনাও দেয়া যায় মেটা ট্যাগ দিয়ে।

বস্তুতঃ meta tags হল এমন একটি HTML অথবা XHTML যার মাধ্যমে ওয়েবসাইটটি সম্পর্কে কিছু মেটাডাটা সার্চ ইঞ্জিনের কাছে তুলে ধরা হয়। সাইটের <head> সেকশনের মধ্যেই মেটা ট্যাগ লিখে দিতে হয়। অর্থাৎ থেকে এর মধ্যে মেটা ট্যাগকে থাকতেই হবে। এর বাইরে থাকলে তা কোন কাজে লাগবে না।

৯০ এর দশকের প্রথমদিকে মেটা ট্যাগের ব্যবহার শুরু হয়। কোন একটি ওয়েবপেজের বৈশিষ্ট্যকে সঠিকভাবে তুলে ধরার জন্যে মেটাট্যাগ ব্যবহার করা শুরু করে ওয়েবমাস্টাররা। সার্চ ইঞ্জিনের কাছে ওয়েবপেজকে পরিচিত করে তুলতে তথা সার্চ ইঞ্জিন অপটিমাইজেশন সম্পর্কিত কাজে মেটা ট্যাগের জনপ্রিয়তা আকাশচুম্বী। অনলাইন মার্কেটিং প্লানকে সঠিকভাবে প্রয়োগ করা সম্ভব মেটা ট্যাগ ব্যবহারের মাধ্যমে।

মেটাট্যাগের অনৈতিক ও অনাকাঙক্ষিত ব্যবহার এত বেশি হয়ে গেছে যে, বর্তমানকালের সার্চইঞ্জিনরা এখন আর মেটাট্যাগকে অতটা গুরুত্ব দেয় না। গুগলের ডাইরেক্টর Monika Henziger ২০০২ সালে বলেছেন: "ইদানীং আমরা আর মেটাডাটাকে এর অপব্যবহারের কারণে আর বিশ্বাস করিনা। " ফলে আধুনিক সার্চ ইঞ্জিনরা মেটাট্যাগের বেশ কিছু এলিমেন্ট এড়িয়ে চলে। ওয়েবসাইটের মৌলিক লেখা, ভাল মানের লেখার পরিমাণ, পেজভিউ এবং ইউনিক ভিজিটর, ভিজিটররা কতক্ষণ সাইটে অবস্থান করছে, পুনরায় ভিজিটের পরিমাণ, সাইটের বিভিন্ন লেখা পড়ার পরিমাণ, বিভিন্ন টেকনিক্যাল ও ব্যবহারবান্ধব ফিচার, সাইটের নামের সাথে সংশ্লিষ্ট লেখা, ভৌগলিক অবস্থান ইত্যাদি দিয়ে এখন সার্চ ইঞ্জিনগুলো কোন ওয়েবসাইটকে র্যাঙ্কিং করে। ফলে শুধুমাত্র মেটাট্যাগের উপর নির্ভর করে সার্চইঞ্জিনের কাছে নিজের সাইটের গুরুত্ব বাড়ানোর আশা করাটা কিঞ্চিত বোকামীই হবে।

ব্লগার.কম ব্লগে কিভাবে মেটাট্যাগ বসাতে হয়?

• গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম লগইন করুন।
• Layout > HTML ট্যাবে যান।
• সেখানে <head> থেকে </head> এর মধ্যে প্রয়োজনীয় মেটাট্যাগ বসিয়ে SAVE TEMPLATE ক্লিক করুন।
• মনে রাখুন যে একই জায়গায় 'google-site-verification' মেটাট্যাগটিও বসাতে হয়।
  

মেটা ট্যাগ কয়েক প্রকারের হতে পারে। তবে সবচাইতে বহুল ব্যবহৃত তিনপ্রকারের মেটা এলিমেন্ট নিয়ে আজ আলোচনা করবো।

একঃ
প্রথমেই আসে Kewords মেটাএলিমেন্টের কথা।
আপনার ওয়েবসাইটের কীওয়ার্ড কি কি অর্থাৎ আপনার সাইটের মূল বিষয় কি কি, তা এই কীওয়ার্ড মেটাট্যাগের মাধ্যমে আপনি সার্চইঞ্জিনকে জানাতে পারেন। <head> থেকে </head> এর মধ্যে কীওয়ার্ড মেটাএলিমেন্ট বসিয়ে দিন। এর কোড নিম্নরূপঃ

<meta content='ব্লগের কীওয়ার্ড' name='keywords'/>

উল্লেখ্য যে অপ্রাসঙ্গিক কীওয়ার্ড এত বেশি ওয়েবসাইটে ব্যবহার করা হয়ে গেছে যে এখন সার্চ ইঞ্জিনগুলোর কাছে কীওয়ার্ডের মূল্য একেবারেই নেই। বিশেষ করে গুগলের সার্চরোবট ওয়েবসাইটের Keyword এড়িয়ে চলে। ইয়াহু এবং কিছু অপ্রধান সার্চইঞ্জিন এখনও কীওয়ার্ড দিয়ে সাইটের বিষয়বস্তু সম্পর্কে ধারণা নেয়। কিন্তু এখন তারাও খুব সতর্ক হয়ে গেছে। অতএব Keywords মেটা ট্যাগ ব্যবহার করুন নিজ দায়িত্বে। এর কাছ থেকে বেশি কিছু আশা করা অনুচিত হবে।

দুইঃ
দ্বিতীয় ভাগে আসে একটি প্রধান Meta Tag এর নাম। এটা হল 'Content' এই মেটাএলিমেন্টের মাধ্যমে আপনার ব্লগের বৈশিস্ট্য, শ্লোগান, সাধারণ বর্ণনা সংক্ষেপে এই মেটাট্যাগের মধ্যে লিখে দিতে হয়। এর কোড

<meta content='ব্লগের বর্ণনা' name='description'/>

গুগলের সার্চ রেজাল্টে পোস্ট বা সাইটটাইটেলের পরে এই বর্ণনাগুলির উল্লেখ থাকে। অতএব ভেবেচিন্তে বর্ণনা লিখুন।

তিনঃ
এরপর বলি একটি গুরুত্বপূর্ণ মেটাট্যাগের কথা। এর নাম ROBOTS মেটা ট্যাগ। এটার কোড

<meta content='INDEX, FOLLOW' name='ROBOTS'/>

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

মেটাট্যাগের মধ্যে আপনি নিজের নাম বা এলাকার নাম, জিপকোড বসিয়ে দিতে পারেন। এর মাধ্যমে আপনার পরিচিতি সার্চইঞ্জিনগুলোর কাছে জানা থেকে যাবে।
এর কোড এরকমঃ
<meta content='Aero River' name='author'/>
<meta content='000000' name='zipcode' />

আর একটি বিশেষ মেটাট্যাগ আছে, যার নাম Refresh
যদি আপনি পুরনো ঠিকানা বাদ দিয়ে নতুন ঠিকানায় ব্লগ লেখা শুরু করেন, তাহলে এই ট্যাগটি ব্যবহার করতে পারেন। এ বিষয়ে পড়ুন কিভাবে ব্লগার.কম এর ব্লগকে রিডাইরেক্ট করা যায় শীর্ষক পোস্টটি।

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

সম্পূর্ণ  →  মেটাট্যাগ কি এবং ব্লগার.কম ব্লগে লাগানোর পদ্ধতি

গুগল সাইটস ব্যবহার করে ফাইল শেয়ার করা

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

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

আচ্ছা, ইতিমধ্যে গুগলসাইটস এ লগইন হয়ে নিয়েছেন নিশ্চয়। এবার দেখুন উপরে ডানপাশে নিচের ছবির মতো তিনটি বাটন রয়েছে।
এখানে Creat Page লেখাতে ক্লিক করুন। গুগল সাইটস' এর নতুন পেজ খোলার ট্যাব খুলে যাবে। এখানে একটি নতুন পেজ খোলার জন্য বিভিন্ন অপশন রয়েছে। নিচের ছবি দেখুন।
আমরা কি ধরণের ফাইল তৈরি করবো, তা এখান থেকে সিলেক্ট করে নিতে হবে।

• উপরের অংশে দেখুন চার রকমের পেজ তৈরি করতে পারবেন। সেগুলো হল
  Web Page, Announcements, File Cabinet, List
• আমরা যেহেতু ফাইল হোস্ট করবো, সেহেতু File Cabinet সিলেক্ট করবো। ছবিতে নির্বাচিত করাই আছে।
• এরপর নতুন পেজের একটি নাম দিতে হবে Name ঘরে
  আমি নাম দিয়েছি 'newpage' আপনি ইচ্ছেমতো এই নামটি দিতে পারবেন। তবে মনে রাখবেন, সেটাই হবে এই ফাইলটির লিংক।
• এবার দেখুন দুইরকম অপশন আছে।
  1. Put page at the top level
  2. Put page under misc
  আমি এর আগে misc নামক একটি পেজ তৈরি করেছি। সেই পেজ থেকেই সরাসরি এই নতুন পেজ খোলার অপশনে এসেছি। তাই এটার নাম দেখাচ্ছে। আপনি যদি সরাসরি sitename/newpage ধরণের লিংক চান, তাহলে প্রথমটি সিলেক্ট করুন।
  আর যদি sitename/otherpage/newpage এই ধরণের পেজ চান, তাহলে এটা নির্বাচন করুন। কখনও কখনও এই ধরণের পাতারও প্রয়োজন পড়তে পারে। তবে এবার আমরা প্রথমটিই সিলেক্ট করেছি।
• Choose a different location লেখাতে ক্লিক করে অন্য পেজের আন্ডারে নতুন পেজটিকে তৈরি করতে পারবেন।
• এবার নিচের Create Page লেখাতে ক্লিক করুন।
  
• নতুন ফাইল ক্যাবিনেট পেজটি তৈরি করা হয়ে যাবে।
• এই পেজের উপরের অংশে দেখুন নিচের মতো কয়েকটি বোতাম আছে।
• 
• এই বোতামগুলির সর্ববামের বোতাম Add file লেখাতে ক্লিক করলে আর একটি ডায়ালগ বক্স ওপেন হবে।
• 
• এখানে ব্রাউজ করে হার্ডডিস্কে থাকা ফাইল লোকেশন দেখিয়ে দিন এবং নিচের Upload বোতামে চাপুন। আপনার কম্পিউটারে থাকা ফাইলটি গুগলসাইটে হোস্ট হয়ে যাবে।
  
  

সম্পূর্ণ  →  গুগল সাইটস ব্যবহার করে ফাইল শেয়ার করা

ব্লগের নিচে অতিরিক্ত কলাম তৈরি করার পদ্ধতি

এর আগে আমরা ব্লগার.কম ব্লগে আরেকটি সাইডবার তৈরি করার পদ্ধতি শিখেছি। আশা করি আপনারা সফলভাবেই নিজেদের ব্লগে অতিরিক্ত একটি সাইডবার তৈরি করতে পেরেছেন। আজ আসুন জেনে নিই কিভাবে ব্লগের নিচে কয়েকটি কলামের বটমবার (Bottom bar for bottom columns) তৈরি করা যায়।

ব্লগের নিচে বটমবার থাকলে বেশ কিছু দিক দিয়ে সুবিধা আছে। "বাংলা হ্যাকস" ব্লগের নিচে দেখুন।

তিন কলামের একটি বার আছে। এখানকার কলামগুলোতে আমি গুরুত্বপূর্ণ কিছু গেজেট ও লিংক রেখে দিয়েছি। ফলে ব্লগের দুইপাশের সাইডবারের আকার দৃষ্টিকটুভাবে লম্বা হয়ে যায়নি। এরকম একাধিক (একের বেশি) কলাম আপনিও নিজের ব্লগে অন্যের দ্বারস্থ না হয়ে তৈরি করে নিতে পারেন। কিভাবে ব্লগের নিচে একাধিক কলাম তৈরি করা যায়, তাই আজ আমি বর্ণনা করবো।
How to create extra bottom columns on blogger blogspot blog. Here is the easiest method.

• যথারীতি গুগল আইডি ও পাসওয়ার্ড দিলে লগইন হয়ে নিন।
• Layout > Edit HTML ট্যাবে যেতে হবে। Expand Widget Templates এর পাশের চেকবক্সে টিক চিহ্ন দিতে হবে না।
  
• ]]></b:skin> লেখার উপরে নিচের কোডটি সম্পূর্ণ লিখে দিন।

• /* bottom
  ==================== */
  
  #bottom {
  width: 970px;
  position: relative;
  clear:both;
  margin: 0 auto;
  color:#4E0038;
  float: left;
  background:#efefef;
  padding: 5px 0 5px 0;
  }
  
  #bottom h2 {
  padding: 4px;
  margin: 0 auto;
  color:#884218;
  background-color: #addfff;
  font-size: 100%;
  color: #ff0000;
  font-weight:bold;
  border-bottom: 1px solid #ffffff;
  letter-spacing: 0px;
  }
  
  #bottom ul {
  padding: 0;
  margin: 0;
  }
  
  #bottom ul li {
  line-height: 26px;
  list-style-type: none;
  border-bottom: 1px dashed #031c5d;
  }
  
  #bottom ul li a {
  display: block;
  padding: 0 10px;
  color:#062D4E;
  text-decoration: none;
  
  }
  #bottom ul li a:hover {
  background: #B1ACB1;
  padding-left:5px;
  }
  
  #bottom1 {
  width: 250px;
  float: left;
  padding-left:10px;
  }
  
  #bottom2 {
  width: 250px;
  float: left;
  padding-left:10px;
  }
  
  #bottom3 {
  width: 220px;
  float: left;
  padding-left:10px;
  }
  
  #bottom4 {
  width: 200px;
  float: left;
  padding-left:10px;
  }

• সেভ করবেন না।
• এখানে আপনার ব্লগের আকার বুঝে #bottom {width: 970px; এবং bottomগুলোর width পরিবর্তন করে নিন। এই পরিবর্তনটি একটু সতর্ক হয়ে করতেই হবে। না হলে ব্লগের আকার এলোমেলো হয়ে যেতে পারে। এছাড়াও color:#4E0038; এবং background:#efefef; ইত্যাদির কালার কোড কালার চার্ট দেখে পরিবর্তন করতে পারবেন। চারটির জায়গায় তিনটি কলাম চাইলে যে কোন একটি কলামের সম্পূর্ণ কোড অর্থাৎ #bottom4 {
  width: 200px;
  float: left;
  padding-left:10px;
  } সম্পূর্ণটুকু মুছে দিতে পারবেন। এখানে মুছে দিলে নিচের অংশেও মুছে দিতে হবে।
  
• এবার আরও নিচে নেমে </div></div> <!-- end outer-wrapper --> লেখাটির ঠিক উপরে নিচের কোডগুলো বসিয়ে দিন।
• <div id='footer-wrapper'> কোডটির উপরেও বসাতে পারেন। আপনার কোন জায়গাটি পছন্দ তা নির্বাচন করে নিন।
  

• <div id='bottom'>
  
  <b:section class='bottom' id='bottom1'></b:section>
  
  <b:section class='bottom' id='bottom2'></b:section>
  
  <b:section class='bottom' id='bottom3'></b:section>
  
  <b:section class='bottom' id='bottom4'></b:section>
  </div>

• আমি চারটি কলাম তৈরি করার কোড দিয়েছি। যদি তিনটি কলাম চান, তাহলে <b:section class='bottom' id='bottom4'></b:section> এই রকম একটি লাইন সম্পূর্ণ মুছে ফেলতে হবে।
• আশা করি আমি সহজভাবে ব্লগার.কম এর ব্লগের নিচে অতিরিক্ত কলাম তৈরির পদ্ধতি বর্ণনা করতে পেরেছি। কোন জায়গায় খটকা থাকলে জানাতে ভুলবেন না যেন।
  

সম্পূর্ণ  →  ব্লগের নিচে অতিরিক্ত কলাম তৈরি করার পদ্ধতি

মন্তব্য ঘরে মন্তব্যকারীর অবতার দেখানোর পদ্ধতি

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

প্রথমে Setting> Comments ট্যাব থেকে মন্তব্যকারীর ছবি দেখানোর অপশনটি কার্যকর করেছি।
এবার Layout> Edit HTML ট্যাবে গিয়ে যে পরিবর্তনগুলো করেছি, তা নিম্নরূপ। এখানে দুটো বিষয় আছে। দেখুন তো আপনার ব্লগে মন্তব্যকারীদের কোন অবতার দেখা যায় কি না। যদি যায়, তাহলে প্রথম ধাপটি বাদ দিন। পুরনো টেমপ্লেট যাদের তাদের ক্ষেত্রে এমন হতে পারে। ব্লগার.কম মন্তব্যকারীদের ছবি দেখানোর অপশনটি চালু করার পর যারা ব্লগিং শুরু করেছেন, বা নতুন টেমপ্লেট লাগিয়ে নিয়েছেন, তারা সরাসরি দ্বিতীয় ধাপটি অনুসরণ করুন।

প্রথম ধাপঃ
নিচের কোডটি খুঁজে বের করুন।

<dl id='comments-block'>

এই লাইনটি মুছে ফেলে সেখানে নিচের লাইনটি লিখে দিন।
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
এবার <a expr:name='data:comment.anchorName'/> এই লেখাটির পরে নিচের কোডটি লিখে দিয়ে সেভ করুন।

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

এবার আপনার নিজের অবতারসহ যারা লগইন করে (ব্লগার একাউন্টে ছবি আছে) মন্তব্য করেছেন, তাদের অবতার দেখা যাবে।

কিন্তু যারা লগইন করেননি বা Anonymous হিসেবে মন্তব্য করেছেন, তাদের জন্য একটি সাধারণ ছবি দেখানোর জন্য নিচের কোডগুলি স্থাপন করুন।

দ্বিতীয় ধাপঃ
</b:skin> লেখাটির উপরে নিচের কোডটি স্থাপন করুন

/* Comment Avatar */
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSnEcGSDxzAUW7emzrxku0E4lAeK1nGE7ji7F4hywUbIBiS84UC5InVCcikoAxfw1rI8n1WxTCOpAR6XRvrUCKQa8HADF0eWYCdcTBRhDOAciFJaYOeln5K6CoMP52w3tfhNj6e-Fqk60T/s320/AvatarBlogger.png);
width:35px;
height:35px;
}

এই জায়গায় এই ছবিটির বদলে নিচের যে কোন একটি ছবির লিংক ব্যবহার করতে পারেন।

1. http://sites.google.com/site/banglahacks/shrd/commentavatar.png
2. http://sites.google.com/site/banglahacks/shrd/anon_avatar.png
3. http://sites.google.com/site/banglahacks/shrd/anonymousavatar.gif
4. http://sites.google.com/site/banglahacks/shrd/anonycmtavtr.png
5. http://sites.google.com/site/banglahacks/shrd/anonymous.gif

# উপরে দেয়া ছবিগুলির মধ্যে যে কোনটি ব্যবহার করতে পারেন। কোনরকম বাধানিষেধ নেই।

এবার <a expr:name='data:comment.anchorName'/> এই লাইনটি খুঁজে বের করে সম্পূর্ণ মুছে ফেলুন। এই কোডটুকু দুই জায়গায় থাকতে পারে। প্রথমে যেটা আছে, সেটা মুছে দিবেন। সেখানে নিচের কোডটুকু লিখে দিন।

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>

সেভ করুন। এবার মন্তব্যযুক্ত কোন ব্লগ পোস্ট পরীক্ষা করে দেখুন তো কাজ করছে কিনা? যদি না করে, তাহলে আমি তো আছি।

সম্পূর্ণ  →  মন্তব্য ঘরে মন্তব্যকারীর অবতার দেখানোর পদ্ধতি

আরেকটি সাইডবার তৈরি করার পদ্ধতি

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

আমরা আলোচনার সুবিধার্থে Minima টেমপ্লেটকে বেছে নিয়েছি। অন্য সব টেমপ্লেটেও একইভাবে সাইডবার বসিয়ে নেয়া যাবে।

• প্রথমেই ব্লগার.কম এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন হয়ে নিন।
• Layout > Edit HTML ট্যাবে চলে যান।
• এখানে HTML কোডেরে মধ্যে স্ক্রল করে নিচে নামুন।
• এক জায়গায় লেখা আছে /* Outer-Wrapper------ */
• এই অংশের একটু নিচে দেখুন নিচের কোডঅংশটুকু লেখা আছে
• #sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
  }
• এই অংশটুকু সম্পূর্ণ কপি করে নিয়ে এর ঠিক নিচেই পেস্ট করুন।
• sidebar-wrapper নামটির শেষে আর একটি সংখ্যা ১/ ২ বসিয়ে দিন। তাহলে এই নতুন সাইডবারটির নাম হয়ে গেল sidebar-wrapper2
• এখানে width:220px; পরিবর্তন করে বিভিন্ন মাপ পরীক্ষা করতে পারেন।
• আমরা এর আগে কিভাবে ব্লগার.কম ব্লগের আকার পরিবর্তন করতে হয় তা জেনেছি। নতুন সাইডবারটির আকার যেহেতু 220px সেহেতু স্ক্রল করে একটু উপরে গিয়ে
  
• #outer-wrapper {
  width: 660px;
• এই অংশটুকুতে width:660px; এর সাথে 220 যোগ করে দিতে হবে। তাহলে সম্পূর্ণ মান হবে 880px, অর্থাৎ আপনার ব্লগের আকার হয়ে গেল ৮৮০ পিক্সেল।
• একইভাবে আরও উপরে গিয়ে
  
• #header-wrapper {
  width:660px;
• এই অংশের ৬৬০ পরিবর্তন করে ৮৮০ করে দিন।
• খেয়াল করেছেন কি#sidebar-wrapper {
  width: 220px;
  float: $endSide; এখানে float endSide লেখা রয়েছে। নতুন সাইডবারের এই জায়গায় startSide লিখে দিন। তাহলে নতুন সাইডবারটি পুরনো সাইডবারের বামপাশে থাকবে। পরস্পর কোড পাল্টাপাল্টি করেও নিতে পারেন।
  
• এবার স্ক্রল করে HTML কোডগুলোর আরও নিচে নামুন।
• এক জায়গায় লেখা আছে <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
  <b:widget id='HTML1' locked='false' title='' type='HTML'/>
  </b:section> এটা আগে থেকে সাইডবারের কোড।
  
• এই অংশটুকু আছে <div id='main-wrapper'> এর নিচে।
• নতুন সাইডবারের জন্য নিচের কোডটুকু main-wrapper এর উপরে বসিয়ে দিন। তাহলে main-wrapper এর আগে একটি ও পরে আর একটি সাইডবার থাকবে। এটা অবশ্য আপনার নিজস্ব মর্জির উপর নিভর্র করবে। আপনি ইচ্ছে করলে main-wrapper এর নিচেও বসাতে পারেন। সেক্ষেত্রে পোস্ট অংশের পাশে পরপর দুইটি সাইডবার থাকবে। যে কোডটুকু হবে তা এরকম
• <div id='sidebar-wrapper2'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>
  </div>
• PREVIEW দেখে নিন। সবকিছু ঠিকঠাক থাকলে SAVE TEMPLATE লেখা বাটনে ক্লিক করে পরিবর্তনটুকু সংরক্ষণ করুন।
• এখনি ব্লগ রিফ্রেস করতে যাবেন না।
• এবার Layout > Page Elements ট্যাবে আসুন। দেখুন, আপনার টেমপ্লেটের চেহারা নিম্নরূপ ধারণ করেছে।
• 
• HTML অংশে করা পরিবর্তনগুলোর কারণে বামপাশে একটি নতুন সাইডবার তৈরি হয়ে গেছে। কিন্তু এখনও কোন গেজেট লাগানো হয়নি।
• এই নতুন সাইডবারের Add a Gadget লেখাতে ক্লিক করে প্রয়োজনীয় গেজেট বসিয়ে নিন।
• এবার ব্লগ রিফ্রেশ করুন।
• আপনার ব্লগের পোস্ট অংশের পাশে নিচের ছবির মতো আর একটি সাইডবার দেখতে পারবেন।
• 
• আশা করি সব ধাপগুলো ঠিকমতো বর্ণনা করতে পেরেছি।
• উল্লেখ্য যে, সাইডবারের আকার নিজের মনমতো পাল্টে নিতে পারবেন। সে অনুযায়ী ব্লগের আকারেও পরিবর্তন করতে হবে।
  

সম্পূর্ণ  →  আরেকটি সাইডবার তৈরি করার পদ্ধতি

গুগলসাইটস দিয়ে স্ট্যাটিক ওয়েবসাইট খোলার পদ্ধতি

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

আজ আমরা জানবো কিভাবে 'গুগলসাইটস' এ স্ট্যাটিক ওয়েবসাইট খুলতে হয়।

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

গুগল সাইটের প্রথম পাতা

Creat Site লেখা নীল রঙের বোতামটিতে ক্লিক করুন। নিচের ছবির মতো পাতায় সরাসরি চলে যাবেন।

এই পাতা থেকে নতুন গুগল সাইট তৈরি করা শুরু করতে হবে। এখানে প্রথমে যে ধরণের কাজের জন্য সাইট বানাতে চান, তা সিলেক্ট করে দিতে পারেন।
দেখুন লেখা আছে: Choose a template to use এর নিচে কয়েকধরণের সাইটের ডিজাইন আছে।
যেমনঃ
Blank template, Project wiki, Classroom site, Family site, Soccer team

এই টেমপ্লেটগুলোতে আসলে আগে থেকেই পূর্বনির্ধারিত কিছু পেজ ও গেজেট তৈরি করে সেট করে দেয়া আছে। আপনাকে আলাদা করে খুঁজে খুঁজে স্থাপন করতে হবে না। শুধু কাস্টমাইজ করলেই হবে। আপনি যেকোন একটি পছন্দ করতে পারেন। তবে আমি আলোচনার সুবিধার্থে Blank template সিলেক্ট করেছি। এতে সুবিধা হল যে পরে নিজের প্রয়োজনমতো আরও পেজ ও গেজেট যোগ করতে পারবো. রঙ ও আকার পাল্টাতে পারবো।

যে ঘরগুলো পূরণ করতে হবে সেগুলো হলঃ

• Name your site
• Your site will be located at this URL এই ঠিকানাটাই আপনার সাইটের ঠিকানা হিসেবে ব্যবহৃত হবে। এটা সাইটের নাম যা লিখেছেন, তাই স্বয়ংক্রিয়ভাবে সেট হবে। ইচ্ছা করলে লভ্যতাসাপেক্ষে আপনি অন্য শব্দ লিখতে পারেন।
• Choose a theme একটি থীম পছন্দ করে নিতে পারেন।
• More Options আরো কিছু অপশন এখান থেকে পাল্টে নিতে পারেন। তবে এই দুটো এখনই পরিবর্তন করার দরকার নেই। পরে সময় নিয়ে ধীরে ধীরে সাইটটিকে কাস্টমাইজ করা যাবে।
• Please type the code shown লেখার নিচের ক্যাপচা বর্ণগুলো ঠিকমতো টাইপ করে Creat site লেখা নীল রঙের বোতামে ক্লিক করে দিন।

ব্যাস তৈরি হয়ে গেল এক পাতার একটি স্ট্যাটিক ওয়েবসাইট। আমরা আগামী পোস্টগুলোতে এই গুগলসাইটটিকে কিভাবে কাস্টমাইজ করা যায়, এবং কি কি প্রয়োজনীয় কাজে ব্যবহার করা যায় সেবিষয়ে আলোচনা করবো।

উল্লেখ্য যে, গুগল সাইটের ঠিকানা সাধারণত লম্বা হয়
যেমন: http://sites.google.com/site/YOURSITENAME
আপনার যদি এরকম লম্বা ঠিকানা পছন্দ না হয়, তাহলে ইচ্ছে করলে নিজস্ব ডোমেইন ব্যবহার করতে পারেন। ব্লগারের ব্লগকে যেমন নিজস্ব ডোমেইনের সাথে সংযুক্ত করে নেয়া যায়, তেমনিভাবে গুগলসাইটে ফ্রি হোস্টিং রেখে নিজস্ব কাস্টমাইজ ডোমেইনকেও এর সাথে ব্যবহার করা যায়।

বাঙালির তৈরি দুইটি বিখ্যাত গুগলসাইটের ঠিকানা। সাইটগুলো দেখুন আর বুঝে নিন কত বিভিন্নরকম কাজে ব্যবহার এবং কত সুন্দর আকর্ষণীয় ডিজাইনেই না গুগলের এই সার্ভিসটিকে ব্যবহার করা যেতে পারে।

• Kushtia Math Circle
• Pragyan
  

সম্পূর্ণ  →  গুগলসাইটস দিয়ে স্ট্যাটিক ওয়েবসাইট খোলার পদ্ধতি

ব্লগে ট্যাবভিত্তিক গেজেট - উইজেট লাগানোর পদ্ধতি

আমার 'বাংলা হ্যাকস' ব্লগের ডানপাশের সাইডবারের উপরে একটি ট্যাবভিত্তিক গেজেটবক্স আছে। ব্লগার.কম ব্লগে ট্যাবড উইজেট (গেজেট) তৈরি করার পদ্ধতি জানতে চেয়ে একাধিক পাঠক আমাকে ইমেইল করেছেন। নিজস্ব হোস্টিং এর ওয়ার্ডপ্রেস ব্লগে এটা স্থাপন করার জন্য প্লাগইন আছে। কিন্তু ব্লগার.কম ব্লগে (ফ্রি অথবা হোস্টেড) এটা লাগানোর কোন সুবিধা নেই। কিন্তু এই সীমাবদ্ধতা আমরা নিজেরা একটু চেষ্টা করে দূর করতে পারি। এই ট্যাবভিত্তিক গেজেটবক্স ব্লগার.কম ব্লগে লাগানোর জন্য একাধিক কোড ব্লগের HTML অংশে স্থাপন করতে হয়। নতুন ব্লগারদের জন্য দুঃসাধ্য হতে পারে বিধায় আমি এতদিন এই কোডটি প্রকাশ করতে অনাগ্রহী ছিলাম। কিন্তু পাঠকদের উপর্যুপরি ইমেইল ও অনুরোধের প্রেক্ষিতে আমি পদ্ধতিটি সবিস্তারে বর্ণনা করলাম। আশা করি পদ্ধতিটি জটিলভাবে দেখবেন না। একটু সতর্ক হয়ে কাজ করলে আপনিও সফলভাবে এই ট্যাবড গেজেটটিকে নিজেদের ব্লগে স্থাপন করতে পারবেন।

এই ট্যাবভিত্তিক গেজেট স্থাপন করার নানারকম পদ্ধতি আছে। এর বেশিরভাগ এক্সটারনাল ফাইল সংযুক্ত করে করতে হয়। কিন্তু আমি যে কোডটি আপনাদেরকে দিচ্ছি, তার কোন এক্সটারনাল ফাইল লাগবে না। কোডের মধ্যেই যাবতীয় সমস্যার সমাধান করে দেয়া আছে। যদি এটা সফলভাবে স্থাপন করতে পারেন, তাহলে অন্যান্য পদ্ধতিও আরেকদিন আলোচনা করা যাবে।
There are many ways to add a tabbed gadget in blogger.com blog.
Blogger.com ব্লগে Tabbed Widget স্থাপন করার পদ্ধতিঃ

প্রথমে ব্লগার.কম এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন। ড্যাসবোর্ড থেকে সরাসরি Layout > Edit HTML ট্যাবে চলে যান। Expand Widget Templates লেখার পাশে টিক চিহ্ন দিয়ে দিন।

মোট পাঁচটি ধাপে ব্লগার.কম ব্লগে ট্যাবভিত্তিক উইজেট স্থাপন করতে হবে। প্রথম চারটি ধাপের কোড স্থাপন করাকালীন হুট করে SAVE করবেন না। একেবারে শেষে যখন বলবো ঠিক তখন সেভ করতে হবে।
This is the easiest method to add a tabbed widget gadget in blogger blog sidebar.
প্রথম ধাপঃ
HTML পাতার উপরের দিকে থাকা Variable definitions লেখার ঠিক নিচে নিম্নোক্ত কোডগুলো লিখে দিন।

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

এই অংশটুকু স্থাপন করার ফলে আপনি ব্লগারের ডিফল্ট রঙ পরিবর্তন করার জায়গা থেকে এই নতুন ট্যাব গেজেটের ব্যাকগ্রাউন্ড রঙ, বর্ডার রঙ ইত্যাদি পরিবর্তন করতে পারবেন। ব্লগারের ডিফল্ট রঙ পরিবর্তন করার পদ্ধতি পোস্টটি পড়ে বিষয়টি সম্পর্কে জেনে নিতে পারবেন।

দ্বিতীয় ধাপঃ
এবার ]]></b:skin> এর উপরে নিচের কোডটি কপি করে নিয়ে পেস্ট করে দিন।

/*---------- Tabbed widget start-------- */

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}

/*------- Tabbed widget end--------*/

তৃতীয় ধাপঃ
এবার </head> লেখার ঠিক উপরে নিচের কোডটি কপি করে দিন

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;

if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {
t.headingText = i + 1;
}

DOM_li = document.createElement("li");

t.li = DOM_li;

DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;

DOM_a.tabber = this;
DOM_a.tabberIndex = i;

if (this.addLinkId && this.linkIdFormat) {

aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

DOM_li.appendChild(DOM_a);

DOM_ul.appendChild(DOM_li);
}

e.insertBefore(DOM_ul, e.firstChild);

e.className = e.className.replace(this.REclassMain, this.classMainLive);

this.tabShow(defaultTab);

if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};

tabberObj.prototype.navClick = function(event)
{

var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

a.blur();

if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};

tabberObj.prototype.tabHideAll = function()
{
var i;

for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

div = this.tabs[tabberIndex].div;

if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

var div;

if (!this.tabs[tabberIndex]) { return false; }

this.tabHideAll();

div = this.tabs[tabberIndex].div;

div.className = div.className.replace(this.REclassTabHide, '');

this.navSetActive(tabberIndex);

if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

this.tabs[tabberIndex].li.className = '';

return this;
};

function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }

tempObj = new tabberObj(tabberArgs);

divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

চতুর্থ ধাপঃ
এবার <div id='sidebar-wrapper'> এর নিচে নিম্নোক্ত কোডগুলো লিখে দিন। (সাইডবার একাধিক থাকলে তার জন্য স্বতন্ত্র নাম্বার যেমন ১ অথবা ২ থাকবে।)

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

[এখানে যদি তিনটি ট্যাব চান, তাহলে একটি লাইন সম্পূর্ণ ( <b:section class='tabbertab' id='tab4' maxwidgets='1'/>) মুছে দিন ]

একবার PREVIEW লেখাতে ক্লিক করে দেখে নিন কোন Error দেখাচ্ছে কি না। দেখাবে না আসা করি। তারপরও যদি কোন Error দেখায়, তাহলে HTML কোড বক্সের নিচে লেখা CLEAER EDITS লেখাতে ক্লিক করে প্রয়োগকৃত কোডগুলো পরিষ্কার করে নিন। এই বোতামটি চাপলে সেভ করার আগ মুহুর্ত পর্যন্ত যে পরিবর্তনগুলো করেছেন, তা সব মুছে যাবে। ভুল কোডের কোন প্রভাব টেমপ্লেটে পড়বে না। আবার প্রথম ধাপ থেকে শুরু করুন। প্রথম থেকে চতুর্থ ধাপ পর্যন্ত কোডগুলো স্থাপন করার পর আবারো PREVIEW লেখাতে ক্লিক করে দেখে নিন। কোন Error না দেখালে এবার SAVE TEMPLATE লেখাতে ক্লিক করে প্রয়োগকৃত কোডগুলো সংরক্ষণ করুন।

পঞ্চম ধাপঃ
এতক্ষণ কাজ করেছেন Layout > Edit HTML ট্যাবের মধ্যে। এবার Layout > Page Elements ট্যাবে চলে আসুন। এখানে সাইডবারের দিকে তাকালে নিচের ছবির মত অংশ দেখতে পারবেন।
এখানে 1, 2, 3, 4 লেখার ঠিক নিচে Add a Gadget লেখা লিংক রয়েছে। প্রথমে 1 লেখার নিচে একটি গেজেট স্থাপন করুন। এরপর 2 লেখাতে ক্লিক করলে আবারও Add a Gadget লেখাতে ক্লিক করে আরও একটি গেজেট লাগিয়ে নিন। এভাবে 3 এবং 4 নং ট্যাবে গেজেট বসিয়ে দিন। সবকটি ট্যাবে গেজেট বসানো হয়ে গেলে এই Page Elements পাতার উপরে ডানপাশে কমলা রঙের ব্যাকগ্রাউন্ডে লেখা SAVE লেখাতে ক্লিক করে পরিবর্তনগুলো সংরক্ষণ করুন। ব্রাউজারের অন্য ট্যাবে আপনার ব্লগে একবার রিফ্রেশ করুন। দেখতে পারবেন একটি দারুণ কাজের ট্যাব গেজেট কাজ শুরু করে দিয়েছে।

আশা করি সবকটি ধাপ সফলভাবে সম্পন্ন করতে পেরেছেন। পারলেন কি না তা জানানোর জন্য অনুরোধ করছি। এই টিউটোরিয়ালটি সম্পূর্ণ টেক্সটফাইলে ডাউনলোড করুন এখান থেকে।

সম্পূর্ণ  →  ব্লগে ট্যাবভিত্তিক গেজেট - উইজেট লাগানোর পদ্ধতি