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







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

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



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

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



#razibwrapper{



position: fixed;



width: 300px;



height: 185px;



bottom: 0px;



left: 0px;



}



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

এখানে #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 এডিট করুন। সব কোড এর একেবারে শেষে এই কোড দুটি পেস্ট করে সেভ দিন। সর্বশেষে এই ইমেজটি দেখতে হবে এরকম।



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

Notice Board

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.

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

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



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

১০ টি +১/-০