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

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

আমরা এর আগে মার্চ মাসে 'ব্লগার ডিজাইনার' দিয়ে নিজের টেমপ্লেট নিজেই সম্পাদনা করার কথা জেনেছিলাম। তখন সুবিধাটি শুধুমাত্র draft.blogger.com ঠিকানায় পাওয়া যেত। কিন্তু এখন এই সুবিধাটি সবার জন্য উন্মুক্ত করা হয়েছে। এখন থেকে ব্লগার টেমপ্লেট ডিজাইনার সুবিধাটি blogger.com ঠিকানাতেও পাওয়া যাবে।

• গুগল আইডি ও পাসওয়ার্ড দিয়ে Blogger.com এ লগইন করুন।
• দেখতে পারবেন যে, আগের Layout ট্যাবটির নাম পরিবর্তন করা হয়েছে।
• এখন এর নাম Design, এখানে 'Template Designer' নামক নতুন একটি ট্যাব দেখা যাচ্ছে।

ইতিমধ্যে এই সুবিধাটিতে বেশ কিছু পরিবর্ধন ও পরিমার্জন করা হয়েছে। যেসব পরিবর্তন ইতিমধ্যে করা হযেছে সেগুলো হলঃ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ডাইরেক্ট লিংক কাকে বলেঃ
ডাইরেক্ট লিঙ্ক হল কোন ফাইলের সরাসরি লিংক। এটা সাধারণত নির্দিষ্ট ফাইলকে সরাসরি পয়েন্ট করা হয়। তাই অনেকে এই লিংককে 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 লেখাটুকু মুছে দিন। আর নির্দিষ্ট জায়গায় ডাইরেক্ট লিংকটি প্রয়োগ করুন।

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

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

পোস্ট প্রিভিউ দেখে বুঝে নিন প্রকাশ হলে কেমন দেখাবে

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

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

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

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

তবে এই সুবিধাটি আপাতত draft.blogger.com যারা ব্যবহার করেন, তাদের জন্যই উন্মুক্ত করা হয়েছে। সবার জন্য এখনও এই সুবিধাটিকে কার্যকরী করা হয়নি। অর্থাৎ কিছু ত্রুটি থেকে গেছে। নিজ দায়িত্বে ব্যবহার করুন।

সম্পূর্ণ  →  পোস্ট প্রিভিউ দেখে বুঝে নিন প্রকাশ হলে কেমন দেখাবে

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

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

• গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগারে লগইন করুন।
• 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) গেজেট
  যদি আপনার ব্লগে লাগানো থাকে তাহলে ওই লাইনটি বাদ দিয়েই বাকী কোডগুলো বসিয়ে দিন।
  

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

আপনার ব্লগার প্রোফাইল সম্পাদনা ও শেয়ার করুন

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

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

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

• Privacy - এটা প্রধান শিরোনাম। এই শিরোনামের অন্তর্গত অংশে আপনার ব্যক্তিগত তথ্যাদি শেয়ার করার জন্য যোগ করতে হবে।
  
• 
  
• Share my profile - পাশে টিক চিহ্ন দিয়ে দিলে আপনার প্রোফাইল অন্যরা দেখতে পারবে।
  
• Show my real name - পাশে টিক দিয়ে দিলে আপনার সম্পূর্ণ নাম সবাই দেখতে পারবে।
  
• Show my email address - টিক চিহ্ন দিয়ে রাখলে আপনার ইমেইল আইডি সবাই দেখতে পারবে। আমি এটাকে সাধারণত ডিস্যাবল করে রাখি। আপনার আপত্তি না থাকলে এখানে টিক চিহ্ন দিয়ে দিতে পারেন।
  
• Show my blogs- এখানে ক্লিক করলে আর একটি পাতায় চলে যাবেন। আপনি একই গুগল আইডি দ্বারা যতগুলো ব্লগ খুলবেন, সবগুলোর নাম এখানে লেখা থাকবে। যেসব ব্লগ ঠিকানা আপনি অন্যদেরকে সরাসরি জানাতে চান না, সেগুলোর নামের পাশে থাকা টিকচিহ্নটি উঠিয়ে দিন। যদি আপনার আপত্তি না থাকে, অর্থাৎ আপনি সবগুলো ব্লগঠিকানা সবাইকে জানাতে চান, তাহলেসবগুলো ব্লগের নামের পাশের চেকবক্সে টিকচিহ্ন দিয়ে দিন।
  
• Show sites I follow - এখানে টিকচিহ্ন দিয়ে দিলে যেসব ব্লগ আপনি ফলো করছেন, সেগুলো দেখা যাবে।
• 
  
• Identity - এটা প্রধান শিরোনাম। এই শিরোনামের অন্তর্গত বিভিন্ন অংশে প্রয়োজনীয় তথ্য লিখে দিতে হবে।
  
