How to Add a Copy Button Code Box in Blogger Using HTML, CSS & JavaScript
How to Add a Copy Button Code Box in Blogger Using HTML, CSS & JavaScript
If you regularly share HTML, CSS, or JavaScript code on your Blogger website, then presenting that code clearly and cleanly is essential. One of the most user-friendly ways to do that is by using a professional-looking code box with a copy button and language label. This not only improves the user experience but also gives your blog a more modern, developer-friendly appearance.
In this step-by-step guide, you’ll learn how to create a responsive, SEO-friendly code box for Blogger that includes a label (like HTML, CSS, JS) and a working copy button—all using pure HTML, CSS, and JavaScript. It’s simple, clean, and 100% compatible with Google AdSense policies.
🔹 Why Use a Code Box?
When you share code on your blog without formatting, it becomes hard for readers to understand or copy. A dedicated code block makes your content more organized and readable. Plus, a copy button helps users quickly grab the code with a single click, making your site more useful and interactive.
🛠 Step 1: Add CSS to Your Theme
This CSS will style the code box and position the copy button and label. Go to your Blogger theme → Edit HTML → add the following inside the <head>
tag:
.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;
}
⚙️ Step 2: Add JavaScript
To make the copy button functional, add the following JavaScript just before the closing </body>
tag of your Blogger theme:
function copyCode(btn) {
const code = btn.previousElementSibling.innerText;
navigator.clipboard.writeText(code).then(() => {
btn.innerText = "Copied!";
setTimeout(() => btn.innerText = "Copy", 2000);
});
}
🧩 Step 3: Use the Code Box in Your Posts
Whenever you want to display a code snippet in your blog post, use the following structure in HTML view:
<div class="code-box" data-lang="html">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><code>Your code goes here...</code></pre>
</div>
💡 You can change data-lang="html"
to css
, js
, or any other language label you prefer. It will show up on the top-left of the box.
💼 Why This is SEO & AdSense Friendly
- ✅ Clean and fast-loading code (no heavy plugins or external libraries)
- ✅ Enhances user engagement and time-on-site
- ✅ Fully original content and coding—no copyright issues
- ✅ Follows AdSense policy by providing educational and helpful content
- ✅ Structured layout improves readability and SEO indexing
This kind of interactive post improves your blog's quality score and helps with AdSense approval if you're applying. Google prefers well-structured, useful, and original content—which this method fully supports.
📌 Final Thoughts
Adding a stylish and functional code box to your Blogger site doesn't require advanced skills or extra plugins. With just a few lines of HTML, CSS, and JavaScript, you can create a copy-enabled code display that looks professional and enhances your readers' experience.
If you run a coding or tutorial blog, this feature is a must-have. Try implementing it today and see the difference it makes in your blog's usability and overall appeal. If you found this tutorial helpful, feel free to share it and drop your thoughts in the comments below.