Blogger code box

1. Disable Right-Click and Copy on Google Blogger

By default, Google Blogger allows right-clicking and copying content.

I’ll show you how to disable these features like on my blog.

On the left side of Google Blogger, click the three lines and find “Theme” in the middle. 

Click “Theme,” then click the triangle next to “Customize” and select “Edit HTML.”.

When the HTML code appears, scroll down to the bottom and copy the code below and paste it above `

`:

<style>
    html, body, .blog-post, .post-body, .post {
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
    }
</style>

---

2. Add Copy Button

You can add a copy button when you want to distribute code like this.

To create the copy function, go to Theme > Triangle > Edit HTML and paste this below the copy-prevention script you just added:

<script>
function copyCode(btn){
  const code = btn.parentElement.querySelector("code").innerText;
  navigator.clipboard.writeText(code).then(() => {
    btn.innerText = "COPIED!";
    setTimeout(() => btn.innerText = "COPY", 1500);
  });
}
</script>

💡Tip: Since the 'script' tag repeats, you only need to add it once.

---

3. Add Code Box Styling

Now let’s set up the design for the code box. In Theme > Triangle > Edit HTML, find this location:

<b:skin><![CDATA[
/* Built-in CSS styles are here */
]]></b:skin>

Add the CSS code below **right before** `]]>`:

.code-box {
  position: relative;
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 14px;
  border-radius: 8px;
  margin: 16px 0;
  font-family: Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  overflow-x: auto;
  user-select: text !important;
}

.code-box .copy-btn {
position: absolute;
right: 12px;
top: 12px;
padding: 4px 10px;
font-size: 12px;
border: none;
background: #333;
color: #fff;
border-radius: 4px;
cursor: pointer;
}

.code-box .copy-btn:hover {
background: #000;
}

⚠️ Note: The location may vary depending on your theme. Custom themes are easiest to apply.

---

4.How to Use in Blog Posts

Setup is complete! When writing a blog post, insert this code where you want to display code:

<div class="code-box">
<pre><code>
&lt;div&gt;여기에 코드를 넣으세요&lt;/div&gt;
</code></pre>
<button class="copy-btn" onclick="copyCode(this)">COPY</button>
</div>

⚠️ IMPORTANT: If you want to display HTML code

You cannot paste HTML code directly. You must convert special characters:

• Replace `<` with `<`
• Replace `>` with `>`
• Replace `&` with `&`

Example:

❌ Wrong way:

<div class="code-box">
<pre><code>
<div> Hello</div>
</code></pre>
<button class="copy-btn" onclick="copyCode(this)">COPY</button>
</div>

💡 Tip: Use an online HTML escape tool like https://www.freeformatter.com/html-escape.html to automatically convert your code.

For regular text (not HTML), you can paste it directly without conversion.

✅ Testing Method

1. Try to copy regular text in your blog post → Right-click and copy should not work
2. Try to select code inside the code box → Selection should work
3. Click the COPY button → It should change to “COPIED!” and the code should be copied​​​​​​​​​​​​​​​​

🪄 Dev log originally written in Korean | Translated with Claude 

Read in Korean 한글로 읽기

Fun puzzle playground  ·  Soosooland