• 
  
• Username - আপনার নাম। এটা পরিবর্তনযোগ্য নয়।
  
• Email Address - ইমেইল ঠিকানা।
  
• Display Name - আপনি যে নামটি সবাইকে দেখাতে চান, তা এখানে লিখুন।
  
• First Name - আপনার নামের প্রথম অংশ।
  
• Last Name - নামের শেষ অংশ।
• 
  
• Photograph - এটা প্রধান শিরোনাম। এই জায়গায় আপনার একটা ছবি বা অবতার সরাসরি আপলোড করতে পারেন।
• 
  
• Photo URL - অনলাইনে থাকা কোন ছবির ডাইরেক্ট লিংক এখানে দিয়ে দিতে পারেন।
• 
  
• Audio Clip - এটা প্রধান শিরোনাম। কোন গান বা মিউজিক ফাইল এখানে দিতে হবে।
• 
  
• Audio Clip URL - অনলাইনে থাকা কোন গানের ডাইরেক্ট লিংক এখানে দিয়ে দিন। আপনার প্রোফাইল ভিজিট করাকালীন ভিজিটর গানটি বাজিয়ে শুনতে পারবেন।
• 
  
• General - এটা প্রধান শিরোনাম। সাধারণ কিছু তথ্য এখানে লিখে দিন।
  
• 
  
• Gender - আপনি পুরুষ নাকি নারী তা এখানে উল্লেখ করে দিন।
  
• Birthday - আপনার জন্মতারিখ এখানে উল্লেখ করুন। আপনি ইচ্ছে করলে সাল উল্লেখ নাও করতে পারেন। জন্মতারিখ লেখার জায়গার ঠিক নিচে লেখা রয়েছে 'Show astrological signs' আপনি কি আপনার রাশি অন্যদেরকে জানাতে চান? তাহলে এই অংশের পাশের চেক বক্সে টিক চিহ্ন দিয়ে দিন।
  
• Homepage URL - আপনার মূল ওয়েবসাইট বা ব্লগের ঠিকানা এখানে লিখে দিন।
  
• Wishlist URL - আপনার যেসব পণ্য কিনতে চান, সেই ইচ্ছাতালিকার লিংক এখানে দিতে পারেন। যদি কোন লিংকপেজ তৈরি করা না থাকে, তাহলে 'Create a wishlist' লেখাতে ক্লিক করে একটি Shopping List তৈরি করতে পারেন।
  
• IM Username - ইনস্ট্যান্ট মেসেঞ্জারে যে নাম ব্যবহার করেন, তা এখানে লিখে দিন।
• 
  
• Location - এটা প্রধান শিরোনাম। আপনার অবস্থান এখানে লিখে দিতে হবে।
  
• 
  
• City/Town - আপনার শহরের নাম এখানে লিখুন।
  
• Region/State - কোন এলাকায় আপনার বাস।
  
• Country - কোন দেশে আপনার বসবাস, তা এখানে ড্রপডাউন মেনু থেকে বাছাই করুন।
• 
  
• Work - এটা প্রধান শিরোনাম। এখানে প্রয়োজনীয় তথ্যগুলো টাইপ করে লিখে দিতে হবে।
  
• 
  
• Industry - আপনার কাজের কর্মক্ষেত্র কি, তা এখানে লিখুন।
  
• Occupation - আপনি কোন পদে কাজ করছেন, আপনার পদমর্যাদা কি তা এখানে লিখতে হবে।
  
• 
  
• Extended Info - এটা প্রধান শিরোনাম। কিছু অতিরিক্ত তথ্য এখানে লিখতে পারেন।
• 
  
• Interests - আপনার আগ্রহের বিষয়গুলো এখান লিখে দিন।
  
• About Me - নিজের সম্পর্কে দু'এক ছত্র লিখুন।
  
• Favorite Movies - প্রিয় সিনেমা কি কি, তা লিখতে পারেন।
  
• Favorite Music - পছন্দের গান কোনগুলো, তার প্রথম লাইন এখানে লিখে দিন। সিনেমা ও গানের নাম একাধিক লিখতে পারবেন।
  
• Favorite Books - প্রিয় বই কি কি? কোন কোন বই আপনি পড়তে পছন্দ করেন, কোন বইগুলো বারবার পড়তে ইচ্ছে করে, কোন বইগুলো আপনি পড়তে চান সেগুলোর নাম এখানে লিখে দিন।
  
• Random Question - এলোমেলো প্রশ্ন। এই বিষয়টির সঠিক ব্যাখ্যা আমার জানা নেই। আপনার জানা আছে কি? মন্তব্য আকারে শেয়ার করুন।

প্রোফাইল ব্যবহারের সুবিধাঃ

