ব্লগারের ব্লগে Table of Contents স্থাপন করার পদ্ধতি

'বাংলা হ্যাকস' ব্লগের মেনুবারে একটি নতুন বোতাম যোগ হয়েছে। নাম 'Table of Contents', এই লিংকটিতে ক্লিক করে দেখুন। সূচনা থেকে আজ পর্যন্ত বাংলা হ্যাকস ব্লগের সবকটি পোস্টের লিংক ১, ২, ৩ ক্রমিক নম্বর ধারাবাহিকভাবে দেখিয়ে একটিমাত্র পাতায় প্রদর্শিত হচ্ছে। সেই সাথে পোস্টের তারিখ ও সংশ্লিষ্ট লেবেলও পোস্টের নামের সাথে সংযুক্ত হয়েছে। অনেকগুলো পোস্ট রয়েছে এরকম একটি কার্যকরী ব্লগে এরকম একটি সম্পূর্ণ সূচী থাকা খুব প্রয়োজন। তাহলে একটি মাত্র পেজ ভিজিট করেই ভিজিটররা ব্লগের সবকটি পোস্টের লিংক পেয়ে যাবেন। সেখান থেকে পছন্দমতো যে কোন পোস্টকে পড়ার জন্য বেছে নিতে পারবেন। আজ আমরা এরকম একটি Table of Contents নিজেদের ব্লগে কিভাবে স্থাপন করতে পারি, তার পদ্ধতি জানবো।Add a table of contents in your blog. It is very essential feature for your professional blog.

• ব্লগার.কম (Blogger.com) এ সংশ্লিষ্ট ইউজার নাম ও পাসওয়ার্ড (User name and password) দিয়ে লগইন (login) করুন।Login in blogger.com with your user id and password.
  
• পোস্ট এডিটরে গিয়ে একটি নতুন পোস্ট নিন। এর নাম দিন 'Table of Contents' অথবা 'TOC' অথবা আপনার যা পছন্দ। এই পোস্টটিতে কিছু লিখবেন না। একেবারে ফাঁকা পোস্ট পাবলিশ করতে হবে।
  
• এবার এই পদ্ধতি মোতাবেক পোস্টটিকে পুরনো কোন একটি তারিখে (Older date) প্রকাশ করুন। এই বিষয়টা গুরুত্বপূর্ণ কারণ বর্তমান সময়ে প্রকাশ করলে তা ব্লগের প্রথম পৃষ্ঠাতেই প্রদর্শিত হবে। তা আবার দেখতে ভাল হবে না।Publish this post in older date. Write down the post url. we will need it later. Write down the post url anywhere. This will be a blank post.
  
• Toc নামের নতুন পোস্টটির URL কোথাও লিখে রাখুন। এই লিংকটি এরকম হতে পারে http://www.banglahacks.com/2009/04/table-of-contents.html
• মনে রাখতে হবে যে পোস্টটি প্রকাশ করবার পূর্বে তাতে মন্তব্য করার সুবিধা বন্ধ করে দিন। পোস্ট এডিটরের নিচে বামপাশের Post Options লেখা লিংকে ক্লিক করে মন্তব্য করার সুযোগ বন্ধ করে দিতে পারবেন। Reader Comments এর নিচে Don't Allow এর পাশের রেডিও বোতামে ক্লিক করে চিহ্ন দিয়ে দিন।
• আমরা একটি পোস্টপেজ পেয়েছি, যেখানে Table of Contents প্রদর্শিত হবে।
• এবার Layout> Edit Html ট্যাবে চলে যান। মনে রাখুন যে- "Expand Widget Templates" এর পাশে ক্লিক করতে হবে না।Don't need to expand widget templates. search head on edit html page.
  
• এখানে </head> লেখাটি খুঁজে বের করুন।
  
• এর ঠিক উপরে নিচের কোডটি সম্পূর্ণ স্থাপন করুন।
• 
  

  <b:if cond='data:blog.url == "http://www.banglahacks.com/2009/04/table-of-contents.html">
  <style>
  
  #toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:100%;
  margin-top:10px;
  }
  .toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ddd;
  color: #000000;
  padding-left: 5px;
  width:50%px;
  }
  .toc-header-col2 {
  width:15%;
  }
  .toc-header-col3 {
  width:25%px;
  }
  .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
  font-size:93%;
  text-decoration:none;
  }
  .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:93%;
  text-decoration:underline;
  }
  
  .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:93%;
  }
  .post{display:none;}
  .comments-block{display:none;}
  .comment-form{display:none;}
  .comment-footer{display:none;}
  .blog-pager{display:none;}
  .date-header{display:none;}
  .feed-links{display:none;}
  .comments{display:none;}
  </style>
  </b:if>
  

  
  
