হ্যালো বন্ধুরা, কেমন আছেন আপনারা? আমি অনেক ভাল। অনেকদিন পর দেখা তাই না? পাক্কা একবছর পর কোন টিউটোরিয়াল লিখতে বসেছি। দিন দিন চরম অলস হয়ে যাচ্ছি। অলসতায় যদি নোবেল প্রাইস দেবার ব্যাবস্থা থাকতো, ১০০% গ্যারান্টি সেটা আমার হাতেই ধরায়ে দিত। 😀
আপনাদের সাথে আমি নিতমিত ছিলাম ও আছি। নিয়মিত আপনাদের পোস্ট পড়ি। কখনো অনেক পোস্ট হয়তো অনেক ভাল লাগে। খুব ইচ্ছে করে কমেন্ট করে এটলিস্ট একটা থাঙ্কস জানিয়ে দিতে। কিন্তু শেষ পর্যন্ত সেটা আর করা হয়ে ওঠে না। কারন একটাই, ঐ অলসতা। 😛 কমেন্ট করতে হলে আবার লগইন করতে হবে তারপর কমেন্ট। আজ অবশেষে লগইন করেই ফেললাম, সেইসাথে একটা টিউটোরিয়ালও। ইচ্ছে আছে এবার সকল অলসতা কাটিয়ে নিয়মিতই রবো আপনাদের সাথে এবং সেই সাথে আপনাদের মাঝে ধারাবাহিক ভাবে শেয়ার করব অনেক মজাদার সব ওয়েব ডেভলোপিং এর জন্য টিপস ও ট্রিকস। যেগুলো ব্যাবহার করে খুব সহজেই আপনি আপনার ওয়েব সাইটকে করে তুলতে পারেন আরো আকর্ষনীয় ও প্রফেশনাল। আশা করি আপনারা সবাই আমার সাথেই থাকবেন এবং ভাল ভাল সব টিউটোরিয়াল করার জন্য উৎসাহ দিয়ে যাবেন।

যাই হোক, মুল কথায় ফিরে আসি। আজ আমি আপনাদের দেখাব কিভাবে আপনার সাইটে কোন কিছুকে ভাসমান অবস্থায় রাখা যায়। প্রথমে এই সাইটটি একটু দেখে আসুন। এটি আমার এক ক্লায়েন্ট এর সাইট। সাইটটিতে ডান পাশে একটা ম্যাসেস বা নোটিশ বোর্ড আছে, যেটা ভাসমান। সাইটটি স্ক্রল করে নিচের দিকে গেলেও নোটিশবোর্ডটি ভাসমান অবস্থা নিচের দিকে চলে আসবে। এবার এই সাইটটি দেখুন। এটিও আমার আর এক ক্লায়েন্ট এর নিউজ ওয়েব সাইট। নিচের দিকে একটা ব্রেকিং নিউজ আছে। যেটা সাইটে সব সময় ভাসমান অবস্থায় আছে। এই সাইটটি দেখুন। এটি মুলত আমার নিজের ওয়েব সাইট। সাইটটিতে ডানদিকে নিচে মানি ব্যাক গ্যারান্টির একটা ম্যাসেজ রয়েছে। সাইটটি স্ক্রল করে নিচের দিকে গেলেও এটি ভাসমান অবস্থায় সব সময় ওখানেই থাকবে।
এখন দেখা যাক এই ধরনের কোন কিছুকে আপনার সাইটে কিভাবে বানাবেন। এর জন্য আমাদের দরকার দুইটা জিনিস, একটা HTML পার্ট। আর একটা CSS পার্ট।
HTML অংশে প্রথমে আপনাকে একটা ডিভ নিতে হবে। এখানে একটা আইডি দিয়ে আপনাকে সিএসএস এর সাথে কানেক্ট করতে হবে। যেকোন একটা নাম বা আইডি দিতে পারেন আপনার পছন্দ মত। রহিম, করিম, কুদ্দুস, মফিস, আবুল, আপনার যা ইচ্ছে। ধরুন আমি দিলাম "razibwrapper" । তাহলে আমাদের ডিভ কোডটি দাড়ালো এরকমঃ

<div id="razibwrapper">

<div>

এই ডিভের মাঝে আপনাকে মুল HTML কোড টি দিতে হবে, যা আপনি ভাশমান অবস্থায় রাখতে চান। ধরুন আমি একটি ইমেজ ভাশমান অবস্থায় দিতে চাই। ঐ ইমেজটির জন্য html কোড হবে অনেকটা এরকমঃ
<img alt="" src="http://i.imgur.com/34S2hri.png" />

এখন আমাদের পুরো কোডটি দাঁড়ায় এরকমঃ

