অর্কুটে ভাইরাস

এই পোস্টটা লিখেছেন কফিহাউসে আমাদের বন্ধু অভ্র। ভাবলাম আপনাদের কাজে আসবে বলে এখানে তুলে দিই। বিপদটি আপনাকেও পেয়ে বসতে পারে। আমাকেতো পেয়েইছে। সুতরাং অভ্র যেমন লিখেছেন , তেমনি ব্যবস্থা নিনঃ
                 প্রচুর সিনেমা দেখে শুতে শুতে বেশ রাত হয়ে গেছিল। হঠাৎ করেই দেখলাম অর্কুটে আপডেট আসছে বন্ধু বান্ধবরা ভুলভাল স্প্যানিশ কিছু কমিউনিটিতে যোগ দিচ্ছেন। একজনকে ফেসবুকে ঢুকে সতর্ক করে দিলাম – তোমার আইডি মনে হচ্ছে হ্যাক হয়েছে। তারপরে দেখি কেউ কেউ আপডেটে দিয়েছেন বোম শব্দ দেখলেই ডিলিট করবেন। দু একটা স্ক্র্যাপ ডিলিট করে ঘুমোতে গেলাম।
                    সকালে উঠে দেখি ভাইরাসের বোলবালা বেড়ে গিয়েছে প্রচুর। তাই চোখ বোলালাম নেটে। খবর বলছে অর্কুট আন্ডার এটাক। যে শব্দটিকে আমার বাংলা মনে হয়েছিল, তা আদপে বাংলা নয় – পর্তুগীজ বা স্প্যানিশ শব্দ (Bom Sabado) যার মানে হচ্ছে Good Friday. এই ভাইরাস আক্রমন ফ্রেবুয়ারী মাসেও একটা সময় দেখা গিয়েছিল। এটি একটি কুকি স্টিলিং ভাইরাস। অর্থাৎ আপনার ব্রাউসারের স্টোরড ইনফরমেশন থেকে তা আপনার অজান্তেই আপনার পরিচিত বন্ধু বান্ধবের কাছে পৌঁছে যাবে।
ভাইরাসটি আসলে জাভা স্ক্রিপ্ট বেসড। এটি একটি জাভা স্ক্রিপ্ট এমবেড করে দিচ্ছে আপনার ব্রাউসারের ফ্রেমে। কারো কারো মেশিনে হোস্ট ফাইলটিও বদলে যাচ্ছে।  যদিও আমার মেশিনে এই সমস্যা হয়নি।
এখন কর্তব্য? – প্রথমেই আপনার ব্রাউসারের কুকি ও অন্যান্য স্টোরড ইনফরমেশন উড়িয়ে দিন। তারপর গুগল একাউন্টের পাসওয়ার্ড বদলে নিন google.com/accounts এ গিয়ে। পাসওয়ার্ডটির গুনগত মান যাচাই করে নিন। ভাল হয় যদি security question টাও বদলে নিতে পারেন। আর হ্যাঁ, অর্কুট এখন কটা দিন ব্যবহার করবেন না।  বলা হচ্ছে ফেসবুকও আক্রান্ত হতে পারে।
                 শেষমেষ একটা কথা – হয়তো ভাবছেন আপনার একাউন্টটি হ্যাক হয়নি। কিন্তু সেখানেও ভুল হতে পারে। হয়তো আপনার অজান্তেই আপনার একাউন্টটি হ্যাক হয়ে গেছে। কাজেই সতর্ক হয়ে যাওয়া কিন্তু ভালো। আমি আরো কিছু বিস্তারিত জানতে পারলে এখানেই আপডেট করছি।
*আরেকটি প্রাসঙ্গিক লিঙ্ক দেখুনে এখানে

Related articles by Zemanta

• Google Chrome 6 Reportedly Screws Up Google Analytics (huffingtonpost.com)
• Apple, Google, Others Settle DOJ Inquiry Into Hiring Practices (huffingtonpost.com)
• Admin templates for Google Chrome make it more enterprise-friendly (downloadsquad.com)
• 40 APIs Used in 7 Days: Google Search, Flickr and Twitter (programmableweb.com)

সম্পূর্ণ  →  অর্কুটে ভাইরাস

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 : ব্লগ লেখার নতুন যাদু। আপনার ব্লগ পোস্টগুলো সাজিয়ে তুলুন মনের মতো

উবুন্টু কন্ট্রোল সেন্টার

উবুন্টুতে ব্যবহৃত বিভিন্ন এ্যপলেটগুলোকে কাজের সময় খুঁজে পেতে একটু সমস্যায় পড়তে হয়। তাই যদি এই টুলগুলোর একটি ম্যানেজার থাকতো তাহলে খুব ভাল হত। এরকম একটি কাজের কাজী হল 'উবুন্টু কন্ট্রোল সেন্টার'। ডিফল্টভাবে উবুন্টুতে কোন কন্ট্রোল সেন্টার থাকে না। কিন্তু আমরা দু'একটি ডেব প্যাকেজ ডাউনলোড করে একটি শক্তিশালী 'কন্ট্রোল সেন্টার' পেতে পারি। উবুন্টুর জন্য এই কন্ট্রোল সেন্টারটির আইডিয়া এসেছে ম্যানড্রিভা থেকে। আর এটা Gnome 2x এ দারুণভাবে কাজ করে।

