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

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

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