• নিজের সম্পর্কে একটা বিস্তারিত তথ্য অন্যদেরকে জানাতে পারছেন।
• নিজের তথ্যগুলো লিংক হিসেবে কাজ করবে। ফলে ব্লগারে থাকা অন্য ব্যবহারকারীদের মধ্যে যাদের সাথে আপনার পছন্দ মিলে যাবে, তারা একই তালিকাভুক্ত হয়ে যাবে।
• Extended info তে নিজের পছন্দের সিনেমা, গান, বই অন্য আর কারও পছন্দের কিনা, তা তাৎক্ষণিকভাবে জানা যাবে। ফলে বন্ধু বাছাই করতে খুব একটা কষ্ট হবে না।

আমার ব্লগার প্রোফাইলের লিংক

সম্পূর্ণ  →  আপনার ব্লগার প্রোফাইল সম্পাদনা ও শেয়ার করুন

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

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

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

ব্লগার ব্লগের জন্য একটি উপকারী টপবার

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

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

এই প্রয়োজনীয় ওয়েবটুলটি সরবরাহ করছে Apture নামক ওয়েবসাইটটি। সাইটটিতে ভিজিট করলেই একটি কার্যকরী ডেমো দেখতে পারবেন। পাশাপাশি নিজের সাইটের বা ব্লগের জন্য মনের মতো রঙ দিয়ে একটি টপবার তৈরি করেও নিতে পারবেন। তবে প্রয়োজনীয় কোডটুকু নিতে আপনাকে লগইন করতে হবে।
উপরের ছবিতে দেখুন। প্রয়োজনীয় ঘরগুলো তথ্য দিয়ে পূরণ করুন। স্বয়ংক্রিয়ভাবে আপনার জন্য তৈরিকৃত টপবারটির একটি প্রিভিউ দেখা যাবে।

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

টপবারটি যে সাইট থেকে নিতে হবে তার ঠিকানাঃ http://www.apture.com/

সম্পূর্ণ  →  ব্লগার ব্লগের জন্য একটি উপকারী টপবার

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

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

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

• যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
• এবার 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) গেজেট

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

আমরা ব্লগারের ব্লগে খুব সহজে পোস্টের শেষে "বিস্তারিত পড়ুন" হটলিংক স্থাপন করার পদ্ধতি আগেই শিখেছি। এটা বেশ জনপ্রিয় একটি ব্লগার হ্যাক। ব্লগার.কম এর ফ্রি ব্লগে এই কোডটি খুব ভালভাবে কাজ করে। কিন্তু আপনি যদি 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 দেখে নিতে পারেন।
• # এই পদ্ধতি শুধুমাত্র ফ্রি ব্লগার.কম ব্লগে কাজ করবে।
  

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

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

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

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

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

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

ব্লগার সাইডবারে ফিড, সাবস্ক্রিপশন ইত্যাদির লিংকবার

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

• যথারীতি ব্লগার.কম এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
• Layout> Edit HTML অংশে যান।
• সেখানে আমার ব্লগের ক্ষেত্রে যে জায়গায় লাগিয়েছি তার কোড নিম্নরূপ:
• <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
• আপনার ক্ষেত্রে একটু ভিন্ন হতে পারে। সাইডবারের নাম্বারে কমবেশি থাকতে পারে। একটু দেখেশুনে বুঝে এই কোডের ঠিক পরের লাইনে নিচের কোড লাগিয়ে দিন।
• <b:widget id='HTML30' locked='false' title='Feed Section' type='HTML'>
  <b:includable id='main'>
  <b:if cond='data:title'/>
  <div class='widget-content'>
  <img align='absmiddle' border='0' src='http://sites.google.com/site/banglahacks/shrd/feed-icon.gif'/> <a href='http://feeds.feedburner.com/bhacks' target='_blank'>RSS Feed</a>
  <img align='absmiddle' border='0' src='http://sites.google.com/site/banglahacks/shrd/mailfeed.gif' style='padding:0px 0px 0px 5px;'/> <a href='http://feedburner.google.com/fb/a/mailverify?uri=bhacks&loc=en_US' target='_blank'>Email Subscription</a>
  <img align='absright' border='0' src='http://sites.google.com/site/banglahacks/shrd/bfrnd.png' style='padding:0px 0px 0px 5px;'/> <a href='http://www.blogger.com/follow-blog.g?blogID=2244906786709794302' target='_blank'>Be Friend</a>
  </div>
  </b:includable>
  </b:widget>
• এখানে বোল্ড করা শব্দগুলো পরিবর্তন করুন।
• আশা করি সাইডবারের এই লিংকবারটির মাধ্যমে পাঠকরা আপনার ব্লগের সাথে আরও বেশি সম্পর্কিত থাকবে।
  

সম্পূর্ণ  →  ব্লগার সাইডবারে ফিড, সাবস্ক্রিপশন ইত্যাদির লিংকবার

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

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

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