কি কি আছে?

• Software Management:
• Ubuntu Software Center
• System updater
• Manage software sources
• System Cleaner
• Generate bootable USB Key
• Hardware:
• System Information
• Configure proprietary drivers
• Display Properties
• Sound configuration
• Keyboard Layout
• Mouse and touchpad
• joystick Calibration
আরও আছে

• Network and Internet
• System
• Local Disks
• Account Preferences

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

http://sites.google.com/site/ubuntucontrolcenter/downloads

এখানে থাকা Ubuntu control center 0.2 32 bit লিংকের ডেব ফাইলটি ডাউনলোড করে নিন।

• ইনস্টল হওয়ার পর কন্ট্রোল সেন্টারটিকে Applications >System Tools মেনুতে পাওয়া যাবে।

Ubuntu control center ডেব ফাইলটিতে ডাবল ক্লিক করলে ইনস্টল হয়ে যাবে। যদি Jstest-gtk কিংবা Font-Manager ছাড়া ইনস্টল হতে না চায়, তাহলে এই দুটো টুল পাবেন একই ঠিকানায়। এক্ষুনি আপনার উবুন্টু সিস্টেমে 'কন্ট্রোল সেন্টার' ইনস্টল করে ফেলুন। আর যাবতীয় পরিবর্তনগুলো করুন খুব সহজে, একই জায়গা থেকে।

সম্পূর্ণ  →  উবুন্টু কন্ট্রোল সেন্টার

ব্লগস্পট ব্লগের ব্যাকআপ রাখার পদ্ধতি

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

• ব্লগার.কম এ লগইন হয়ে নিন।
• এবার ড্যাশবোর্ড থেকে Settings এ চলে যান।
• এখানে Basic অপশনে দেখুন Export Blog লেখা আছে। এখানে ক্লিক করুন।
• Export Blog লেখা লিংকে ক্লিক করলে নিচের ছবির মতো একটি পেজ আসবে।
• 
• এখানে লেখা আছে "Export your blog into the Blogger Atom export format. You can do this to move your blog to another blogging service or simply to store your blog on your own hard drive. Learn more
  
  Don't worry, your blog will still remain on Blogger until you delete it."
• আসলেই উদ্বিগ্ন হবার কোন কারণ নেই। একটি ডাউনলোড অপশন আসবে। একটি XML ফাইল সেভ করতে চাইবে। ফাইলটির নাম হবে তারিখ অনুযায়ী। অর্থাৎ সম্পূর্ণ ফাইলটির নাম হবে এরকম: blog-05-23-2010.xml এই ফাইলটিতে আপনার ব্লগের যাবতীয় পোস্ট ও মন্তব্য তারিখ, লেখকের নাম, ক্যাটাগরী/ লেবেল সবকিছু সহ লিখিত থাকবে।
  
• ব্লগের আকার অনুযায়ী ফাইলটির সাইজ কমবেশি হতে পারে। আজ এই পোস্টটি লেখার তথ্যের জন্য বাংলাহ্যাকস ব্লগের ব্যাকআপ নিলাম। ফাইলটির সাইজ হয়েছে ৭.৯ মেগাবাইট।
  
• ফাইলটি হার্ডডিস্কের নিরাপদ জায়গায় সেভ করে রাখুন। কিংবা অনলাইনে কোন জায়গায় আপলোড করে রাখুন, অথবা সিডিতে রাইট করে রাখুন।
  
• নিয়মিত ব্লগের ব্যাকআপ রাখার অভ্যাস গড়ে তুলুন। ব্লগের কনটেন্টকে হারিয়ে যাওয়া থেকে নিরাপদ রাখুন।
  

সম্পূর্ণ  →  ব্লগস্পট ব্লগের ব্যাকআপ রাখার পদ্ধতি

উবুন্টুর টাইটেল বারের বোতামগুলোকে ডানে সরানোর পদ্ধতি

উবুন্টু ১০.০৪ (লুসিড লিংক্স) এ দুটো নতুন থীম যোগ করা হয়েছে। থীম দুটি হলো Ambiance এবং Radiance, আকর্ষণীয় এই থীমগুলোতে উইন্ডোর টাইটেল বারের কন্ট্রোল বাটনগুলো (minimise, maximise, close) রাখা হয়েছে বামপাশে।

এম্বিয়েন্স থীমের কন্ট্রোল বোতামব়্যাডিয়েন্স থীমের কন্ট্রোল বোতাম

এই পরিবর্তনটি করা হয়েছে একটি অদূরপ্রসারী পরিকল্পনাকে সামনে রেখে। উবুন্টুর ১০.১০ (ম্যাভেরিক মির্ক্যাট) ভার্সন থেকে উইন্ডোর টাইটেলবারের ডানপাশে নতুন কিছু সুবিধা যোগ করা হবে। আর তাই এখন থেকেই বামপাশে কন্ট্রোল বাটনগুলো রেখে দেয়া হয়েছে। যেন ব্যবহারকারী বামপাশের বোতাম ব্যবহার করতে অভ্যস্ত হয়।

