구글 블로그 포스트 하단에 URL 복사 버튼 만들기

연재 중이던 php 포스팅 대신 오랜만에 구글 블로그 스킨 편집 포스팅을 해보겠다.

이번에는 포스트 하단에 URL 복사 버튼을 만들 거다.

포스트 URL 복사 버튼

URL 복사 버튼이 완성된 모습은 이렇다.

이 버튼만 클릭하면 바로 현재 보고 있는 포스트의 URL을 복사하게 된다.

사실 URL 복사 버튼이 없어도 포스트의 URL은 얼마든지 공유할 수 있다.

브라우저의 주소창에서 직접 복사할 수도 있고, 지금의 캡처 이미지처럼 브라우저 자체에 공유 버튼도 있다.

하지만 브라우저에 이런 기능이 있다는 걸 모르는 사람도 있을 수 있고, 브라우저 주소창에서 직접 URL을 복사하는 과정이 번거롭게 느껴질 수도 있다.

이런 URL을 복사하는 과정이 버튼 하나로 간소화된 채로 포스트가 끝나는 곳에 적절하게 위치해 있다면 글의 공유가 더 활발하게 이루어질 가능성이 높아진다.

URL 복사 버튼의 소스 코드와 코드 삽입 위치

<button id='copyBtn' onclick='copyURL()'>URL 복사</button>

먼저 URL 복사 버튼의 HTML 코드다.

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한 후, [ctrl + F] 키를 누르고 코드 내에서 post-share를 검색한다.

그리고 ul 태그가 끝나는 부분에 URL 복사 버튼의 HTML 코드를 넣는다.

#copyBtn{
  background-color: #888;
  color:#fff;
  height:30px;
  padding:0 10px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition:all .17s ease
}
#copyBtn:hover{
  opacity: .8
}
#copyBtn.copied{
  background-color: #3fbb50;
  color: #fff;
  transition:all .17s ease
}

다음은 URL 복사 버튼의 CSS 코드다.

#copyBtn에는 버튼의 기본 디자인, #copyBtn:hover에는 버튼에 마우스 커서를 올려놨을 때의 디자인, #copyBtn.copied에는 버튼을 클릭한 후에 바뀔 디자인을 설정해 뒀다.

HTML 편집에서 [ctrl + F] 키를 누르고 코드 내에서 본인이 CSS 코드를 추가하는 위치를 검색한다.

나는 /* 추가 끝 */이라는 주석으로 표시를 해놨기 때문에 거기에 CSS 코드를 추가했다.

async function copyURL() {
  const button = document.getElementById('copyBtn');
  await navigator.clipboard.writeText(window.location.href);
  button.classList.add('copied');
  setTimeout(() => {
    button.classList.remove('copied');
  }, 3000);
}

마지막으로 자바스크립트 코드를 추가하자.

현재 포스트의 URL을 복사하는 코드와 복사한 후에 버튼의 디자인이 3초 동안 바뀌었다가 다시 원래대로 돌아오는 코드가 포함되어 있다.

역시 마찬가지로 이전에 마지막으로 추가했던 자바스크립트 코드의 위치를 찾아서, 그 아래쪽에 자바스크립트 코드를 추가했다.

구글 블로그의 URL에서 ?m=1을 제거하는 방법

구글 블로그 모바일 URL에 자동으로 붙는 '?m=1' 때문에 고민이신가요? 중복 콘텐츠 문제를 해결하고 SEO에 최적화된 URL을 유지하는 방법을 알려드립니다. 간단한 코드 추가로 URL을 깔끔하게 정리하세요.

자바스크립트 코드를 추가할 위치에 대한 설명은 이전에 이 포스트에서 자세히 설명했기 때문에 생략하겠다.

이렇게 만든 URL 복사 버튼이 제대로 작동하는지 확인하고 싶다면, 지금 이 포스트의 하단에 있는 URL 복사 버튼을 클릭해 보자.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.