ব্লগারে সুন্দর কোড বক্স তৈরি করার সহজ টিউটোরিয়াল | 3টি নিয়মে CSS যোগ করুন

ব্লগার ব্লগে কপি বাটন সহ কাস্টম কোড বক্স (Code Box) যুক্ত করার সহজ উপায়

চিত্র: ব্লগার ব্লগে কাস্টম কোড বক্স ও কপি বাটন তৈরির সম্পূর্ণ গাইডলাইন।

ব্লগে কোনো কোড স্নিপেট বা টিউটোরিয়াল শেয়ার করার সময় একটি সুন্দর ও রেসপনসিভ কোড বক্স (Code Box) ব্যবহার করা খুবই জরুরি। এতে পাঠকদের কোড পড়তে সুবিধা হয় এবং এক ক্লিকেই কোড কপি করা যায়।

আজকের টিউটোরিয়ালে আমরা শিখব কীভাবে আপনার ব্লগার ব্লগে সুন্দর একটি কোড বক্স তৈরি করবেন এবং এর CSS কোড থিমে যুক্ত করার ৩টি সহজ পদ্ধতি।

---

প্রয়োজনীয় CSS ও HTML কোড

প্রথমে নিচে দেওয়া CSS এবং HTML কোডগুলো সংগ্রহ করে নিন:

১. CSS কোড (ডিজাইনের জন্য)

/* --- Custom Code Box Styles --- */
   .code-box-container {
  background: #1e293b;
  border-radius: 8px;
  margin: 20px 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: 'Courier New', Courier, monospace;
}
.code-box-header {
  background: #334155;
  color: #e2e8f0;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}
.copy-btn {
  background: #6366f1;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.3s ease;
}
.copy-btn:hover {
  background: #4f46e5;
}
.code-box-content {
  color: #cbd5e1;
  padding: 16px;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
}

---

CSS কোড যোগ করার ৩টি পদ্ধতি

উপরের CSS কোডটি আপনার ব্লগে যুক্ত করার জন্য নিচে ৩টি আলাদা পদ্ধতি দেওয়া হলো। আপনার সুবিধামত যেকোনো একটি পদ্ধতি অনুসরণ করুন:

পদ্ধতি ১: Edit HTML-এর মাধ্যমে (Theme Editor)

1. আপনার ব্লগার ড্যাশবোর্ডে গিয়ে Theme অপশনে যান।
2. Customize বাটনের পাশের ড্রপডাউন থেকে Edit HTML নির্বাচন করুন।
3. কোড এডিটরে </head> ট্যাগটি খুঁজে বের করুন (Ctrl + F চেপে সার্চ করতে পারেন)।
4. </head> ট্যাগের ঠিক ওপরে <style></style> ট্যাগ লিখুন। এরপর এই দুই ট্যাগের ভেতরে কপি করা CSS কোডটি পেস্ট করে দিন।
5. উপরের Save আইকনে ক্লিক করুন।

<style>
  /* এখানে CSS কোডটি পেস্ট করুন */
</style>
</head>

পদ্ধতি ২: Add CSS / Theme Designer-এর মাধ্যমে

1. ব্লগার ড্যাশবোর্ড থেকে Theme অপশনে যান।
2. Customize বাটনে ক্লিক করুন।
3. বাম পাশের মেনু থেকে Advanced অপশন বেছে নিন।
4. ড্রপডাউন থেকে Add CSS নির্বাচন করুন।
5. ডানপাশের খালি বক্সে কোনো <style> ট্যাগ ছাড়া শুধু মূল CSS কোডটি পেস্ট করুন।
6. নিচের ডানদিকের Save আইকনে ক্লিক করুন।

পদ্ধতি ৩: HTML/JavaScript Gadget-এর মাধ্যমে (Layout)

1. ব্লগার ড্যাশবোর্ড থেকে Layout অপশনে যান।
2. Sidebar বা Footer-এর যেকোনো স্থানে Add a Gadget-এ ক্লিক করুন।
3. তালিকা থেকে HTML/JavaScript গ্যাজেটটি বেছে নিন।
4. Title ঘরটি খালি রাখুন এবং Content-এর বক্সে <style> ট্যাগের মধ্যে CSS কোডটি পেস্ট করুন।
5. Save বাটনে ক্লিক করুন।

<style>
  /* এখানে CSS কোডটি পেস্ট করুন */
</style>

---

পোস্টে কোড বক্স ব্যবহার করার নিয়ম

CSS কোড যোগ করা হয়ে গেলে, এবার আপনি যখন কোনো পোস্টে কোড বক্স দেখাতে চাইবেন, তখন পোস্ট এডিটর HTML View-তে নিয়ে নিচের HTML কোডটি পেস্ট করবেন:

📄 HTML Code

<div class="code-box-container">
  <div class="code-box-header">
    <span>📄 HTML Code</span>
    <button class="copy-btn" onclick="var t=document.getElementById('code1').innerText;var d=document.createElement('textarea');d.value=t;document.body.appendChild(d);d.select();document.execCommand('copy');document.body.removeChild(d);this.innerText='✅ কপি হয়েছে!';var b=this;setTimeout(function(){b.innerText='📋 কপি করুন';},3000);">📋 কপি করুন</button>
  </div>
  <pre id="code1" class="code-box-content"><code>
<!-- আপনার মূল কোডটি এখানে লিখুন -->
  </code></pre>
</div>

💡 টিপস: এক পোস্টে একাধিক কোড বক্স ব্যবহার করতে চাইলে আইডি code1-এর বদলে দ্বিতীয় বক্সে code2, code3 এভাবে আইডি ও জাভাস্ক্রিপ্টের নাম আপডেট করে দেবেন।