আসসালামুআলাইকুম

সবাইকে শুভেচ্ছা জানিয়ে শুরু করছি কিভাবে ব্লগারে  Jquery ব্যবহার করে 'উপরে ফিরে আসুন' বোতাম তৈরিকরেবেন।

আসা করি আপনারা ভালকরে বুঝবেন। যদি কোন সম্যসা হয় তাহলে কমান্ড করতে ভুলবেন না কিন্তু। আর আমার সাইট থেকে ও ঘুরে আসতে পারেন।

আমরা এর আগে 'উপরে ফিরে আসুন' (Back to top) জাতীয় বোতাম (Button) ব্লগে স্থাপন করার পদ্ধতি জেনেছিলাম। সেই পদ্ধতিটি যেভাবে তৈরি করা হয়েছে, এবারের পদ্ধতিটি তার চাইতে কিছুটা আলাদা। এই নতুন বোতামটি ব্লগের উপরে থাকা অবস্থায় দেখা যায় না। লুকিয়ে থাকে (Hide)। স্ক্রল (Scroll) করে ব্লগের একটু নিচের দিকে নামলেই ভেসে ওঠে। তখন দেখা যায়। শুধু তাই নয়। আগের বোতামটির উপরে ক্লিক করলে এক লাফে ব্লগের উপরে চলে আসতো। কিন্তু এই নতুন বোতামটিতে ক্লিক করলে কিছুটা ধীরে ধীরে ব্লগের উপরে চলে আসা যায়। এই কাজটি করা হয়েছে JQuery Code দিয়ে। কয়েকটি ছোট কোড স্থাপন করে আমরা নিজেদের ব্লগে এই ধরণের একটি বোতাম স্থাপন করতে পারি। আগের বোতামটি তৈরিতে আমরা ছোটসাইজের উর্ধমুখী (Up) তীরচিহ্নযুক্ত ছবি (Image) ব্যবহার করেছিলাম। কিন্তু এবার আর তা করবো না। এবার টেক্সট (Text) দিয়েই কাজ সারবো।

• ব্লগার.কম (Blogger.com) এ গুগল আইডি ও পাসওয়ার্ড (Google ID and Password) দিয়ে প্রবেশ করুন।
• Layout> Edit HTML পাতায় যান। এখানে
• এবার ]]></b:skin> লেখাটির উপরে নিচের কোডটি স্থাপন করুন।

• /* to top */
  #toTop { width:100px;background:#00FFFF;border:1px solid #000;text-align:center;
  padding:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#000;text-decoration:none; }

• এবার </head> এর উপরে নিচের কোডটি স্থাপন করুন।

• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
  <script type='text/javascript'>
  /*-----------------------
  * jQuery Plugin: Scroll to Top
  * by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
  * Bring to you by: http://www.banglahacks.com
  * Copyright (c) 2009 Ph.Creative Ltd.
  * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
  * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
  * Do not delete these infomation
  * Version: 1.0, 12/03/2009
  -----------------------*/

  $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

  $(function() {
  $("#toTop").scrollToTop();
  });
  </script>

• এবার HTML পাতাটির একেবারে নিচে চলে যান।
• এখানে </body> লেখাটির ঠিক উপরে নিচের কোডটি স্থাপন করুন।

• <a href="#" id="toTop">^ Back to Top</a>

• SAVE করুন।
• পূর্বে প্রকাশিত হয় আমার ব্লগে http://www.bdwebdesign.tk বিডি ওয়েব ডিজাইন