Add a "Copy to Clipboard" Button for Code Boxes in Blogger

Add a "Copy to Clipboard" Button for Code Boxes in Blogger

🧰 Post Content:
Want to make your Blogger posts more user-friendly, especially for code snippets? Adding a "Copy" button to code boxes allows visitors to copy code with a single click—no need to manually highlight! Here's how you can add this cool feature.

Make your code snippets more user-friendly! With this simple trick, you can add a "Copy" button to your code boxes, letting your visitors copy code with just one click.

✅ Step 1: Add CSS to Your Theme

Go to Blogger > Theme > Edit HTML, and paste this just before </head>:

<style>

.copy-btn {

  position: absolute;

  top: 8px;

  right: 8px;

  padding: 5px 10px;

  background: #4CAF50;

  color: #fff;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  font-size: 12px;

}

.code-box {

  position: relative;

  background: #f4f4f4;

  padding: 15px;

  margin: 10px 0;

  font-family: monospace;

  border-radius: 5px;

  overflow: auto;

}

</style>

✅ Step 2: Add JavaScript Before </body>

Still in Edit HTML, paste this code just before the closing </body> tag:

<script>

function copyToClipboard(element) {

  var temp = document.createElement("textarea");

  temp.value = document.getElementById(element).innerText;

  document.body.appendChild(temp);

  temp.select();

  document.execCommand("copy");

  document.body.removeChild(temp);

  alert("Copied to clipboard!");

}

</script>

✅ Step 3: Add This HTML Block Inside a Post

Switch your post editor to HTML view, and paste this code wherever you want a copyable code snippet:

<div class="code-box">

  <button class="copy-btn" onclick="copyToClipboard('code1')">Copy</button>

  <pre id="code1">

    <!-- Your code goes here -->

    console.log("Hello, Blogger!");

  </pre>

</div>

💡 Tip:

For multiple code blocks, change the id="code1" to code2, code3, etc.

-------------------------------------------------------------------------

🔧 Blogger পোস্টে "Copy to Clipboard" বাটন যুক্ত করুন

আপনার কোড স্নিপেটকে আরও ইউজার-ফ্রেন্ডলি করতে চান? এই ছোট্ট ট্রিকটি ব্যবহার করে আপনি সহজেই "Copy" বাটন যুক্ত করতে পারবেন, যা এক ক্লিকে কোড কপি করার সুবিধা দেবে।

✅ ধাপ ১: CSS যুক্ত করুন

Blogger > Theme > Edit HTML-এ যান এবং </head> ট্যাগের ঠিক আগে নিচের কোডটি পেস্ট করুন:

<style>

.copy-btn {

  position: absolute;

  top: 8px;

  right: 8px;

  padding: 5px 10px;

  background: #4CAF50;

  color: #fff;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  font-size: 12px;

}

.code-box {

  position: relative;

  background: #f4f4f4;

  padding: 15px;

  margin: 10px 0;

  font-family: monospace;

  border-radius: 5px;

  overflow: auto;

}

</style>

✅ ধাপ ২: JavaScript যুক্ত করুন

এবার ঠিক </body> ট্যাগের আগে নিচের স্ক্রিপ্টটি পেস্ট করুন:

<script>

function copyToClipboard(element) {

  var temp = document.createElement("textarea");

  temp.value = document.getElementById(element).innerText;

  document.body.appendChild(temp);

  temp.select();

  document.execCommand("copy");

  document.body.removeChild(temp);

  alert("Copied to clipboard!");

}

</script>

✅ ধাপ ৩: পোস্টে কোড ব্লক যুক্ত করুন

পোস্ট লেখার সময় HTML view-তে গিয়ে নিচের কোডটি যেখানে দরকার সেখানে বসান:

<div class="code-box">

  <button class="copy-btn" onclick="copyToClipboard('code1')">Copy</button>

  <pre id="code1">

    <!-- এখানে আপনার কোড দিন -->

    console.log("Hello, Blogger!");

  </pre>

</div>

💡 টিপস:

একাধিক কোড ব্লক চাইলে code1 আইডির পরিবর্তে code2, code3 ইত্যাদি ব্যবহার করুন।