প্লাস UI থিমের মতো স্ক্রোলিং নোটিশ তৈরি করুন
ওয়েবসাইট ডিজাইনে ভিজিটরদের দৃষ্টি আকর্ষণ করার জন্য স্ক্রোলিং নোটিশ একটি দারুণ উপায় হতে পারে। প্লাস UI থিম-এর মতো স্টাইলিশ স্ক্রোলিং নোটিশ আপনার ওয়েবসাইটকে আরও আকর্ষণীয় করে তুলতে সহায়ক। আজ আমরা আপনাকে প্লাস UI থিমের মতো দেখতে একটি স্ক্রোলিং নোটিশ তৈরি করার প্রক্রিয়া দেখাবো যা সহজেই কাস্টমাইজ এবং আপনার ওয়েবসাইটের ডিজাইনের সাথে মানানসই হবে। এই পোস্টে ধাপে ধাপে সম্পূর্ণ ব্যাখ্যা থাকবে যাতে আপনি সহজেই এটি বুঝে ও প্রয়োগ করতে পারেন।
স্ক্রোলিং নোটিশ কি এবং কেন এটি ব্যবহার করবেন?
স্ক্রোলিং নোটিশ হচ্ছে একটি নোটিশ বা বার্তা যা নির্দিষ্ট অংশে স্ক্রল করে চলে। এটি ভিজিটরদের দৃষ্টি আকর্ষণ করার একটি কার্যকর উপায়। আপনার ওয়েবসাইটে বিভিন্ন ধরনের বিশেষ বার্তা, ঘোষণা, বা গুরুত্বপূর্ণ তথ্য প্রদর্শনের জন্য স্ক্রোলিং নোটিশ খুবই সহায়ক। কিছু সাধারণ ব্যবহার ক্ষেত্র হলো:
- প্রোমোশনাল বার্তা: সেল, ছাড়, বা বিশেষ অফারের তথ্য প্রদর্শন করতে পারেন।
- নতুন কনটেন্ট আপডেট: নতুন ব্লগ পোস্ট, প্রোডাক্ট বা সার্ভিস সম্পর্কিত আপডেট প্রদর্শন করতে পারেন।
- ওয়েবসাইট সম্পর্কিত গুরুত্বপূর্ণ ঘোষণা: সার্ভার ডাউনটাইম, নিরাপত্তা সতর্কতা, বা যেকোনো জরুরি বার্তা এখানে যুক্ত করা যেতে পারে।
কোডটির ব্যবহারিক সুবিধা
এই কোডটি সহজে কাস্টমাইজেবল, প্লাস UI থিমের সাথে মানানসই, এবং প্রফেশনাল ডিজাইন তৈরির জন্য কার্যকরী। নিচে কিছু প্রধান সুবিধার তালিকা দেওয়া হলো:
- সহজেই কাস্টমাইজ করা যায়, যেমন টেক্সট, ব্যাকগ্রাউন্ড, এবং টেক্সট কালার পরিবর্তন করা সম্ভব।
- প্লাস UI থিমের সাথে সামঞ্জস্যপূর্ণ ডিজাইন প্রদান করে।
- সহজে HTML এবং CSS ব্যবহার করে তৈরী করা যায়, যা নতুন ব্যবহারকারীদের জন্যও সহজ।
- ভিজিটরদের দৃষ্টি আকর্ষণের জন্য বিশেষভাবে কার্যকর।
স্টেপ বাই স্টেপ স্ক্রোলিং নোটিশ তৈরি
নিচে প্লাস UI থিমের মতো দেখতে একটি স্ক্রোলিং নোটিশ তৈরি করার জন্য ধাপে ধাপে প্রক্রিয়া দেওয়া হলো:
HTML এবং CSS কোড
প্রথমে, নিচের HTML এবং CSS কোডটি কপি করুন এবং আপনার ওয়েবসাইটের HTML ফাইলে পেস্ট করুন। এটি একটি নোটিশ বাক্স তৈরি করবে যা স্ক্রল করে বার্তা প্রদর্শন করবে।
<!-- Scroll Notice Section Start -->
<div class="scroll-notice">
<div class="notice-label">নোটিশ</div>
<marquee behavior="scroll" direction="left">
🌟 স্বাগতম এসএম টিম বিডি ওয়েবসাইটে! https://www.smteambd.top 🌟 আমাদের প্ল্যাটফর্মে আপনাকে আন্তরিক অভিবাদন!
আমরা আপনার সকল ডিজিটাল চাহিদা পূরণের জন্য প্রতিশ্রুতিবদ্ধ। আপনার সাথে কাজ করার জন্য আমরা উন্মুখ!
</marquee>
</div>
<!-- Scroll Notice Section End -->
<style>
.scroll-notice {
background: #ffffff; /* ব্যাকগ্রাউন্ড সাদা */
color: #333; /* প্লাস UI থিমের সাথে মিল রেখে টেক্সট কালার */
padding: 10px;
border-radius: 5px; /* বক্সের কোণগুলো একটু গোলাকার করা */
font-size: 16px;
font-weight: bold;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* একটু শ্যাডো অ্যাড করা */
display: flex;
align-items: center;
gap: 10px;
}
.notice-label {
background-color: #007acc; /* নোটিশের লেবেল ব্যাকগ্রাউন্ড */
color: #ffffff; /* নোটিশের লেবেল টেক্সট কালার */
padding: 5px 10px;
border-radius: 3px;
font-weight: bold;
}
marquee {
flex: 1;
}
</style>
কোড ব্যাখ্যা
নিচে HTML ও CSS কোডের প্রতিটি অংশের ব্যাখ্যা দেওয়া হলো:
- <div class="scroll-notice">...</div>: এই ডিভটি স্ক্রোলিং নোটিশের কন্টেইনার হিসেবে কাজ করছে। এতে <marquee> ট্যাগ ব্যবহার করা হয়েছে যা টেক্সট স্ক্রোলিং করতে সহায়ক।
- background: ব্যাকগ্রাউন্ডে একটি হালকা গ্রেডিয়েন্ট ব্যবহার করা হয়েছে যা প্লাস UI থিমের সাথে সামঞ্জস্যপূর্ণ। এটি বক্সটিকে ওয়েবসাইটের বাকি অংশের সাথে মেলায় এবং দৃশ্যত সুন্দর করে তোলে।
- color: টেক্সটের কালার #333 সেট করা হয়েছে, যা থিমের ডিফল্ট টেক্সট রঙের সাথে সামঞ্জস্যপূর্ণ।
- padding: ১০ পিক্সেল প্যাডিং যোগ করা হয়েছে যাতে টেক্সট এবং বক্সের সীমানার মধ্যে কিছু জায়গা থাকে এবং এটি আরও সুন্দর দেখায়।
- border-radius: এই কোডটি ডিভের কোণগুলোকে সামান্য গোলাকার করে, যা ডিজাইনকে আরও আধুনিক ও প্লাস UI এর মতো করে তোলে।
- box-shadow: সামান্য শ্যাডো যোগ করা হয়েছে যাতে এটি ওয়েবপেজের মধ্যে থেকে কিছুটা উঁচু দেখা যায় এবং নজর কাড়ে।
স্ক্রোলিং নোটিশ কাস্টমাইজেশন
আপনি এই নোটিশটিকে বিভিন্ন উপায়ে কাস্টমাইজ করতে পারেন। এখানে কিছু কাস্টমাইজেশন টিপস রয়েছে:
- টেক্সট পরিবর্তন: <marquee> ট্যাগের ভেতরের টেক্সটটি আপনার নিজের বার্তা দিয়ে প্রতিস্থাপন করুন।
- টেক্সট কালার পরিবর্তন: <style> অংশে color প্রপার্টি ব্যবহার করে কালার পরিবর্তন করুন। উদাহরণস্বরূপ, color: #007acc; ব্যবহার করলে টেক্সটটি নীল হবে।
- স্ক্রলিং স্পিড পরিবর্তন: <marquee> ট্যাগে scrollamount প্রপার্টি যোগ করে স্ক্রলিং স্পিড নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, scrollamount="10" সেট করলে এটি দ্রুত স্ক্রোল হবে।
কোডটি কপি এবং আপনার ওয়েবসাইটে প্রয়োগ করুন
উপরের কোডটি কপি করুন এবং আপনার HTML পেজে পেস্ট করুন। এটি স্বয়ংক্রিয়ভাবে একটি প্লাস UI-এর মতো দেখতে স্ক্রোলিং নোটিশ যোগ করবে, যা আপনার ওয়েবসাইটের ভিজিটরদের নজর কেড়ে নেবে।
সংক্ষেপে
প্লাস UI থিমের মতো দেখতে এই স্ক্রোলিং নোটিশটি আপনার ওয়েবসাইটে বিশেষ বার্তা যোগ করতে এবং ভিজিটরদের দৃষ্টি আকর্ষণ করতে একটি চমৎকার উপায়। এটি ব্যবহার এবং কাস্টমাইজ করা সহজ, এবং আপনার ওয়েবসাইটের ডিজাইনের সাথে সামঞ্জস্য রেখে আপনার ওয়েবপেজে যোগ করা যায়। আশা করি এই টিউটোরিয়ালটি আপনার জন্য সহায়ক হবে।