তবে আমরা যারা বামপাশে কন্ট্রোল ব্যবহার করতে অভ্যাস করেছি তারা অতিসহজে কয়েকটা মাত্র ক্লিক করে বাটনগুলোকে ডানপাশে নিয়ে আসতে পারি।

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

• Alt+F2 চাপুন। একটি রান ডায়ালগ খুলে যাবে।
• এবার এখানে লিখুন gconf-editor এবং Run লেখাতে ক্লিক করুন।
  
• এবার Configuration Editor খুলে যাবে। এখানে সাবধানে কাজ করবেন। উল্টাপাল্টা কিছু করতে গেলে সমস্যা হতে পারে।
• এখানে বামপাশের ফোল্ডার ট্রি থেকে ক্লিক করে করে apps > metacity > general অংশে আসুন।
  
• সিলেক্ট করা অংশে দেখুন লেখা আছে close,minimise,maximise:
• শেষের : (:) চিহ্নটি আগে এনে দিলেই এই ধারাবাহিকতা রক্ষা করে বাটনগুলো ডানপাশে চলে যাবে। কিন্তু আপনি যদি বাটনগুলোর ক্রম পরিবতর্ন করতে চান, তাহলে নিচের যে কোন একটি পদ্ধতি অনুসরণ করুন।
  
• এখানে দুইভাবে ডিফল্ট লেআউট পাল্টাতে পারেন।
• প্রথম পদ্ধতিঃ সরাসরি লেআউটে পাল্টানোঃ close,minimise,maximise: লেখার উপর ডাবল ক্লিক করুন। লেখার উপযোগী টেক্সটবক্সের মধ্যে :minimise,maximise,close লিখে দিন। বাইরে কোথাও একবার ক্লিক করুন। সেভ হয়ে যাবে।
  
• আলাদা উইন্ডোতেঃButton Layout লেখার উপরে ডাবল ক্লিক করুন। আলাদা ডায়ালগ বক্স আসবে। এখানে Value লেখা ঘরে লিখুন :minimize,maximize,close এবার OK তে ক্লিক করে পরিবর্তনটুকু সেভ করুন।
  
• ব্যাস হয়ে গেল। Configuration Editor উইন্ডোটি বন্ধ করে দিন। এবার যে কোন একটি উইন্ডো খুলে দেখুন তো বাটনগুলো ডানপাশে চলে এসেছে কি না? না আসলে জানাবেন কিন্তু। আমি অপেক্ষায় থাকবো।

* পোস্টটি লিখতে ওয়ার্ডপ্রেসের উবুন্টুবিডি ব্লগের এই পোস্টের সহায়তা নেয়া হয়েছে।

সম্পূর্ণ  →  উবুন্টুর টাইটেল বারের বোতামগুলোকে ডানে সরানোর পদ্ধতি

উবুন্টুতে ব়্যাম এবং ব়্যাব লেখার সমাধান

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

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

আমাদের প্রযুক্তি ফোরামের নিয়মিত সদস্য সারিম এই সমস্যার একটি দারুণ সমাধান দিয়েছেন। ফোরামের "লিনাক্সে আইবাস ও স্কিমে ব়্যাম লেখার সমাধান" নামক থ্রেডে এই বিষয়ক বিভিন্ন তথ্য তিনি বিস্তারিত আলোচনা করেছেন। এখানে তিনি লিনাক্সের জন্য সমাধান দিয়েছেন। সারিম লিনাক্সে ইউনিজয় এবং প্রভাত লেআউটে বাংলা লেখার জন্য ডিফল্টভাবে দেয়া bn-unijoy.mim এবং bn-probhat.mim নামক ফাইলদুটির কিছু উন্নয়ন ঘটিয়েছেন। এই পরিবর্তিত ফাইলদুটি ব্যবহার করলে আপনি 'ব়্যাম' লিখতে পারবেন। উল্লেখ্য যে 'সোলাইমান লিপি'তে র এর নিচের ফোটাটি সঠিকভাবে দেখা যায় (উপরের নমুনা ছবি দেখুন)। 'বাংলা হ্যাকস' ব্লগের ডিফল্ট ফন্ট 'আদর্শলিপি' তাই র এর নিচের ফোটাটি একটু বেশি নিচে চলে গেছে এরকম দেখা যাবে।

উবুন্টু লিনাক্সে bn-unijoy.mm ফাইলটি ইনস্টলের পদ্ধতিঃ

• উবুন্টুর টার্মিনালে sudo nautilus লিখে এন্টার চাপুন।
• এবার নটিলাস (উবুন্টুর উইন্ডো ম্যানেজার) দিয়ে /usr/share/m17n/ ফোল্ডারে যান।
• সেখানে থাকা bn-unijoy.mm ফাইলটি নতুন ফাইলটি দিয়ে রিপ্লেস করুন।
• সম্পূর্ণ পথ হল/usr/share/m17n/bn-unijoy.mim
• উল্লেখ্য যে সারিমের পরিবর্তিত ফাইলটি এখনও বেটা ভার্সনে আছে। তাই নিজ দায়িত্বে ব্যবহার করার জন্য অনুরোধ করা হল।
• 
  
