구글 블로그 편집용 코드 모음

11/20/2025

1. 구글 블로그에서 우클릭 복사 방지 코드

구글 블로그는 원래 우클릭이나 복사가 되는데

제 블로그처럼 우클릭이나 복사가 안 되는 방법을 알려드리겠습니다.

구글블로그 왼쪽에 줄 세개 누르면 중간에 테마가 있습니다.

테마를 누르고 맞춤 설정 옆에 있는 세모를 누르고 HTML 편집을 클릭합니다다.

html 코드가 나오면 맨 아래로 내려가서 </body> 위에 아래 코드를 복사해서 넣으세요.

<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. 복사하기 버튼 넣기

지금처럼 코드를 배포하고 싶을 때 복사 버튼을 넣을 수 있습니다.

복사 기능을 만들려면 먼저 테마 > 세모 > HTML 편집에서 아까 붙인 복사방지 스크립트 아래에 이것을 붙입니다.

<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>

💡 팁: <script> 태그가 반복되니까 한 번만 넣으시면 됩니다.

3. 코드 박스 스타일 추가

이제 코드 박스의 디자인을 설정합니다. 테마 > 세모 > HTML 편집에서 다음 위치를 찾으세요:

<b:skin><![CDATA[
/* 여기 빌트인 CSS들이 쭉 있음 */
]]></b:skin>

]]> 바로 앞에 아래 CSS 코드를 넣으세요:

.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;
}

⚠️ 주의: 테마에 따라 위치가 다를 수 있습니다. Custom 테마가 가장 쉽게 적용됩니다.

4. 블로그 글에서 사용하는 방법

이제 설정이 끝났습니다! 블로그 글을 쓸 때 코드를 보여주고 싶은 곳에 이렇게 넣으세요:

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

⚠️ 중요: HTML 코드를 보여주고 싶을 때

HTML 코드를 그냥 붙여넣으면 안 됩니다. 특수문자를 변환해야 합니다:

< 를 < 로 바꾸기
> 를 > 로 바꾸기
& 를 & 로 바꾸기

예시:

❌ 잘못된 방법:

<div class="code-box">
<pre><code>
<div>안녕하세요</div>
</code></pre>
<button class="copy-btn" onclick="copyCode(this)">COPY</button>
</div>

💡 팁: https://www.freeformatter.com/html-escape.html 같은 온라인 도구로 자동 변환할 수 있습니다.

일반 텍스트(HTML이 아닌 경우)는 변환 없이 바로 붙여넣으면 됩니다.

✅ 테스트 방법

블로그 글에서 일반 텍스트를 복사해보세요 → 우클릭이 안 되고 복사가 안 되어야 합니다
코드 박스 안의 코드를 선택해보세요 → 선택이 되어야 합니다
COPY 버튼을 클릭해보세요 → "COPIED!" 로 바뀌고 코드가 복사되어야 합니다

Read in English 영어로 읽기

즐거운 퍼즐 놀이터 · 수수랜드

이 블로그 검색

Soosooland: This is the ONLY official blog