Blogger-এ রেসপন্সিভ Transitional Content Button তৈরি করার উপায় (HTML & CSS)

আপনার Blogger সাইটে তৈরি করুন একটি চমৎকার Transitional Content Button (HTML & CSS)

এই টিউটোরিয়ালটি অনুসরণ করে আপনার Blogger সাইটে একটি প্রফেশনাল এবং রেসপন্সিভ "আরও জানুন" বাটন যুক্ত করুন।

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

আজ আমরা শিখব কীভাবে খুব সহজেই শুধুমাত্র HTML এবং CSS ব্যবহার করে Blogger সাইটে একটি দারুণ রেসপন্সিভ "Transitional Content Button" বা "আরও জানুন" বাটন তৈরি করা যায়।

বাটনের মূল বৈশিষ্ট্য:

• স্মুথ হোভার ইফেক্ট: মাউস কার্সার রাখলে বাটনটি হালকা উপরে উঠবে এবং একটি সুন্দর শ্যাডো তৈরি হবে।
• অ্যানিমেটেড আইকন: হোভার করলে ডানদিকের তীর চিহ্নটি (➠) সামান্য ডানে সরে যাবে।
• রেসপন্সিভ ডিজাইন: মোবাইল বা কম্পিউটার—যেকোনো স্ক্রিনেই এটি নিখুঁতভাবে ফিট হয়ে যায়।
• আকর্ষণীয় টাইপোগ্রাফি: বাংলা ফন্টের দৃষ্টিনন্দন ব্যবহার।

---

ধাপ ১: Blogger-এর 'Add CSS' অপশনে কোড যুক্ত করা

প্রথমে আপনার ব্লগের থিমে CSS যুক্ত করতে হবে। Blogger-এ কোনো ঝামেলার কোডিং ছাড়াই এটি করার সহজ নিয়ম রয়েছে:

1. আপনার Blogger Dashboard-এ লগইন করুন।
2. বামদিকের মেনু থেকে Theme অপশনে যান।
3. আপনার বর্তমান থিমের নিচে থাকা Customize বাটনে ক্লিক করুন।
4. বামপাশের তালিকা থেকে Advanced অপশনে ক্লিক করুন।
5. এবার একটু নিচে স্ক্রল করলেই Add CSS বক্সে ক্লিক করার জায়গা পাবেন।

নিচের CSS কোডটি কপি করে সেই Add CSS বক্সে পেস্ট করে দিন এবং নিচে ডানদিকের Save (ফ্লপি ডিস্ক আইকন) অপশনে ক্লিক করুন:

    /* ========== ট্রানজিশনাল কন্টেন্ট বাটন: সম্পূর্ণ বিচ্ছিন্ন ========== */
  .transition-btn-wrapper {
    display: flex;
    justify-content: center; /* কেন্দ্রে আনতে */
    margin: 2rem 0;
    font-family: 'Noto Sans Bengali', 'Siyam Rupali', 'SolaimanLipi', sans-serif;
  }

  .transition-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #c41230; /* HIT-এর থিম রেড */
    padding: 1rem 2rem;
    border-radius: 0 12px 12px 0;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2);
    max-width: 550px;
    width: 100%;
  }

  .transition-link:hover {
    box-shadow: 0 12px 28px rgba(196, 18, 48, 0.12);
    border-color: #c41230;
    transform: translateY(-2px);
  }

  .transition-text-group {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .transition-pretext {
    font-size: 1.2rem;
    font-weight: 900;
    font-family: 'Hind Siliguri', sans-serif;
    color: #c41230;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
  }

  .transition-maintext {
    font-family: 'Noto Serif Bengali', serif;
    font-weight: 800;
}

  .transition-arrow-icon {
    font-size: 1.6rem;
    color: #0b2b44;
    transition: transform 0.3s ease;
    opacity: 0.6;
  }

  .transition-link:hover .transition-arrow-icon {
    transform: translateX(6px);
    opacity: 1;
    color: #c41230;
  }

  /* রেসপনসিভ */
  @media (max-width: 500px) {
    .transition-link {
      padding: 0.9rem 1.5rem;
      border-radius: 0 10px 10px 0;
    }
    .transition-maintext {
      font-size: 1rem;
    }
  }

---

ধাপ ২: পোস্টে HTML কোড যুক্ত করা

CSS সেটআপ হয়ে গেলে, এবার আপনি আপনার আর্টিকেলের যেকোনো নির্দিষ্ট জায়গায় বাটনটি দেখাতে পারবেন:

1. যে পোস্টটিতে বাটন যুক্ত করতে চান সেটি ওপেন করুন।
2. পোস্ট এডিটর থেকে Compose view বদলে HTML view নির্বাচন করুন।
3. আপনার আর্টিকেলের যে স্থানে বাটনটি বসাতে চান, ঠিক সেখানে নিচের HTML কোডটি পেস্ট করুন:

<div class="transition-btn-wrapper">
  <a class="transition-link" href="https://alirprobondho.blogspot.com/2026/06/mughal-contribution-to-indian-history-culture.html">
    <div class="transition-text-group">
      <span class="transition-pretext">আরও জানুন</span>
      <span class="transition-maintext">ভারতবর্ষে মোগলদের অবদান: ইতিহাস, সংস্কৃতি ও সমন্বয়বাদ</span>
    </div>
    <span class="transition-arrow-icon">➠</span>
  </a>
</div>

---

লাইভ ডেমো প্রিভিউ (মাউস নিয়ে পরীক্ষা করে দেখুন):

আরও জানুন ভারতবর্ষে মোগলদের অবদান: ইতিহাস, সংস্কৃতি ও সমন্বয়বাদ

➠

আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করার উপায়:

• লিংক পরিবর্তন: HTML কোডের href="..." অংশের ভেতরে আপনার কাঙ্ক্ষিত পোস্টের লিংক বসিয়ে দিন।
• লেখা পরিবর্তন: "আরও জানুন" কিংবা পোস্টের টাইটেলটি আপনার পছন্দমতো পরিবর্তন করে নিন।
• রং পরিবর্তন: ব্লগের কালার থিমের সাথে মেলাতে চাইলে CSS কোডে থাকা #c41230 কালার কোডটি পরিবর্তন করে আপনার পছন্দের কালার কোড ব্যবহার করতে পারেন।