• সারিমের দেয়া ফাইলটি ইউনিজয় লেআউটের ফাইলটি ডাউনলোড করুন এখান থেকে।
  
• যারা প্রভাত লেআউট ব্যবহার করে বাংলা লিখছেন তারা ডাউনলোড করুন এখান থেকে। bn-probhat.mim ফাইলটি পরিবর্তন করার নিয়ম একই।
  
• আমার আপলোড করা ফাইলটি ডাউনলোড করুন এখান থেকে। এই ফাইলটির সম্পূর্ণ নাম beta version-1=bn-unijoy.mim এখানে beta version-1= লেখাটুকু মুছে দিয়ে শুধু bn-unijoy.mm রাখুন।

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

এই টুলটি ব্যবহার করতে পারবেন আমার 'বাংলাপ্যাড' এ। এখানে নতুন একটি টেক্সটবক্স স্থাপন করা হয়েছে। দুইটি টেক্সটবক্সের মধ্যে নিচের ছোটটিতে 'ব়্যাম' সঠিকভাবে লেখা যাবে। আপনারা এটাতে লিখে নিয়ে তা থেকে কপি পেস্ট করতে পারবেন।
ঠিকানা: http://banglapad.blogspot.com/

আপনার যদি নিজস্ব ব্লগ থাকে, তাহলে সেখানেও এই ওয়েবটুলটি স্থাপন করতে পারেন। এজন্য নিচের HTML কোডটুকু আপনার ব্লগস্পট ব্লগের HTML/javascript গেজেটে পেস্ট করুন। আর ইউনিজয় লেআউট দিয়ে লিখতে থাকুন। দেখুন তো 'ব়্যাম' লিখতে পারছেন কি না?

<script src="http://sites.google.com/site/banglahacks/shrd/sarim-unijoy.js"></script>
<form>
<textarea name="bangla" id="bangla" cols="80" rows="10"
style="font-family: vrinda; font-size: 20px; width: 400px; height: 100px;"></textarea>
<br />
<input onclick="switched=!switched;" value="switch keyboard mode"
type="button" />
</form>
<script>
makeUnijoyEditor('bangla'); //pass the textarea Id
</script>

• Ctrl+Q চেপে ইংরেজি কিংবা বাংলা লেআউটে পরিবর্তন করতে পারবেন।
  

আপনি কতটুকু সফল হলেন, তা জানাতে ভুলবেন না যেন।

সম্পূর্ণ  →  উবুন্টুতে ব়্যাম এবং ব়্যাব লেখার সমাধান

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

বামপাশের ছবিটি দেখুন একটি সাইডবার মেনু খুলে যাওয়ার জন্য অপেক্ষা করছে। আমরা নিজেদের ব্লগার.কম ব্লগে আজ ঠিক এই মেনুটি তৈরি করবো। আমরা এর আগে ভাসমান স্থির সাইডমেনু ব্লগার.কম ব্লগে তৈরি করার পদ্ধতি জেনেছি। সেই মেনুটির সুবিধা ছিল বেশ কয়েকটি, কিন্তু কোন কোন পাঠক এটাকে ততোটা পছন্দ করেননি। কারণ বামপাশে বা ডানপাশে মেনুটি ভেসে থাকার কারণে কিছুটা জায়গা দখল করে রাখতো। ফলে যাদের ব্লগে তিনটি কলাম ছিল, তাদের ক্ষেত্রে পোস্টের কিছু অংশ মেনুটি দ্বারা ভেসে থাকতো। তারা আজকের মেনুটি ব্যবহার করতে পারেন। এটা যখন ছোট আকারের থাকবে, তখন পাশের ছবিটির মতো ব্লগের বামদেয়াল ঘেঁষে ভেসে থাকবে। স্ক্রল করে নিচে নামা বা উপরে ওঠার সাথে সাথে মেনুটিও ওঠানামা করবে। যখন গোলাপী রঙের ছোট তীরচিহ্নটির উপরে ক্লিক করা হবে, তখন মেনুটি খুলে গিয়ে নিচের ছবিটির মতো বড় আকার ধারণ করবে।মেনুটি তৈরি জন্য আপনাদেরকে কোন রকমের কষ্ট স্বীকার করতে হবে না। শুধুমাত্র নিচে দেয়া কোডটুকু কপি করে নিয়ে কোন একটি 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'>এই অংশের মধ্যে অন্যকিছুও বসিয়ে দিতে পারেন। সবুজ রঙ করা কোডগুলো পাল্টিয়ে দিন।
• আশা করি সমস্যা না করেই সফলভাবে একটি ড্রপডাউন মেনু তৈরি করতে পারবেন।
  

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

তিনটি ওয়েব/ ব্লগ ভিজিটর ও পেজভিউ কাউন্টার

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

