구글 블로그 라벨 자세히 보기 펼치기, 기본값 확장하여 보이도록 하는 방법 (Contempo Theme)

구글 블로그 라벨 자세히 보기 펼치기

구글 블로그 라벨 '자세히 보기'를 펼치는 방법에 대한 안내입니다~ 😘 기본 값을 확장하도록 진행하였는데요, 라벨에 대한 텍스트는 따로 변경하지 않았기에 여전히 '자세히 보기'로 보일 것입니다. 크게 중요하게 생각하지 않기에 간단히 끝내려고 그대로 놓아두었는데, 필요 시 보완 작업을 해주세요.

구글 블로그 라벨 자세히 보기 펼치기

특히, Contempo 테마를 사용하고 있는 경우에 유용한 방법입니다. 이 과정에서는 CSS를 수정하여 라벨 목록이 기본적으로 확장되도록 설정을 할 것이니 간단히 따라해 보세요~

블로그 관리 페이지에 로그인

먼저, 구글 블로그 관리 페이지에 로그인하세요.

테마, HTML 하기

블로그 관리 페이지에서 좌측 메뉴에서 '테마'를 선택한 후, 상단의 'HTML 편집' 버튼을 클릭해 주세요. 이 부분에서 블로그의 HTML 및 CSS 코드를 수정할 수 있답니다.

CSS 코드 찾기

HTML 편집 페이지에서 Ctrl + F (Windows) 또는 Command+ F (Mac)을 눌러 아래의 CSS 코드를 찾습니다. (.remaining-items 부분을 찾아야 해요) 

.extendable .remaining-items{
height:0;
overflow:hidden;
-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,0,.2,1)
}
.extendable .remaining-items.expanded{
height:auto
}

CSS 코드 수정

찾은 CSS 코드의 height: 0; 부분을 height: auto;로 변경합니다. 변경 후 코드는 아래와 같이 보일 것입니다.

.extendable .remaining-items{
height:auto;
overflow:hidden;
-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,0,.2,1)
}
.extendable .remaining-items.expanded{
height:auto
}

변경사항 저장하기

HTML 편집 페이지에서 '저장' 버튼을 클릭하여 변경사항을 저장합니다.

블로그 확인하기

변경사항이 제대로 적용되었는지 확인하기 위해 블로그를 새로고침 해봅니다. 이제 라벨 목록이 기본적으로 확장되어 있어야 합니다.

코드 설명

  • .extendable .remaining-items: 이 클래스는 컨템포 테마에서 기본적으로 숨겨진 라벨 항목을 나타냅니다.
  • height: 0;: 초기 상태에서 높이를 0으로 설정하여 숨깁니다.
  • height: auto;: 이 값을 변경하여 모든 라벨 항목을 자동으로 표시되도록 합니다.
  • overflow: hidden;: 넘치는 콘텐츠를 숨깁니다.
  • -webkit-transition 및 transition: 높이가 변경될 때의 전환 애니메이션을 정의합니다.

이렇게 CSS를 수정하면, 블로그 라벨 목록이 기본적으로 확장되어 방문자가 쉽게 모든 라벨을 볼 수 있도록 도와줄 거예요.

이전최근
댓글 쓰기
가져가실 때, 출처 표시 부탁드려요! 감사합니다. 💗