• এই কোডের লাল রঙে লেখা লিংকটি পাল্টে আপনার ব্লগের Table of contents পাতার লিংকটি লিখে দিন।
• এবার নিচের কোডটি (Code) খুঁজে বের করুন।

• <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  

• এই কোডটির ঠিক নিচে নিচের কোডটি দিয়ে স্থাপন করুন।Replace the code with this.
  

• <b:widget id='HTML345' locked='false' title='Table Of Contents' type='HTML'>
  <b:includable id='main'>
  <b:if cond='data:blog.url == "http://www.banglahacks.com/2009/04/table-of-contents.html">
  <h2 class='title'>Blog Table Of Contents</h2>
  <div class='widget-content'>
  <div id='toc'><img src='http://bloggerplugins.org/me/ajax-loading.gif'/>Loading The TABLE OF CONTENTS...</div>
  </div>
  <b:include name='quickedit'/>
  </b:if>
  </b:includable>
  </b:widget>
  

• এখানেও লাল রঙের লাইনটি পাল্টে আপনার ব্লগের Table of Contents পাতাটির লিংক লিখে দিন।
  
• এবার Edit HTML পাতার একেবারে নিচের দিকে </body> লেখাটি খুঁজে বের করুন। এর ঠিক উপরে নিচের কোডটি স্থাপন করুন।add this code just before the body.change the red sentence.
  

• <b:if cond='data:blog.url == "http://www.banglahacks.com/2009/04/table-of-contents.html">
  <script style="text/javascript" src="http://sites.google.com/site/banglahacks/tools/blog-toc.js"></script>
  <script src="http://www.YOUR BLOG URL/feeds/posts/default?alt=json-in-script&max-results=500&callback=loadtoc"></script>
  <script src="http://www.YOUR BLOG URL/feeds/posts/default?alt=json-in-script&start-index=501&max-results=500&callback=loadtoc"></script>
  <script src="http://www.YOUR BLOG URL/feeds/posts/default?alt=json-in-script&start-index=1001&max-results=500&callback=loadtoc"></script>
  <script type="text/javascript">showToc();</script>
  </b:if>
  

• এখানেও লাল রঙের লাইনটি পাল্টে আপনার ব্লগের Table of Contents পাতাটির লিংক লিখে দিন।
• YOUR BLOG URL লেখাটি পাল্টে আপনার ব্লগের ওয়েব ঠিকানাটি লিখে দিন। এটা এরকম হতে পারে xxxxxxx.blogspot.com
• এবার সেভ (Save) করুন।Now save the changes. Open the page in other tab in firefox.
  
• ব্রাউজারের অন্য ট্যাবে (Tab) আপনার ব্লগের Table of Contents পাতাটি খুলুন।
• আপনার ব্লগে শুরু থেকে আজ পর্যন্ত সবকটি পোস্টের লিংক ধারাবাহিকভাবে (Serially) প্রদর্শিত হচ্ছে।
• এবার ব্লগের সাইডবার (Sidebar) বা মেনুবারে (Menubar)এই পাতাটির একটি লিংক (Link) রেখে দিন। লিংক লেখার নিয়ম জানুন এই পোস্ট থেকে।Add a link on your sidebar of menubar. Visitor will get it from there.
  
• ব্লগের জন্য এই বিশেষ ফিচারটি (Feature) নেয়া হয়েছে এই পোস্ট থেকে।

আপডেট:  কোন কোন ব্লগার এই টিউটোরিয়ালটি স্থাপন করতে গিয়ে সমস্যায় পড়েছেন। তাদেরকে জানাই:

আপনারা এই লিংকে থাকা জিপ ফাইলটি (Size: 2.1 KB) ডাউনলোড করুন। ভিতরে থাকা টেক্সট ফাইলটিতে দেয়া বর্ণনা অনুসরণ করুন। আশা করি এবার আর কোন সমস্যা হবে না। এরপরও কোন সমস্যা হলে জানাতে দ্বিধা করবেননা।