HISTATS
প্রথমেই জানাই এই কাউন্টারটির কথা। ফ্লাশভিত্তিক এই কাউন্টারের দ্বারা আপনার ব্লগকে একটি নতুন সৌন্দর্য দিতে পারবেন। চকচকে ডিজাইনের বিভিন্ন রঙের এই কাউন্টার দিয়ে আপনার ব্লগের ভিজিটরদের তথ্য প্রকাশ্য বা অপ্রকাশ্য দুরকমই রাখতে পারবেন।
অতিরিক্ত সুবিধা হিসেবে এই মুহূর্তে আপনার ব্লগে কতজন ভিজিট করছেন সে তথ্যও দেখা যাবে। প্রতি ঘন্টায় কতজন এলেন, কোন জায়গা থেকে এলেন ইত্যাদি ছাড়াও language, Operating Systen, screen size, internet provider,DSL speed ইত্যাদি তথ্য এরা সরবরাহ করে। এছাড়াও শেষ ২০,০০০ ভিজিটরের বিশদ তথ্যসহ আপনার ব্লগ থেকে কতজন ভিজিটর কোন ফাইল ডাউনলোড করেছেন তাও জানাবে এই Histats কাউন্টার। এই কাউন্টার পেতে হলে আপনাকে রেজিস্ট্রেশন করতে হবে।

ওয়েব ঠিকানা: www.histats.com

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

• MySpace Visitor Tracking Code New
• Fast & Accurate Realtime Visitor Tracking
• Extensive Stats Summary Page
• Track Page Views as well as Unique & Return Visitors
• Private & Hidden Tracking
• Search Bot Analysis
• 100% Accurate, No-Downtime PHP Tracking Code
• SEO Tools
• Stats by Hour,Day,Month and Year
• from Search, Website, EMail - Referral Tracking
• Traffic Forecasts
• Extensive Lists (Pages, Referral Links, Search Engines, Keywords, etc..)
• Tracks what ISP, City, State & Country your Visitors are from
• Visitor Path Tracking
• Link Up multiple Accounts for Network Wide Traffic Summary Page!
• Who's Online List
• 30,90,120 day Trend Graphs
• Mini-Trend Graph for your website
• Custom Link Tracking
• Who's Online Counter & Hit Counter Codes
• Link Exchange Code (easily manage traffic trades)
• Poll Box Code (get feedback)

অতএব বুঝতেই পারছেন, বিনে পয়সায় এরা কম সুবিধা দিচ্ছে না। এই সব সুবিধা পেতে হলে আপনাকে রেজিস্ট্রেশন করতে হবে।

ওয়েব সাইট ঠিকানাঃ www.mvtracker.com

Quick Counter

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

ওয়েব ঠিকানাঃ www.quick-counter.net

সম্পূর্ণ  →  তিনটি ওয়েব/ ব্লগ ভিজিটর ও পেজভিউ কাউন্টার

আরও উন্নত "রিলেটেড পোস্ট" (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) গেজেট

নিজস্ব ডোমেইনে 'বিস্তারিত পড়ুন' হ্যাক স্থাপন

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

উপরের লিংকটিদে দেয়া পদ্ধতি অনুযায়ী blogger.com এর Dashboard এ আমাদেরকে দুইটি কোড বসাতে হয়। যে কোডটি </head> এর ঠিক উপরে বসাতে হয়, আমরা কাজ করবো ঠিক সেই জায়গায়।

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

• <script src='http://sites.google.com/site/banglahacks/tools/post-summary.js' type='text/javascript'/>
  <script type='text/javascript'>
  var thumbnail_mode = "float" ;
  summary_noimg = 250;
  summary_img = 250;
  img_thumb_height = 120;
  img_thumb_width = 120;
  </script>

• এই কোডটুকু সম্পূর্ণ মুছে দিন। এবং এখানে নিচের কোডটুকু স্থাপন করুন।

• <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script>
  <script type='text/javascript'>
  //<![CDATA[
  function removeHtmlTag(strx,chop){
  if(strx.indexOf("<")!=-1)
  {
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
  if(s[i].indexOf(">")!=-1){
  s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
  }
  }
  strx = s.join("");
  }
  chop = (chop < strx.length-1) ? chop : strx.length-2;
  while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
  strx = strx.substring(0,chop-1);
  return strx+'...';
  }
  
  function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);
  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = summary_noimg;
  if(img.length>=1) {
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
  }
  
  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  div.innerHTML = summary;
  }
  
  //]]>
  </script>

  
  
• সেভ করুন। একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।
  

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

যদি ব্লগে থাকা কোডটি কোন সমস্যা করে, তা থেকে সমাধানের জন্য নতুন কোডটি ডাউনলোডের জন্য আপলোড করে রেখে দিয়েছি।

এখানে ক্লিক করে জিপ ফাইলের ভেতর রাখা কোন সম্বলিত টেক্সট ফাইলটি ডাউনলোড করুন।
ফাইল সাইজ মাত্র ৭৫১ বাইট।

সম্পূর্ণ  →  নিজস্ব ডোমেইনে 'বিস্তারিত পড়ুন' হ্যাক স্থাপন

'বিস্তারিত পড়ুন' সারাংশের ঠিক বামে থাম্বনেইল ছবি দেখানো

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

যাহোক, আমি নিজেই সমস্যাটি আপনাদেরকে দেখিয়ে দিয়ে সমাধান দিচ্ছি।

