블로거(구글 블로그) 본문에 요약글 기능, 더보기/접기 버튼 넣는 방법 Blogger How to Make Folding Button

블로거(구글 블로그/블로그스팟)에 네이버 블로그의 요약글 기능을 구현하는 방법입니다. 꼭 블로거가 아니더라도 HTML 코드를 수정할 수 있는 블로그(티스토리 등)나 사이트에서는 다 사용할 수 있습니다.

지금은 모바일 최적화로 인해 사용되지 않는 걸로 알고 있지만 네이버 블로그의 옛날 에디터에는 '요약글' 기능이 있었습니다. >더보기 를 클릭하면 아래에 숨겨져 있던 본문 내용이 나타나고, 접으면 다시 숨겨지는 기능입니다. 글에서 필요한 정보만 빨리 찾을 수 있게 하거나, 스포할 때 많이 사용했던 것 같네요.

요약글 기능은 다른 블로그에서 글 목록 만드는 코드를 보고 이걸 접혔다 펼칠 수 있으면 좋겠다고 생각해서 시도해보게 되었습니다. 테마에 코드를 추가하고 HTML을 살짝 수정하면 됩니다. 이 방법으로 만든 요약글은 모바일에서도 제대로 기능합니다!

블로거 홈에서 [테마 - '맞춤설정' 옆의 화살표(삼각형) - HTML 편집]으로 들어갑니다.

코드 화면을 클릭한 뒤에 Ctrl+F를 눌러 다음 코드를 찾습니다. (Ctrl+F를 바로 누르면 블로거 코드 수정 화면이 아닌 브라우저의 단어 찾기가 활성화되기 때문에 코드를 찾을 수 없습니다!)

</body>

그 위에 다음 코드를 복사해서 붙여 넣습니다.

<script type='text/javascript'>
//<![CDATA[
var quests = document.getElementsByClassName("folding-btn");
  function folding() {
    var contents = this.nextElementSibling;
    if (contents.style.display === "block") {
          contents.style.display = "none";
    }
    else {
          contents.style.display = "block";
    }
  }
  for (i = 0; i < quests.length; i++) {
        quests[i].addEventListener("click", folding);
  }
//]]>
</script>  

이제 다음 코드를 찾습니다.

</b:skin>

그 위에 다음 코드를 복사해서 붙여 넣습니다. 해당 코드는 CSS입니다. 버튼을 꾸미기 위한 것이니 자유롭게 수정해서 사용하세요!

/*요약글 버튼 꾸미기*/
.folding-btn {
    background-color: transparent; //버튼 배경색
    border: none; //버튼 테두리
    outline: none;
    cursor: pointer;
    padding: 10px; //버튼 안쪽의 여백 설정
    width:100%; //버튼의 가로 크기
    font-size: 16px; //버튼 안의 텍스트 크기
    color:$(body.link.color); //버튼 안의 텍스트 색상
    text-align:left; //버튼 안의 텍스트 정렬(기본값은 가운데 정렬)
}
/*버튼 위에 마우스를 올렸을 때 변화*/
.folding-btn:hover {
    color:black;
}

이제 블로거 홈으로 돌아와서 게시물을 작성합니다. 다음 작업은 모두 작성하신 뒤에 하시는 게 나중에 안 헷갈리고 수정하기 편할 겁니다.

본문 작성 후에 왼쪽 위에 있는 연필 모양을 클릭해서 [HTML 보기]를 선택하세요.

코드 화면을 클릭한 후에 Ctrl+F를 눌러 숨기려는 부분은 찾습니다. 코드가 끝나는 부분(<p> </p>이런 부분)에서 엔터를 치면서 찾으시면 좀 더 보기가 편할 겁니다. 본문을 작성하실 때 숨기려는 부분 앞 뒤에 '궬', '랼' 같은 문자를 넣으면 검색으로 찾기 쉽겠죠.

숨기려는 부분을 찾아냅니다.

숨기려는 부분에 다음 코드를 넣습니다. 숨기려는 부분 앞쪽에 두 줄, 뒤쪽에 한 줄이 들어갑니다.

<button class="folding-btn" type="button">&gt;더보기</button>
<div style="display: none;">
  /*숨겨지는 내용*/
</div>

첫 번째 줄의 '더보기'가 버튼에 나타나는 글자입니다. display:none은 초기값을 숨겨지는 것으로 설정한 것입니다. 수정하면 다음과 같이 되겠죠.

이렇게 추가합니다.

수정한 뒤에 다시 왼쪽 위에 있는 <>를 클릭해서 [새 글 작성 보기]를 클릭하면 글 수정 화면에 다음과 같이 나타납니다.

글 편집 화면에서 보이는 버튼 모양

글 편집 화면에서만 저렇게 보이고 게시하시면 CSS가 적용되어서 다음과 같이 보입니다.

게시된 글에서 보이는 버튼 모양

아래는 직접 만든 버튼입니다. 클릭해보세요!

아무개가 어쩌구해서 저쩌구하는 엔딩이에요!!!

HTML에 익숙하신 분이면 코드를 외우셔도 되고, 다른 임시글에 저장해 놓고 사용하시면 될 것 같습니다.

※주의하실 점

• 글 수정 화면에서는 글이 숨겨진 채로 나타납니다. 직접 보면서 수정하고 싶은 부분이 있다면 HTML 코드에서 <div style="display: none;">의 none을 block으로 바꿔주면 됩니다.
• 본문에서는 숨겨지지만 썸네일에서는 보입니다. 글 목록에서 보이는 본문 앞부분에 사용하면 숨기려던 내용이 스포되겠죠. 용도에 맞춰서 사용하시면 되겠습니다.