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

🛠 ধাপ ১: আপনার থিমে CSS যোগ করুন
.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 ইনডেক্সিং উন্নত করে ।
📌 চূড়ান্ত ভাবনা
আপনার ব্লগার সাইটে একটি স্টাইলিশ এবং কার্যকরী কোড বক্স যুক্ত করার জন্য উন্নত দক্ষতা বা অতিরিক্ত প্লাগইনের প্রয়োজন হয় না। HTML CSS এবং JavaScript এর মাত্র কয়েকটি লাইন দিয়ে, আপনি একটি কপি-সক্ষম কোড ডিসপ্লে তৈরি করতে পারেন যা পেশাদার দেখায় এবং আপনার পাঠকদের অভিজ্ঞতা উন্নত করে।
যদি আপনি একটি কোডিং বা টিউটোরিয়াল ব্লগ চালান, তাহলে এই বৈশিষ্ট্যটি অবশ্যই থাকা উচিত। আজই এটি বাস্তবায়নের চেষ্টা করুন এবং আপনার ব্লগের ব্যবহারযোগ্যতা এবং সামগ্রিক আবেদনের ক্ষেত্রে এটি কতটা পার্থক্য আনে তা দেখুন। যদি আপনি এই টিউটোরিয়ালটি সহায়ক বলে মনে করেন, তাহলে এটি শেয়ার করতে দ্বিধা করবেন না এবং নীচের মন্তব্যে আপনার মতামত জানান।