উপরে দেয়া পদ্ধতি স্থাপন করলে ব্লগের পোস্টগুলির একটু সারাংশ দেখানোর পাশাপাশি যে থাম্বনেইল ছবিটি (ব্লগপোস্টে থাকা প্রথম ছবির) দেখা যায়, তা সাধারণত সারাংশের উপরে থাকে। এতে জায়গা একটু বেশি খরচ হয়ে যায়। কিন্তু 'বাংলা হ্যাকস' ব্লগে খেয়াল করেছেন কি যে, সারাংশর উপরে নয়, ঠিক বামপাশে ছবির থাম্বনেইল দেখা যাচ্ছে। হ্যাঁ, ঠিক ধরেছেন, আমি এটাই বলতে চাচ্ছিলাম। এরকমভাবে পোস্টের সারাংশ দেখানোর জন্য আপনাকে HTML অংশে বসানো কোডের একটি অংশ পরিবর্তন করতে হবে। কিভাবে? তা জানতে নিচে দেয়া পরামর্শ অনুসরণ করুন।

• ব্লগার.কম এ লগইন হয়ে Layout> HTML পাতায় যান।
• সেখানে দেখুন </head> লেখাটির ঠিক উপরে নিচের কোডটুকু (আরও কিছু সহ) বসানো আছে।

• <script src='http://sites.google.com/site/banglahacks/tools/post-summary.js' type='text/javascript'/>

• এখানে বোল্ড করা লিংকটি পাল্টে নিচের লিংকটি বসিয়ে দিন।

• http://sites.google.com/site/banglahacks/shrd/autoreadmorethumb.js

• এবার SAVE TEMPLATE বোতামে চেপে সেভ করুন। একবার PREVIEW দেখে নিতে পারেন।
• # এই পদ্ধতি শুধুমাত্র ফ্রি ব্লগার.কম ব্লগে কাজ করবে।
  

সম্পূর্ণ  →  'বিস্তারিত পড়ুন' সারাংশের ঠিক বামে থাম্বনেইল ছবি দেখানো

ব্লগার পেজলিস্ট মেনু কাস্টমাইজ করা

আমরা জানি যে ইতিমধ্যে ব্লগারে স্ট্যাটিক পেজ তৈরি করার সুবিধা চালু করা হয়েছে। আর এই পেজগুলো দেখানোর জন্য একটি পেজ লিস্ট মেনু Layout > Page Elements ট্যাব থেকে স্থাপন করা যায়। এই পেজলিস্ট মেনু নিয়েই আমাদের আজকের পোস্ট।

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

কিন্তু যদি HTML অংশে সামান্য কিছু কোড লাগিয়ে দেই। তাহলে ব্লগারের স্ট্যাটিকমেনুকে নিজের মনের মতো করে সাজিয়ে গুছিয়ে নিতে পারবো।

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

• যথারীতি Blogger.com এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন হয়ে নিন।
• এবার ]]></b:skin> এই লেখাটুকু খুঁজে বের করুন।
• লেখাটির উপরে নিচের কোডগুলি প্রয়োজনমতো বসিয়ে দিন।
• ডানে নিয়ে যাবার জন্যঃ
• .PageList {text-align:right !important;}
  .PageList li {display:inline-block !important; float:none !important;}
  
• মাঝে রাখার জন্যঃ
• .PageList {text-align:center !important;}
  .PageList li {display:inline-block !important; float:none !important;}
• উপরের কোডগুলি তখনই কাজ করবে, যখন আপনি পেজলিস্ট মেনুকে পোস্ট অংশের উপরে স্থাপন করবেন। কিন্তু যদি সাইডবারে লাগান, তাহলে নিচের কোডগুলি ]]></b:skin> উপরে বসিয়ে দিতে হবে।
• ডানে মার্জিন রাখান জন্য
• .PageList {text-align:right !important;}
• মার্জিন মাঝামাঝি রাখার জন্যঃ
• .PageList {text-align:center !important;}
• পেজলিস্ট মেনুর ব্যাকগ্রাউন্ড রঙ কি পরিবর্তন করতে চান? তাহলে নিচের কোডটি একই জায়গায় বসিয়ে দিন।
• .Pagelist{
  background:#000000;
  color: #ffffff;
  }
• এখানে কালার কোডগুলো কালার চার্ট (Color Chart) থেকে মনের মতো করে বেছে নিতে পারবেন।
  

সম্পূর্ণ  →  ব্লগার পেজলিস্ট মেনু কাস্টমাইজ করা

'বিস্তারিত পড়ুন' লিংককে ডানপাশে নিয়ে আসার পদ্ধতি

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

• 'বিস্তারিত পড়ুন' সুবিধা স্থাপনের যে কোড দুটি আছে, তার দ্বিতীয় কোডটির এক জায়গায় দেখুন লেখা রয়েছেঃ

<a class='readmore' expr:href='data:post.url'>Read More ... »</a>

• এই লাইনটির ঠিক উপরে ও শেষে দুইটি ছোট কোড লিখে দিন। উপরে লিখুন
• <div style='float:right;padding:5px 10px 5px 0px'>
• আর শেষে লিখুন
• </div>
• ব্যাস হয়ে গেল।
• PREVIEW তে ক্লিক করে দেখে নিন কেমন দেখাচ্ছে।
• পছন্দ হলে SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তনটুকু সংরক্ষণ করুন।

