구글 블로그 댓글에서 작성자 프로필 새 창으로 뜨게 하기

구글 블로그^Blogger 템플릿(스킨) 수정은 뭐 이젠 할만한 건 거의 다 했다고 생각했는데, 또 하나의 작은 문제점을 발견했다.

댓글 작성자 닉네임을 클릭하면 현재 창에서 프로필로 이동한다

예전에 구글 블로그가 아닌 다른 블로그를 할 때는 같은 블로거가 댓글을 달아줄 경우, 그 댓글에서 작성자 닉네임을 클릭하면 바로 그 작성자의 블로그가 새 창으로 떴었다.

그런데 구글 블로그는 댓글 작성자 닉네임을 클릭하면 블로그가 뜨기 전에 먼저 작성자의 프로필로 이동을 하는데, 그것도 새 창이 아니라 현재의 창에서 이동을 하게 된다는 점을 발견했다. (혹시 템플릿에 따라 다르려나? 어쨌든 나의 블로그에서는 그렇다 🙄)

나의 메인 블로그다.

고마운 분께서 댓글을 남겨주셨다.

로그인을 하지 않은 방문자였기 때문에 방문자의 닉네임에는 아무런 링크가 걸려있지 않다.

그런데 거기에 댓글을 남긴 나는 로그인을 한 사용자이기 때문에 링크가 생긴다.

위에서 설명했듯 링크를 클릭하면 새 창에서 뜨는 게 아니라 현재의 창에서 이동이 발생한다.

이 경우 다음에 같은 문제점들이 있다.

• 방문자가 댓글 작성자의 프로필을 확인한 후 다시 블로그 게시물로 돌아오려면, 뒤로 가기 버튼을 눌러야 하는 번거로움이 생긴다.
• 블로그 이탈률이 증가한다.

이전에 작성한 관련 포스트

구글 블로그의 HTML 편집에서 위젯 디자인을 자유롭게 변경해 보자.

구글 블로그의 위젯 디자인을 바꾸고 싶으신가요? 이 글은 블로그 검색 위젯과 저작자 표시 위젯의 디자인을 직접 변경하는 방법을 알려줍니다. CSS와 자바스크립트를 활용해 원하는 대로 위젯을 수정해 보세요.

사실 이번에 수정할 내용과 거의 같은 작업을 이전에 했었다.

블로그의 사이드바에 있는 Blogger로 이동하는 링크를 새 창으로 뜨게 수정한 적이 있었다.

이때 사용했던 코드를 응용하면 된다.

document.addEventListener('DOMContentLoaded', function() {
  const userLink = document.querySelector('.user a');
  if (userLink) {
    userLink.setAttribute('target', '_blank');
  }
});

그러면 이렇게 하면 될 거다.

document.addEventListener('DOMContentLoaded', function() {
  const bloggerLink = document.querySelector('.blogger a');
  if (bloggerLink) {
    bloggerLink.setAttribute('target', '_blank');
  }

  const userLink = document.querySelector('.user a');
  if (userLink) {
    userLink.setAttribute('target', '_blank');
  }
});

위에 링크한 이전 포스트에서 추가했던 코드의 아래에 추가한다면 이런 모습이 될 거다.

그런데 그냥 대충 딱 봐도 뭔가 중복된 비효율적인 코드처럼 보인다.

이 코드들을 아래처럼 수정할 거다.

최종적으로 완성된 코드

document.addEventListener('DOMContentLoaded', function() {
  const allTargetLinks = document.querySelectorAll('.blogger a, .user a'); 
  allTargetLinks.forEach(link => {
    link.setAttribute('target', '_blank');
  });
});

querySelectorAll()로 요소들을 가져온 다음, 반복문 forEach를 사용하여 집합 내의 각 요소에 개별적으로 setAttribute()를 적용했다.

이렇게 document.querySelectorAll()을 사용해서 복수의 요소를 한 번에 선택하고 순회하는 방식이 document.querySelector()를 여러 번 사용하여 개별적으로 요소를 찾는 것보다 더 효율적이다.

코드를 어디에 추가해야 하는 것인지, 그런 자세한 설명들을 이전의 포스트들에서 매번 반복해서 질리도록 설명했었으니, 앞으로는 그런 초보자 친화적인 설명은 생략하려고 한다.

이전 포스트들을 참고하도록 하자!

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

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