হ্যালো বন্ধুরা, কেমন আছেন আপনারা? আমি অনেক ভাল। অনেকদিন পর দেখা তাই না? পাক্কা একবছর পর কোন টিউটোরিয়াল লিখতে বসেছি। দিন দিন চরম অলস হয়ে যাচ্ছি। অলসতায় যদি নোবেল প্রাইস দেবার ব্যাবস্থা থাকতো, ১০০% গ্যারান্টি সেটা আমার হাতেই ধরায়ে দিত।
আপনাদের সাথে আমি নিতমিত ছিলাম ও আছি। নিয়মিত আপনাদের পোস্ট পড়ি। কখনো অনেক পোস্ট হয়তো অনেক ভাল লাগে। খুব ইচ্ছে করে কমেন্ট করে এটলিস্ট একটা থাঙ্কস জানিয়ে দিতে। কিন্তু শেষ পর্যন্ত সেটা আর করা হয়ে ওঠে না। কারন একটাই, ঐ অলসতা।
যাই হোক, মুল কথায় ফিরে আসি। আজ আমি আপনাদের দেখাব কিভাবে আপনার সাইটে কোন কিছুকে ভাসমান অবস্থায় রাখা যায়। প্রথমে এই সাইটটি একটু দেখে আসুন। এটি আমার এক ক্লায়েন্ট এর সাইট। সাইটটিতে ডান পাশে একটা ম্যাসেস বা নোটিশ বোর্ড আছে, যেটা ভাসমান। সাইটটি স্ক্রল করে নিচের দিকে গেলেও নোটিশবোর্ডটি ভাসমান অবস্থা নিচের দিকে চলে আসবে। এবার এই সাইটটি দেখুন। এটিও আমার আর এক ক্লায়েন্ট এর নিউজ ওয়েব সাইট। নিচের দিকে একটা ব্রেকিং নিউজ আছে। যেটা সাইটে সব সময় ভাসমান অবস্থায় আছে। এই সাইটটি দেখুন। এটি মুলত আমার নিজের ওয়েব সাইট। সাইটটিতে ডানদিকে নিচে মানি ব্যাক গ্যারান্টির একটা ম্যাসেজ রয়েছে। সাইটটি স্ক্রল করে নিচের দিকে গেলেও এটি ভাসমান অবস্থায় সব সময় ওখানেই থাকবে।
এখন দেখা যাক এই ধরনের কোন কিছুকে আপনার সাইটে কিভাবে বানাবেন। এর জন্য আমাদের দরকার দুইটা জিনিস, একটা HTML পার্ট। আর একটা CSS পার্ট।
HTML অংশে প্রথমে আপনাকে একটা ডিভ নিতে হবে। এখানে একটা আইডি দিয়ে আপনাকে সিএসএস এর সাথে কানেক্ট করতে হবে। যেকোন একটা নাম বা আইডি দিতে পারেন আপনার পছন্দ মত। রহিম, করিম, কুদ্দুস, মফিস, আবুল, আপনার যা ইচ্ছে। ধরুন আমি দিলাম "razibwrapper" । তাহলে আমাদের ডিভ কোডটি দাড়ালো এরকমঃ
এই ডিভের মাঝে আপনাকে মুল 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 কোড নিলাম এরকমঃ
এখানে সবই ঠিক রেখেছি, শুধু আইডি চেঞ্জ করেছি এবং অবস্থান নিয়েছি রাইট সাইটে। অর্থাৎ এটি ওয়েব সাইটের ডান পাশে অবস্থান করবে। আশা করি কোড দেখে আপনারা পুরোটা বুঝতে পারবেন। কোথাও বুঝতে সমস্যা হলে অবশ্যই কমেন্ট করে জানাবেন। আমি তো আছিই।
আজ তাহলে এই পর্যন্তই। টিউটোরিয়ালটা আপনাদের ভাল লাগলে অবশ্যই কমেন্ট করে জানাবেন। আর যদি খারাপ লাগে তাহলে একটা গালি দেবার জন্য হইলেও একটা কমেন্ট কইরেন। সবাই অনেক অনেক ভাল থাকবেন। পরবর্তিতে আরো অনেক সুন্দর সুন্দর টিপস শেয়ার করার প্রতিশ্রুতি নিয়ে আজকে এখানেই শেষ করছি। আল্লাহ হাফেজ।
সর্বশেষ এডিট : ২৬ শে মে, ২০১৩ ভোর ৫:০৫
৮টি মন্তব্য ২টি উত্তর
আলোচিত ব্লগ
Sajna

Sajna
Love is sacred;
Commences from the intense mystery of pure souls.
Has a beginning, but no end;
Here, only peace prevails.
So, love—
Solely for the sincere and the disenchanted,
Not for the pharisaic.
...বাকিটুকু পড়ুন
বিপ্লব সংহতি দিবস সফল ও সার্থক হোক.....

আজকে নাকি বিপ্লব সংহতি দিবস। দল ক্ষমতায় থাকলে অনেক রকমের দিবস পালিত হয়। আওয়ামী লীগের সময় শেখ জামাল-কামালের বিবাহ দিবস, শিশু শহীদ শেখ রাসেলের সুন্নাতে খৎতা দিবস আরো কতো কি?... ...বাকিটুকু পড়ুন
ঝাল্লাগে ভাল্লাগে- ২

"যে-রাঁধুনী জানে তার তরকারিতে স্বাদ হয়নি, সে নিমেষে লঙ্কার কৌটো উপুড় করে দেবে। তারপর অতিথি যখন কান দিয়ে ধোঁয়া ছেড়ে হাঁউমাউ করবে, রাঁধুনী তখন মিটিমিটি হেসে বলবে—‘একটু ঝাল বেশি... ...বাকিটুকু পড়ুন
চা এর আড্ডা।

শনিবার
৭ নভেম্বর ২০২৬
২২ কার্তিক ১৪৩৩ বঙ্গাব্দ
২৬ জমাদিউল আ. ১৪৪৮ হিজরি
কিছু মুহূর্ত কখনো হারিয়ে যায় না, সময়ের স্রোতে শুধু স্মৃতি হয়ে মনের গভীরে জমা থাকে।
২০১১ সাল। তখন আমি ইন্টারে পড়ি। নানীর... ...বাকিটুকু পড়ুন
২৪'র ৫ আগস্ট পরবর্তী সময়ে দেশে ডানপন্থা ও মৌলবাদী চেতনা-রাজনীতির চরম উত্থান

২৪-এর ৫ আগস্টের পর দেশ দীর্ঘদিনের স্বৈ/রাচারী শাসন থেকে মুক্ত হয়েছিল ঠিকই; কিন্তু দুঃখজনকভাবে দেশ চলে গিয়েছিল বিপুল সংখ্যক ডা*নপন্থী বা মৌ*লবাদী চেতনা বা রাজনীতির ধারক-বাহক-সমর্থকদের কবলে।
হ্যাঁ, হাসিনার পতনে... ...বাকিটুকু পড়ুন

অনুগ্রহ করে অপেক্ষা করুন। ছবি আটো ইন্সার্ট হবে।