Today we will know how to change the position of 'read more' link from left to right side.

সম্পূর্ণ  →  'বিস্তারিত পড়ুন' লিংককে ডানপাশে নিয়ে আসার পদ্ধতি

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

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

প্রথমে 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 লেখাতে ক্লিক করে প্রয়োজনীয় গেজেট বসিয়ে নিন।
• এবার ব্লগ রিফ্রেশ করুন।
• আপনার ব্লগের পোস্ট অংশের পাশে নিচের ছবির মতো আর একটি সাইডবার দেখতে পারবেন।
• 
• আশা করি সব ধাপগুলো ঠিকমতো বর্ণনা করতে পেরেছি।
• উল্লেখ্য যে, সাইডবারের আকার নিজের মনমতো পাল্টে নিতে পারবেন। সে অনুযায়ী ব্লগের আকারেও পরিবর্তন করতে হবে।
  

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

ভাসমান স্থির সাইডমেনু ব্লগার.কম ব্লগে তৈরি করার পদ্ধতি

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

এই কাজের মেনুটি http://www.javascriptkit.com/ এর তৈরি করা। কিন্তু তারা ব্লগার.কম ব্লগের জন্য কোন পরামর্শ দেয়নি। ফলে এটা স্বাভাবিকভাবে স্থাপন করলে মাপ ও সুবিধাগুলো ঠিক থাকতো না। আমি কোডে প্রয়োজনীয় পরিবর্তন করে আপনাদের সুবিধার জন্য মডিফাই করেছি। আপনাদের কাজে লাগলে আমার পরিশ্রম সার্থক হবে।
Today we will learn how to make a floating static menu on blogger blogspot blog.
আমরা এর আগে একটি সহজ মেনুবার তৈরি করার পদ্ধতি জেনেছি। এটা ব্লগের সমান্তরালভাবে হেডারের ঠিক নিচে অবস্থান করতো। এবার আমরা খাড়াখাড়ি একটি মেনুবার তৈরি করবো। উপরে দেয়া ছবিটি দেখুন। ব্লগপোস্ট পড়তে পড়তে স্ক্রল করে পাঠক নিচে চলে আসার সময় এই মেনুটি নিজে থেকেই নিচে চলে আসবে। অর্থাৎ আপনি ব্লগের যে জায়গায় মেনুটি স্থাপন করবেন, ঠিক সেখানেই থেকে যাবে। স্ক্রল করে নিচে আসার সাথে সাথে উপরে ঢেকে যাবে না।

• ব্লগার.কম ড্যাশবোর্ডে গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
• প্রথমেই Layout > Page Elements ট্যাবে চলে যান।
• এখানে একটি HTML/ Javascripts গেজেটে নিচের কোডটুকু স্থাপন করুন।

• <div id="staticmenu" class="wireframemenu" style="left: 10px; top: 20px">
  <ul>
  <li><a href="http://www.banglahacks.com/">Bangla Hacks</a></li>
  <li><a href="http://www.banglahacks.com/search/label/Blogger">Blogger Tips</a></li>
  <li><a href="http://www.banglahacks.com/search/label/Ubuntu">Ubuntu Tips</a></li>
  <li><a href="http://www.banglahacks.com/search/label/Download">Download</a></li>
  <li><a href="http://www.banglahacks.com/2008/08/email-me.html">Email Me</a></li>
  <li><a href="http://www.banglahacks.com/2008/11/blog-post_08.html">Support Me</a></li>
  <li><a href="http://feedburner.google.com/fb/a/mailverify?uri=bhacks&loc=en_US">Subscribe</a></li>
  </ul>
  </div>

• * সেভ করার আগে উপরের কোড অংশটুকুতে তিনটি বিষয় পরিবর্তন করে নিন।
• style=left: 10px; এখানে left বদলে right লিখে দিলে মেনুটি ব্লগের শরীরের ডানপাশে থাকবে।
• top: 20px এর পরিবর্তে 100 বা 200 যেকোন সংখ্যা লিখে দিলে উপর থেকে নিচের দিকে ঠিক সেই জায়গায় থাকবে।
• বাংলা হ্যাকসের লিংক ও এ্যাংকর টেক্সটগুলো পরিবর্তন করে নিজের প্রয়োজনীয় লিংক ও তার নাম লিখে দিন।
• সেভ করার পর চলে যান Layout > Edit HTML অংশে।
• এখানে Expand Widgets Templates এর পাশের চেকবক্সে টিকচিহ্ন দিতে হবে না।
• HTML কোডের মাঝামাঝি ]]></b:skin> লেখাটি খুঁজে বের করুন।
• এই লেখাটুকু সম্পূর্ণ মুছে দিন।
• লেখাটি যে জায়গায় ছিল ঠিক সেই জায়গায় নিচের কোডটুকু স্থাপন করুন।

