HTML CSS এবং JavaScript ব্যবহার করে ব্লগারে একটি কপি বাটন কোড বক্স কীভাবে যুক্ত করবেন

HTML CSS এবং JavaScript – যদি আপনি নিয়মিত আপনার ব্লগার ওয়েবসাইটে কোড শেয়ার করেন , তাহলে সেই কোডটি স্পষ্ট এবং পরিষ্কারভাবে উপস্থাপন করা অপরিহার্য। এটি করার সবচেয়ে ব্যবহারকারী-বান্ধব উপায়গুলির মধ্যে একটি হল একটি পেশাদার-সুদর্শন কোড বক্স ব্যবহার করা যার একটি কপি বোতাম এবং ভাষা লেবেল রয়েছে। এটি কেবল ব্যবহারকারীর অভিজ্ঞতা উন্নত করে না বরং আপনার ব্লগকে আরও আধুনিক, বিকাশকারী-বান্ধব চেহারা দেয়।

এই ধাপে ধাপে নির্দেশিকায়, আপনি শিখবেন কিভাবে ব্লগারের জন্য একটি প্রতিক্রিয়াশীল, SEO-বান্ধব কোড বক্স তৈরি করবেন যাতে একটি লেবেল (যেমন HTML, CSS, JS) এবং একটি কার্যকরী কপি বোতাম থাকবে – সবই বিশুদ্ধ HTML CSS এবং JavaScript ব্যবহার করে। এটি সহজ, পরিষ্কার এবং Google AdSense নীতির সাথে ১০০% সামঞ্জস্যপূর্ণ।

খুব সহজে ওপেন ক্যামেরা সেটিং করা শিখুন – 2026

HTML CSS এবং JavaScript কোড কেন ব্যবহার করবেন?

যখন আপনি আপনার ব্লগে কোড ফর্ম্যাট না করে শেয়ার করেন, তখন পাঠকদের পক্ষে তা বোঝা বা কপি করা কঠিন হয়ে পড়ে। একটি ডেডিকেটেড কোড ব্লক আপনার কন্টেন্টকে আরও সুসংগঠিত এবং পাঠযোগ্য করে তোলে। এছাড়াও, একটি কপি বোতাম ব্যবহারকারীদের এক ক্লিকেই দ্রুত কোডটি ধরতে সাহায্য করে, যা আপনার সাইটকে আরও কার্যকর এবং ইন্টারেক্টিভ করে তোলে।

HTML CSS এবং JavaScript ব্যবহার করে ব্লগারে একটি কপি বাটন কোড বক্স যুক্ত করুন খুব সহজে 2026 — HTML CSS এবং JavaScript

🛠 ধাপ ১: আপনার থিমে CSS যোগ করুন

এই CSS কোড বক্সটি স্টাইল করবে এবং কপি বোতাম এবং লেবেলটি স্থাপন করবে। আপনার ব্লগার থিমে যান → HTML সম্পাদনা করুন → ট্যাগের ভিতরে নিম্নলিখিতটি যোগ করুন

CSS Code

.code-box {
  position: relative;
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 1em;
  border-radius: 8px;
  overflow: auto;
  font-family: 'Courier New', monospace;
  margin-bottom: 1em;
}
.code-box::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  left: 0;
  background: #e53935;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-bottom-right-radius: 6px;
  font-family: sans-serif;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #4caf50;
  color: white;
  border: none;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.copy-btn:active {
  background: #388e3c;
}

⚙️ ধাপ ২: JavaScript যোগ করুন

</body> কপি বোতামটি কার্যকরী করতে, আপনার ব্লগার থিমের ক্লোজিং ট্যাগের ঠিক আগে নিম্নলিখিত জাভাস্ক্রিপ্টটি যুক্ত করুন :


function copyCode(btn) {

  const code = btn.previousElementSibling.innerText;

  navigator.clipboard.writeText(code).then(() => {

    btn.innerText = "Copied!";

    setTimeout(() => btn.innerText = "Copy", 2000);

  });

}

🧩 ধাপ ৩: আপনার পোস্টে কোড বক্স ব্যবহার করুন

আপনি আপনার ব্লগ পোস্টে একটি কোড স্নিপেট প্রদর্শন করতে চান, HTML ভিউতে নিম্নলিখিত কাঠামোটি ব্যবহার করুন:

Your code goes here...

💡 আপনি , , অথবা আপনার পছন্দের অন্য যেকোনো ভাষার data-lang=”html”লেবেলে পরিবর্তন করতে পারেন । এটি বাক্সের উপরের বাম দিকে প্রদর্শিত হবে।cssjs

💼 কেন এটি SEO এবং AdSense বান্ধব

✅ পরিষ্কার এবং দ্রুত লোডিং কোড (কোনও ভারী প্লাগইন বা বহিরাগত লাইব্রেরি নেই)

✅ ব্যবহারকারীর ব্যস্ততা এবং সময়-সাইট-এ-সাইট বৃদ্ধি করে

✅ সম্পূর্ণ মৌলিক কন্টেন্ট এবং কোডিং—কোনও কপিরাইট সমস্যা নেই

✅ শিক্ষামূলক এবং সহায়ক কন্টেন্ট প্রদান করে AdSense নীতি অনুসরণ করে

✅ স্ট্রাকচার্ড লেআউট পঠনযোগ্যতা এবং SEO ইনডেক্সিং উন্নত করে ।

এই ধরণের ইন্টারেক্টিভ পোস্ট আপনার ব্লগের মান উন্নত করে এবং আপনি যদি আবেদন করেন তবে AdSense অনুমোদনে সহায়তা করে। গুগল সুগঠিত, দরকারী এবং মৌলিক কন্টেন্ট পছন্দ করে—যা এই পদ্ধতিটি সম্পূর্ণরূপে সমর্থন করে।

📌 চূড়ান্ত ভাবনা

আপনার ব্লগার সাইটে একটি স্টাইলিশ এবং কার্যকরী কোড বক্স যুক্ত করার জন্য উন্নত দক্ষতা বা অতিরিক্ত প্লাগইনের প্রয়োজন হয় না। HTML CSS এবং JavaScript এর মাত্র কয়েকটি লাইন দিয়ে, আপনি একটি কপি-সক্ষম কোড ডিসপ্লে তৈরি করতে পারেন যা পেশাদার দেখায় এবং আপনার পাঠকদের অভিজ্ঞতা উন্নত করে।

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