블로그 본문 스크랩 버튼 만들기 - 제목, URL 복사 기능

목차

📌 요약

티스토리 블로그에 본문 스크랩 버튼을 추가하는 방법을 정리한다. 스크랩 버튼을 클릭하면 현재 글의 제목 + URL을 TEXT 또는 HTML 형식으로 복사할 수 있다.

 

이 글은 zipi.me - 티스토리 본문 스크랩 만들기를 참고하여 작성했습니다.

 

---

📌 기능 소개

이 스크랩 기능을 추가하면 블로그 본문 상단에 [스크랩] 버튼이 생긴다.

버튼을 클릭하면 아래 두 가지 복사 방식을 선택할 수 있다.

• TEXT 복사: 글 제목과 URL을 일반 텍스트로 복사한다.
  예) 군만두의 IT 개발 일지 (https://mandusitstudy.tistory.com/2)
• HTML 복사: 글 제목과 URL을 HTML 링크 태그 형식으로 복사한다.
  예) <a href='https://...' target='_blank'>글 제목</a>

📌 적용 방법

1) 코드 준비

아래 코드를 복사한다. 코드 안의 http://zipi.me 부분을 본인 블로그 주소로 변경해야 한다.

⚠️ 주의: 블로그 주소 끝에 '/'는 붙이지 않는다.
예) https://mandusitstudy.tistory.com (O)    https://mandusitstudy.tistory.com/ (X)

<!-- 스크랩 버튼 START -->
<script>
  var onOff = 0;

  // 스크랩 영역 토글 (버튼 클릭 시 보이기/숨기기)
  function copyZone_onOff() {
    if (onOff == 0) {
      document.getElementById('copyZone').style.display = "";
      onOff = 1;
    } else {
      document.getElementById('copyZone').style.display = 'none';
      onOff = 0;
    }
  }

  // 선택한 복사 방식에 따라 textarea에 내용 채우기
  function inPutTextArea(value, adress, title) {
    if (value == "0") { // TEXT 복사
      document.getElementById('textZone').value = title + " (" + adress + ")";
    } else if (value == "1") { // HTML 복사
      document.getElementById('textZone').value = "<a href='" + adress + "' target='_blank'>" + title + "</a>";
    }
  }

  // textarea 클릭 시 전체 선택 (복사 편의 기능)
  function copy_URL(textarea) {
    textarea.select();
  }
</script>

<!-- 스크랩 버튼 표시 영역 -->
<div align="right">
  현재글 : <a href="##_article_rep_link_##">http://zipi.me##_article_rep_link_##</a>
  <a href="javascript:copyZone_onOff();" title="스크랩">[스크랩]</a>
</div>

<!-- 스크랩 선택 영역 (기본 숨김) -->
<div id="copyZone" style="display:none" align="right">
  <form id="CopyZone" name="CopyZone" method="post" action="">
    <label>
      <input type="radio" name="copyRadio" value="1" id="copyRadio_1"
        onClick="inPutTextArea(this.value, 'http://zipi.me##_article_rep_link_##', '##_article_rep_title_##');"
        checked="checked" /> 제목 및 URL HTML 복사
    </label>
    <label>
      <input type="radio" name="copyRadio" value="0" id="copyRadio_0"
        onClick="inPutTextArea(this.value, 'http://zipi.me##_article_rep_link_##', '##_article_rep_title_##');" /> 제목 및 URL TEXT 복사
    </label>
  </form>
  <center>
    <textarea id="textZone" name="textZone" cols="100%" rows="2"
      readonly="readonly" onClick="copy_URL(this);"
      style="text-align:center; padding-top:15px;">
      <a href='http://zipi.me##_article_rep_link_##' target='_blank'>##_article_rep_title_##</a>
    </textarea>
  </center>
</div>
<!-- 스크랩 버튼 END -->

2) 코드 삽입 위치

티스토리 스킨 편집에서 skin.html 파일을 열고, 아래 태그를 찾는다.

<div class="article">

위 태그 바로 위에 1)의 코드를 붙여넣으면 된다.

💡 <script> 블록과 <div> 블록을 붙여서 넣어도 되고, 따로 떼어서 넣어도 된다.

3) 치환자 주의사항

티스토리 치환자(##_article_rep_link_## 등)는 skin.html에 직접 붙여넣을 때만 정상 동작한다.

위 코드를 일반 글 편집기에서 HTML로 복사할 경우, 치환자 안의 # #을 ##으로 모두 수동 변경해야 한다.

📌 사용 방법

적용 후 블로그 본문 상단에서 아래 순서로 사용할 수 있다.

1. [스크랩] 버튼 클릭 — 복사 영역이 펼쳐진다.
2. 복사 방식 선택 — HTML 복사 또는 TEXT 복사 중 선택한다.
3. 텍스트 상자 클릭 — 내용이 전체 선택된다.
4. Ctrl + C로 복사한다.

💡 IE 환경에서는 텍스트 상자를 클릭하면 자동으로 클립보드에 복사된다.
그 외 브라우저에서는 클릭 시 전체 선택 후 Ctrl + C로 직접 복사해야 한다.

📌 참고사이트

1) zipi.me, "티스토리 본문 스크랩 만들기", https://zipi.me/341