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

오늘의 포스트는 지난 포스트에서 예고한 대로 사이드바에 있는 위젯의 디자인을 변경해 보겠다.

오늘 변경할 부분은 이미지에 표시해 놓은 두 군데다.

이전에 예고한 것처럼 블로그 검색 위젯 위에 표시된 '이 블로그 검색'이라는 텍스트를 없애보겠다.

검색 입력 필드 안에도 똑같이 '이 블로그 검색'이라고 쓰여있으니 중복되는 안내일 뿐이다.

그리고 너무 크게 표시되어 있는 Blogger의 로고, 이 절망적인 디자인은 도대체 무슨 일인가 싶다.

(로고의 디자인이 절망적이라는 게 아니라, 비율이나 위치 등등..)

이것도 아예 없애거나 혹은 사이즈를 줄이는 방법을 알아보도록 하겠다.

위젯의 이름(제목)이 보이지 않도록 숨겨보자

[F12] 키를 눌러 개발자 도구를 열어서 변경해야 할 클래스 이름과 태그를 찾는다.

BlogSearch 클래스 안에 있는 h3 태그의 디자인을 CSS로 변경하면 될 것 같다.

블로그 HTML 편집에서 적당한 위치에 다음과 같이 CSS 코드를 추가한다.

.BlogSearch h3{
  display: none;
}

사용중인 템플릿마다 CSS 코드들이 다르겠지만, 내가 사용중인 Amalia 템플릿에는 .BlogSearch 클래스의 h3 태그 디자인을 따로 설정하는 코드가 없었다.

그럴 경우에는 이렇게 코드를 직접 추가한다.

적용시키기 위해서 저장 버튼 클릭도 잊지 말자.

그리고 블로그를 새로고침 해서 확인해 보면 이렇게 없애고 싶었던 부분이 사라진 것이 보인다.

이런 식으로 해결해 나가면 된다.

다음은 저작자 표시 위젯에 너무 크게 표시된 Blogger 로고를 수정해 보겠다.

저작자 표시 위젯의 Blogger 로고를 숨겨보자

.widget-content .blogger a svg{
  display: none;
}

아까 추가했었던 코드 바로 아래에 이 코드를 추가하자.

(위치는 본인 마음이지만, 본인이 추가한 코드들은 나중에 찾기 쉽도록 한 곳에 모아두는 게 좋다.)

그러면 한가운데에 너무 크게 있어서 거슬렸던 Blogger 로고가 사라진다.

만약 구글 블로그인 Blogger로 이동하는 링크의 Powered by Blogger라는 텍스트까지 없애버리고 싶다면, 위의 코드에서 a svg를 삭제하면 된다.

그러면 로고뿐만 아니라 Blogger로 이동하는 링크까지 보이지 않게 만들 수 있다.

이번엔 Blogger 로고의 디자인을 변경해 보자

여기서 글을 끝내버리고 싶지만, 뭔가 양심이 걸리는 게 하나 있을 것이다.

우리는 구글에서 무료로 제공해주는 블로그를 사용하고 있다.

너무 고마운 일이다.

그리고 구글은 ○카오가 흡수한 ○스토리처럼 블로그에 강제적으로 자신들의 광고를 삽입하거나 특정 광고는 삽입하지 말라는 식의 횡포를 부리지도 않는다.

또, 우리가 구글 블로그를 시작하는 이유도 보통은 구글 애드센스 때문일 텐데, 그것 역시 구글의 것이다.

그런데 구글의 블로그인 Blogger를 한 사람에게라도 더 알릴 수 있는 이 링크를 아예 보이지 않게 숨기는 것은 뭔가 양심에 걸린다.

그리고 혹시라도 누군가 이 블로그를 보고 괜찮아 보이는데 생소해서 '이건 어디꺼 블로그지?'하는 의문이 생길 수도 있는데, 그때 구글 Blogger로 이동하는 링크가 있어야 구글에게도 도움이 될 것이다.

그런 이유로 Blogger의 로고를 아예 없애는 것이 아니라 좀 더 보기 편하게 디자인을 변경해 볼까 한다.

.Attribution a{
  display:inline-flex;
  align-items:center;
  margin-bottom:5px;
}
.Attribution a svg{
  width:30px;
  height:30px;
  margin-right:5px;
}

아까 위에서 추가했었던 로고를 숨겨버리는 코드를 삭제하고 그 자리에 이 코드를 넣도록 하자.

코드에 대한 자세한 설명은 생략한다. 너무 글이 길어질 테니까..

그리고 블로그를 다시 확인해 보면, 아주 보기 좋아졌다.

훌륭하다!!

구글 블로그 Blogger로 이동하는 외부 링크를 새 창으로 뜨게 수정하자

그런데 또 이게 끝이 아니다..

외부 링크를 클릭할 때는 새 창에 뜨게 해야 하는데, 현재 이 구글 블로그 로고를 클릭하면 블로그가 열려있는 현재 창에서 Blogger로 이동해 버린다.

즉, 뜻하지 않게 블로그 이탈이 생기는 것이다.

개발자 도구를 통해 확인해 보았다.

역시 target="_blank" 속성이 없다.

HTML 편집으로 이동하자.

해당 <a> 태그는 이 부분에 있다.

그런데 여기에 아무리 target='_blank'를 추가하고 저장을 해도 target 속성이 사라져 버린다.

참 골 때리는 일이 아닐 수 없다.

구글 블로그의 링크에 시각 장애인을 위한 인식 가능한 이름을 포함하는 방법

이 글은 aria-label 속성을 추가해 시각 장애인도 블로그를 쉽게 이용하도록 접근성을 개선하는 방법과 PageSpeed Insights의 '링크에 인식 가능한 이름이 포함되어 있지 않습니다'라는 문제 메시지에 대한 해결 방법을 알려줍니다.

구글 블로그 백그라운드와 텍스트의 색상 대비율 문제를 해결해 보자.

이 글은 블로그의 백그라운드 및 포그라운드 색상의 대비율을 수정하는 방법과 함께 푸터의 블로그 템플릿 사이트 링크의 색상을 변경하는 방법을 알려줍니다.

그래서 지난 포스트에서 두 번이나 사용했었던, 자바스크립트를 이용해서 특정 태그에 강제로 속성을 추가하는 코드를 다시 사용해야 한다.

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

마지막이다.

이 코드를 추가하고 저장하자.

그전에 추가했었던 코드와 함께 이 부분에 넣고 저장한다.

이제 다시 개발자 도구를 통해서 Blogger로 이동하는 링크를 확인해 보면, 클릭했을 때 새 창에 뜨도록 target="_blank"가 추가된 것이 보인다.

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

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