ওয়েব ডিজাইন শর্ট টেকনিক [পর্ব-০৪] :: ওয়েব সাইটে যুক্ত করুন ফুল পেজ কাস্টম স্ক্রলবার

ওয়েব ডিজাইন শর্ট টেকনিকের ৪র্থ পর্বে সবাইকে স্বাগতম । এমন অনেকেই আছেন অনেক দিন ধরে ওয়েব ডিজাইন শিখতেছেন, কিন্তু মনে হয় কিছুই শেখা হয়নি। বিভিন্ন মর্ডান ওয়েব সাইটের বিভিন্ন ইলিমেন্ট দেখে মনে হয় এই অসাধারণ জিনিসগুলো কিভাবে তৈরি করা যায়? এগুলো কিভাবে কাজ করে? এই ধরণের প্রশ্নগুলো যাদের মনে সারাক্ষণ উদয় হয় তাদের জন্যই এই “ওয়েব ডিজাইন শর্ট টেকনিক ” ।

আমার মত যারা একটু অলস প্রকৃতির, অল্প শিখেই অনেক কিছু করে ফেলতে চান তাদেরকে ওয়েব ডিজাইন শর্ট টেকনিকে সাদর আমন্ত্রণ ।

আজ ৪র্থ পর্বে থাকছে যে কোন ওয়েব সাইটে কিভাবে   ফুল পেজ কাস্টম স্ক্রলবার যুক্ত করা যায়  তার শর্ট টেকনিক।

প্রথম ধাপ :

  • প্রথমে দেখেনিন আপনার ওয়েব সাইটের টেমপ্লেট ফোল্ডারের মধ্যে js এবং css নামে কোন ফোল্ডার আছে কিনা?

  • না থাকলে js এবং css নামে ফোল্ডার দুটি তৈরি করে নিন।

২য় ধাপ :

৩য় ধাপ :

  • যদি আগে থেকেই টেমপ্লেট ফোল্ডারের মধ্যে plugins.js নামে কোন ফাইল খাকে শুধুমাত্র সেক্ষেত্রে plugins.js ফাইল ওপেন করে শেষে বা শুরুতে নিচের কোড টুকু যুক্ত করুন।
/* ==============Full Page scrolbar======================*/

(function($){
$(window).load(function(){

$("body").mCustomScrollbar({
theme:"minimal"
});

});
})(jQuery);
/* ==============Full Page scrolbar======================*/

*** টেমপ্লেট ফোল্ডারের মধ্যে plugins.js নামে কোন ফাইল না থাকলে ৩য় ধাপটি উপেক্ষা করুন।

৪র্থ ধাপ :

  • আপনার ওয়েব সাইটের টেমপ্লেটর  </body> অর্থাৎ body ট্যাগের ending tag খুঁজে বের করুন।
  • এরপর নিচের কোডটুকু যুক্ত করুন।
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.mCustomScrollbar.js"></script>
<script src="js/plugins.js"></script>

  • এর মাধ্যমে jQuery , plugins.js এবং jquery.mCustomScrollbar.js ফাইলকে HTML এ যুক্ত করা হচ্ছে।

৫ম ধাপ

এখন নিচের ছবির মত <body> tag এ class="full-page" যুক্ত করুন।

৬ষ্ঠ ধাপ:

  • নিচের কোডটুকু আপনার টেমপ্লেটের style.css এ যুক্ত করুন।
/*===============Scrolbar css===========*/
html, body{ height: 100%; }
/*===============Scrolbar css===========*/

সোর্স ফাইল ডাউনলোড করুন

http://www.mediafire.com/download/1coygbe9qhg7t4j/full_page_scrolbar.zip

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

আশা করছি সবাই ওয়েব সাইটে ফুল পেজ কাস্টম স্ক্রলবার যুক্ত করতে সক্ষম হবেন। কোন সমস্যা হলে টিউমেন্ট করুন।

সবাইকে ধন্যবাদ । শুভকামনা রইলো।

Level 2

আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

বেশ সুন্দর। ধন্যবাদ 🙂

    @প্রীতম চক্রবর্তী: ধন্যবাদ ভাই। শুভকামনা রইলো।