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

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

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