সাইডবারের লিংকগুলোকে ঠেলে সরিয়ে দেয়া

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

সুবিধাবলীঃ

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

আসুন তাহলে এই ইফেক্টটি নিজেদের ব্লগে স্থাপন করে নেয়ার নিয়মটা জেনে ফেলি।

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