ব্লগে মডার্ন হাইলাইট বক্স তৈরি করুন CSS ও HTML দিয়ে | সম্পূর্ণ টিউটোরিয়াল

🎨 ব্লগার ব্লগে কীভাবে আধুনিক হাইলাইট বক্স তৈরি করবেন (CSS ও HTML সম্পূর্ণ গাইড)

ব্লগ পোস্টের গুরুত্বপূর্ণ তথ্য দৃষ্টিনন্দন করতে CSS ও HTML দিয়ে তৈরি মডার্ন হাইলাইট বক্স (ব্যানার)

আপনার পোস্টের গুরুত্বপূর্ণ তথ্য দৃষ্টিনন্দন করতে CSS ও HTML কোডের ব্যবহার শিখুন।

একজন ব্লগার হিসেবে আমরা সবসময় চাই আমাদের কন্টেন্ট যেন পাঠকের চোখে আকর্ষণীয় লাগে। কোনো গুরুত্বপূর্ণ তথ্য, সতর্কবার্তা বা টিপস যদি সাধারণ টেক্সটের মতো করে লিখি, তাহলে সেটি অনেক সময় পাঠকের চোখ এড়িয়ে যায়। এই সমস্যার সমাধানই হচ্ছে হাইলাইট বক্স। আজকের টিউটোরিয়ালে আমরা শিখব কীভাবে মাত্র কয়েক লাইন CSS ও HTML ব্যবহার করে ব্লগার ব্লগে দৃষ্টিনন্দন হাইলাইট বক্স তৈরি করা যায় — এবং সেটাও থাকবে সম্পূর্ণ বাংলায়।

📌 হাইলাইট বক্স কী ও কেন ব্যবহার করবেন?

হাইলাইট বক্স হলো একটি বিশেষ নকশা করা অংশ, যা পোস্টের বাকি লেখার চেয়ে আলাদাভাবে ফুটে ওঠে। এর ব্যাকগ্রাউন্ড, বর্ডার ও শ্যাডো এমনভাবে ডিজাইন করা হয় যেন পাঠকের দৃষ্টি সহজেই সেদিকে যায়। আপনি সাধারণত যেসব তথ্য পাঠককে বিশেষভাবে জানাতে চান — যেমন গুরুত্বপূর্ণ নোটিশ, টিপস, সতর্কতা বা সারাংশ — সেগুলো এই বক্সের ভেতরে বসাবেন।

💡 টিপ: এই টিউটোরিয়ালটি শেষ পর্যন্ত পড়লে আপনি নিজেই যেকোনো ডিজাইনের হাইলাইট বক্স বানাতে পারবেন।

📌 ধাপ ১: থিম বা গ্যাজেটে CSS কোড বসানো

সবার আগে যে কাজটি করতে হবে তা হলো আপনার ব্লগের ডিজাইনে হাইলাইট বক্সের স্টাইলটি যোগ করা। নিচের CSS কোডটি কপি করে ব্লগার ড্যাশবোর্ড > লেআউট > HTML/JavaScript গ্যাজেট-এ পেস্ট করে সেভ করুন। এটি করলে পুরো ব্লগে একবার স্টাইল সেটআপ হয়ে যাবে এবং আপনি যেকোনো পোস্টে বারবার ব্যবহার করতে পারবেন।

📄 CSS Code (গ্যাজেটে পেস্ট করুন)

<style>
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

.modern-highlight {
    background: linear-gradient(135deg, #ffffff 0%, #f8f6ff 100%);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-left: 4px solid #6366f1;
    border-radius: 12px;
    padding: 1.4rem 1.8rem;
    margin: 2rem 0;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 20px 40px -20px rgba(99,102,241,0.15);
    transition: all 0.3s ease;
    color: #334155;
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 1.05rem;
    line-height: 1.9;
    overflow: hidden;
}

.modern-highlight::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, #6366f1, #a855f7, #ec4899);
}

.modern-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 25px 50px -20px rgba(99,102,241,0.25);
    border-color: rgba(99,102,241,0.25);
}

.highlight-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6366f1;
    background: rgba(99,102,241,0.08);
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
    font-family: 'Hind Siliguri', sans-serif;
}

.highlight-content {
    color: #475569;
    font-family: 'Hind Siliguri', sans-serif;
}

