구글 블로그에서 링크를 박스 형태로 만드는 방법

구글 블로그는 확실히 초보자에게는 진입 장벽이 조금 높은 편이다.

항상 이야기 해왔지만, HTML과 CSS에 대한 지식이 없으면 본인 블로그에 적용한 템플릿에 문제점이 발견되어도 해결할 수가 없다.

하지만 HTML과 CSS를 아는 사람이라면, 스스로 고치는 재미도 있고, 템플릿 수정에 대한 자유도도 높은 편이다.

그런데 무엇보다 큰 단점은 이것저것 불편한 점이 많은 에디터다.

특히 에디터에서 자동으로 링크를 감지하고 링크를 박스 형태로 예쁘게 자동 생성해주는 기능이 없다.

티스토리 블로그를 캡처해 보았다.

티스토리는 이렇게 글을 작성하면서 에디터에 링크를 붙여 넣은 후에 enter 키만 누르면 바로 링크 박스를 생성해 준다.

그런데 구글 블로그의 에디터는 이런 기능이 없다는 것이다.

하지만, 스스로 본인 블로그의 CSS를 코드를 수정하고, 에디터에서 HTML 코드를 사용해서 직접 만들 수는 있다.

조금 번거롭기는 하지만, 어쨌든 오늘은 그 방법을 정리해 보겠다.

구글 블로그에서 박스 형태의 링크를 만드는 방법

.link-box{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 8px;
  height: 150px;
  border: 1px solid #e7e7e7;
  border-radius: 3px
}
.link-box .link-img-container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 185px;
  border-right: 1px solid #e7e7e7;
  background-size: cover;
  background-position: center
}
.link-box .link-content{
  position: absolute;
  left: 186px;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 15px 25px 0
}
.link-box .link-img{
  float: left;
  width: 100%;
  height: 100%;
  background-position: left top; /* 취향에 따라 center로 변경해도 됨 */
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden
}
.link-box .link-title{
  display: block;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: $(dark.color);
  margin: 0 0 12px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease
}
.link-box:hover > .link-content > .link-title{
  color: $(main.color)
}
.link-description{
  overflow: hidden
}
.link-description span{
  display: block;
  overflow: hidden;
  font-size: 13px;
  color: $(posts.text.color);
  font-weight: 400;
  line-height: 1.6em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  height: 39px
}
.link-host{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 15px;
  font-size: small;
  color: #909090;
}

이 코드를 템플릿에 추가해야 한다.

템플릿에 따라서는 혹시 이런 비슷한 코드가 이미 있을 수도 있는데, 지금 내가 현재 사용중인 Amalia 템플릿의 무료 버전에는 링크 박스를 만들어주는 CSS 코드는 없는 것 같았다.

그럴 경우에는 위의 코드를 직접 템플릿에 추가하자.

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

혹시 이 블로그를 보고 그동안 따라 해왔던 사람이라면 [ctrl + F] 키를 눌러서 '직접 추가'를 검색해 보면 이전에 줄 간격을 조절하면서 추가했던 코드가 보일 것이다.

그 아래에 코드들을 붙여 넣고 저장하자.

포스트 본문에 링크를 삽입할 경우 넣어야 할 코드

<a title="링크 제목" href="링크 주소" style="text-decoration: none;" target="_blank">
    <div class="link-box">
        <div class="link-img-container">
            <div class="link-img" data-image="이미지 주소" style="background-image: url(이미지 주소);"></div>
        </div>
        <div class="link-content">
            <h3 class="link-title">링크 제목</h3>
            <div class="link-description">
                <span class="description-text excerpt">DESCRIPTION 텍스트, 두 줄이 적당함</span>
            </div>
            <span class="link-host">
                <script>
                document.write(window.location.hostname);
                </script>
            </span>
        </div>
    </div>
</a>

그리고 에디터에서 링크를 삽입할 때는 이런 코드를 넣어야 한다.

참고로 아래쪽에 있는 script 태그는 현재 사이트의 URL을 불러오는 코드다.

즉, 본인의 블로그의 URL을 불러오는 코드다.

본인 블로그의 다른 글을 링크할 경우에는 이 script 태그를 그대로 쓰고,

외부 사이트를 링크할 경우에는 script 태그 대신 해당 사이트의 URL을 직접 입력하면 된다.

미스티 노트

기타(Guitar) DIY, 음악 리뷰와 추천, 지역 정보, 개인 일상의 이야기를 담은 블로그입니다.

mystee.mistyroom.com

이런 과정을 거쳐서 이런 보기 좋은 링크 박스를 만들 수 있다.

네이버나 티스토리 블로그의 에디터에 익숙해져 있다면 처음에는 정말 불편할 텐데, 적응하면 된다.

그리고 에디터가 불편하다는 이유만으로 운영을 깡패처럼 하는 어떤 회사의 블로그로 다시 돌아갈 수는 없는 일 아닌가..

어쨌든 이렇게 링크를 박스 형태로 만들어 보았는데, 사실 이걸로 끝이 아니다.

지금 상태로는 모바일 화면에서는 링크 박스가 부담스럽게 커진다.

모바일 화면에 맞춰서 작게 줄이는 방법은 다음에 포스팅하도록 하겠다.

다음 포스트

구글 블로그에서 모바일 화면용 링크 박스 만들기

모바일 사용자에게 더 나은 경험을 제공하세요. 지난번에 만든 구글 블로그 링크 박스를 모바일 화면에 맞게 크기와 디자인을 조절하는 CSS 코드를 소개합니다.

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

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