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

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

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