.highlight-content strong {
    color: #1e293b;
    font-weight: 600;
}
</style>

📌 ধাপ ২: পোস্টের ভেতরে HTML কোড ব্যবহার

উপরের CSS সেটআপ হয়ে গেলে, আপনি আপনার পোস্টের HTML ভিউতে গিয়ে নিচের কোডটি পেস্ট করলেই সুন্দর হাইলাইট বক্স দেখতে পাবেন।

📄 HTML Code (পোস্টে পেস্ট করুন)

<div class="modern-highlight">
    <strong>💡 টিপ:</strong> দ্রুত ফলাফলের জন্য প্রতিদিন ৩০ মিনিট এই টেকনিকটি প্র্যাকটিস করুন।
</div>

🚀 অ্যাডভান্সড: টাইটেল-সহ হাইলাইট বক্স

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

📄 HTML Code (টাইটেল সহ)

<div class="modern-highlight">
    <div class="highlight-title">
        <span>⚠️ সতর্কতা</span>
    </div>
    <div class="highlight-content">
        এই ওষুধটি <strong>খালি পেটে</strong> খাওয়া সম্পূর্ণ নিষেধ। অবশ্যই ভারী খাবারের পর সেবন করুন।
    </div>
</div>

ফলাফল নিচের মতো দেখাবে:

⚠️ সতর্কতা

এই ওষুধটি খালি পেটে খাওয়া সম্পূর্ণ নিষেধ। অবশ্যই ভারী খাবারের পর সেবন করুন।

🎯 হাইলাইট বক্স কাস্টমাইজেশন টিপস

উপরের কোডে কয়েকটি জায়গায় মান পরিবর্তন করে আপনি আপনার পছন্দমতো ডিজাইন তৈরি করতে পারবেন।

• বর্ডারের রং বদলাতে: border-left: 4px solid #6366f1; - এই #6366f1-এর বদলে যেকোনো রঙের কোড দিন।
• ব্যাকগ্রাউন্ড পরিবর্তন: background: linear-gradient(...) লাইনটি বদলে আপনার পছন্দের রং বসান।
• টাইটেলের টেক্সট: <span>⚠️ সতর্কতা</span> এর ভেতরের লেখা বদলে “📌 তথ্য”, “💡 টিপস” ইত্যাদি লিখতে পারেন।
• ছায়ার গাঢ়ত্ব: box-shadow এর শেষের rgba-র মান একটু বাড়িয়ে বা কমিয়ে পরীক্ষা করুন।

❓ প্রায়ই জিজ্ঞাসিত প্রশ্ন (FAQ)

প্রশ্ন: CSS কি পোস্টের ভেতরে বসানো যাবে?
উত্তর: হ্যাঁ, তবে সেক্ষেত্রে প্রতিটি পোস্টে আলাদাভাবে CSS দিতে হবে। তাই একবার গ্যাজেটে বসিয়ে নেওয়াই উত্তম।

প্রশ্ন: মোবাইলে হাইলাইট বক্স কালো দেখাচ্ছে কেন?
উত্তর: আপনার ফোনে ডার্ক মোড চালু থাকলে এমন দেখাতে পারে। উপরের CSS-এ কোনো ডার্ক মোডের স্টাইল রাখা হয়নি, তাই এখন সব ঠিক দেখাবে।

প্রশ্ন: ফন্ট কেন বদলে গেল?
উত্তর: আমরা এখানে Hind Siliguri ফন্ট ব্যবহার করেছি, যা বাংলা ও ইংরেজি উভয় ভাষার জন্য খুবই সুন্দর দেখায়। যদি আপনার থিমের ডিফল্ট ফন্ট চান, তাহলে CSS থেকে font-family লাইন সরিয়ে দিন।

✅ উপসংহার

CSS একবার সেটআপ করে রাখলে আপনি সারাজীবন বিনা খরচে প্রফেশনাল ব্লগ ডিজাইন উপভোগ করতে পারবেন। যেকোনো জরুরি তথ্য বা গুরুত্বপূর্ণ ঘোষণা এখন থেকে নজরকাড়া হাইলাইট বক্সে উপস্থাপন করুন এবং আপনার ব্লগকে আরও একধাপ এগিয়ে নিন। ব্লগিং হোক আরও গোছানো ও সুন্দর!