<div id="razibwrapper">

<img alt="" src="http://i.imgur.com/34S2hri.png" />

<div>

এখন আমাদের দরকার একটা সি এসএস পার্ট, যেটা আমাদের এই কোডটুকুকে ভাশমান অবস্থায় কমান্ড করবে। তাহলে দেখা যাক সিএসএস অংশটা আমাদের কি রকম হবেঃ

প্রথমেই CSS অংশ লেখার জন্য এরকম একটা ট্যাগ দিয়ে নিলেমঃ

<style>

</style>

এর মধ্যে আমাদের CSS অংশটুকু লিখতে হবে। HTML অংশটুকুকে কল করার জন্য আমাকে এখানে ঐ আইডি দিয়ে চিনিয়ে নিতে হবে। যেমনঃ

#razibwrapper{

position: fixed;

width: 300px;

height: 185px;

bottom: 0px;

left: 0px;

}

পুরো কোডটি হবে এরকমঃ

<style>

#razibwrapper{

position: fixed;

width: 300px;

height: 185px;

bottom: 0px;

left: 0px;

}

</style>

এখানে #razibwrapper দিয়ে HTML অংশটিকে চিনিয়ে দেয়া হয়েছে। position: fixed; মানে এই HTML অংশটা সব সময় ফিক্সড অবস্থায় থাকবে।

width: 300px;

height: 185px; মানে এই অংশের সাইজ ( ওয়াইড ও হাইট) কত হবে তা বলা হয়েছে।

bottom: 0px;

left: 0px;

এই অংশটি খুব গুরুত্বপুর্ন। এই অংশটি দিয়ে এই ভাশমান অংশটি সাইটের কথায় দেখা যাবে তা বলা হয়েছে। bottom: 0px; এটি আপনার সাইটের একেবারে নিচে অবস্থান করবে এবং left: 0px; মানে এটি একেবারে বাম পাশে অবস্থান করবে। আপনি চাইলে এখানে মান পরিবর্তনের মাধ্যমে অবস্থান চেঞ্জও করতে পারেন। ধরুন এটি নিচ থেকে ১০০ পিক্সেল উপরে দিতে চান, তাহলে বোটম দিন bottom: 100px; আশা করি ব্যাপারটা বুঝতে পেরেছেন।

এখন কোড দুটি ( html ও css অংশ) আপনার সাইটে কপি পেস্ট করুন। ওয়ার্ডপ্রেস সাইটের ক্ষেত্রে আপনি চাইলে আপনার ড্যাশবোর্ড থেকে ইউজেট মেনুতে গিয়ে টেক্সট ইউজেটেও কোডটি বসাতে পারেন অথবা appearance থেকে edit এ ক্লিক করে header.php এডিট করুন। সব কোড এর একেবারে শেষে এই কোড দুটি পেস্ট করে সেভ দিন। সর্বশেষে এই ইমেজটি দেখতে হবে এরকম।

চলুন এবার আর একটি কোড দেখা যাক।

<div id="razibwrapper1">

<table style="height: 300px; ; width: 250px;" border="0">
<tbody>
<tr>
<td style="border-color: #020a80; background-color: #0478e3; width: 250px; height: 50px; border-style: solid; border-width: 1px; text-align: center;"><span style="font-size: large; color: #ffffff;"><strong>Notice Board</strong></span></td>
</tr>
<tr>
<td style="background-color: #84c3fd; border-color: #020a80; border-style: solid; border-width: 1px; text-align: center;"><strong>This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content. This is Notice board test content.</strong></td>
</tr>
</tbody>
</table>

</div>

এখানে দুইটি সেল এর একটা টেবিল নিয়েছি, যেটি আমি নোটিশবোর্ড হিসেবে ব্যাবশার করব। প্রথম রোতে আমি হিডার দিয়েছি এবং ২য় রোতে নিয়েছি কন্টেন্ট অংশ। পুরো টেবিলটি একটি ডিভের ভেতরে দিয়ে নিয়েছি। এখন এই অংশের জন্য আমি css কোড নিলাম এরকমঃ

<style>

#razibwrapper1{

position: fixed;

width: 250px;

height: 300px;

bottom: 0px;

right: 0px;

}

</style>

এখানে সবই ঠিক রেখেছি, শুধু আইডি চেঞ্জ করেছি এবং অবস্থান নিয়েছি রাইট সাইটে। অর্থাৎ এটি ওয়েব সাইটের ডান পাশে অবস্থান করবে। আশা করি কোড দেখে আপনারা পুরোটা বুঝতে পারবেন। কোথাও বুঝতে সমস্যা হলে অবশ্যই কমেন্ট করে জানাবেন। আমি তো আছিই।

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