• .wireframemenu{
  margin-top:20px;
  border: 1px solid #C0C0C0;
  background-color: #ffffff; /*Background color*/
  width: 115px;
  position: absolute;
  }
  
  * html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
  width: 164px;
  }
  
  .wireframemenu ul{
  padding: 4px 3px;
  margin: 0;
  list-style-type: none;
  }
  
  .wireframemenu a{
  font: 14px Verdana;
  padding: 4px 3px;
  display: block;
  width: 100%; /*Define width for IE6's sake*/
  color: #ff0000; /*Link Color*/
  text-decoration: none;
  border-bottom: 1px solid #C0C0C0;
  }
  
  .wireframemenu a:visited{
  color: #595959;
  }
  
  html>body .wireframemenu a{ /*Non IE rule*/
  width: auto;
  }
  
  .wireframemenu a:hover{
  color: #0000ff;
  border-right:2px solid black;
  }
  
  ]]></b:skin>
  
  
  <script type='text/javascript'>
  //<![CDATA[
  
  
  /***********************************************
  * Static Menu script- by JavaScript Kit (www.javascriptkit.com)
  * This notice must stay intact for usage
  * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
  * Modified by: http://www.banglahacks.com
  ***********************************************/
  
  //ids of menus to keep static on page (must be absolutely positioned, with left/top attribute added inline inside tag)
  //Separate multiple ids with a comma (ie: ["menu1", "menu2"]
  var staticmenuids=["staticmenu"]
  
  var staticmenuoffsetY=[]
  
  function getmenuoffsetY(){
  for (var i=0; i<staticmenuids.length; i++){
  var currentmenu=document.getElementById(staticmenuids[i])
  staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
  }
  initstaticmenu()
  }
  
  function initstaticmenu(){
  var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
  for (var i=0; i<staticmenuids.length; i++)
  document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
  setTimeout("initstaticmenu()", 100)
  }
  
  if (window.addEventListener)
  window.addEventListener("load", getmenuoffsetY, false)
  else if (window.attachEvent)
  window.attachEvent("onload", getmenuoffsetY)
  
  //]]>
  
  </script>

  
  
• PREVIEW দেখে নিন। পছন্দ হলে সেভ করুন
• উপরের কোডে আমি /*Background Color*/ এবং /*Link Color*/ লেখা মন্তব্যদুটোকে বোল্ড করে দিয়েছি। এই মন্তব্যদুটোর পাশের কালার কোড কালার চার্ট (Color Chart) থেকে পছন্দ করে নিয়ে পরিবর্তন করে নিতে পারেন।
  

নমুনা দেখুন bhdemo ব্লগে। আশা করি পাঠককে ধরে রাখতে এই মেনুটি আপনাদেরকে সাহায্য করবে।

সম্পূর্ণ  →  ভাসমান স্থির সাইডমেনু ব্লগার.কম ব্লগে তৈরি করার পদ্ধতি

মাউসের ঘুরন্ত লেজ তৈরি করার পদ্ধতি

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

আজ আমরা জানবো এই মজার ও আকর্ষণীয় "মাউসের ঘুরন্ত লেজ তৈরি করার পদ্ধতি"।

ব্লগার.কম এ লগইন করে যে কোন HTML/ Javascript গেজেটে নিচের কোডটি কপি করে পেস্ট করুন। সেভ করুন। ব্যস হয়ে গেল।

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Welcome to Bangla Hacks";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 20;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

কাস্টমাইজেশনঃ

• var size = 24; পরিবর্তন করে ফন্ট সাইজ ছোটবড় করতে পারবেন।
  
• var diameter = 20; এর সংখ্যাটি পরিবর্তন করে বৃত্তের আকার বড় ছোট করতে পারবেন।
• বোল্ড করা টেক্সটের জায়গায় আপনার পছন্দের বাক্য বসিয়ে দিন।
  

কোডটি নেয়া হয়েছে এখান থেকে।

সম্পূর্ণ  →  মাউসের ঘুরন্ত লেজ তৈরি করার পদ্ধতি

উবুন্টুতে ফোল্ডার আইকন সহজে পরিবর্তন করার পদ্ধতি

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

এখানে চারটি ফোল্ডারের আইকন চাররকম। কি অদ্ভূত ব্যাপার তাইনা? অদ্ভূত হলেও এটা কিন্তু বেশ প্রয়োজনীয় হয়ে কখনো কখনো দেখা দেয়। অফিসের কাজ, বাড়ির কাজ, গানের ফোল্ডার, মুভির ফোল্ডার ইত্যাদির ফোল্ডারগুলোর আইকন আলাদা আলাদা রাখলে প্রয়োজনের সময় চট করে খুঁজে পাওয়া বেশ সহজ হয়।

উবুন্টুতে কাজটি করার জন্য যে প্রক্রিয়া অনুসরণ করতে হবে, তা নিম্নরূপঃ

1. যে কোন একটি ফোল্ডারের উপর মাউসের ডানবোতাম ক্লিক করুন।
2. ড্রপ ডাউন মেনু থেকে একেবারে নিচের Properties সিলেক্ট করুন।
3. 
4. বামপাশের ফোল্ডার আইকনটির উপর মাউসের বামবোতামের একটি ক্লিক দিন।
5. পছন্দের ছবি ফাইলটি ব্রাউজ করে সিলেক্ট করুন।
6. Close চাপুন।
7. ব্যাস হয়ে গেল।
   

সম্পূর্ণ  →  উবুন্টুতে ফোল্ডার আইকন সহজে পরিবর্তন করার পদ্ধতি