구글 블로그 사용법: 반응형 테마 라벨 가젯 꾸미기 - Show More / Less 버튼, 배경 색상 폰트 테두리 ...

구글 블로그 사용법: 반응형 테마 라벨 가젯 꾸미기 -  Show More / Less 버튼, 배경 색상 폰트 테두리 ...
반응형 테마의 라벨(Label) 가젯은 이전 테마에서와는 달리, 2단으로 열리게 되어 있습니다.

라벨가젯을 클릭하면, 기본적으로 몇 개의 라벨을 표시하고, 그 아래에 라벨을 모두 펼치는  "Show More" 링크 버튼이 표시됩니다.

이 버튼에 그림에서와 같이 글자(텍스트)를 CSS를 통하여 간단하게 추가할 수 있습니다.

링크 페이지의 맨 상단에 있는 라벨 가젯 (상품목록 카테고리)을 클릭하면 실제 적용한 모습을 볼 수 있습니다.
>> 시장통 쪽지 : 라벨 가젯 펼침 버튼 꾸미기

그 외에 CSS를 추가하여 라벨 가젯을 꾸미는 방법은 기존 테마에서와 기본적으로 동일하므로, 링크 페이지를 참조하면 되겠습니다.

>> 라벨가젯(Label gadget) 꾸미기 - 여백 마진 패딩 폰트 테두리 배경 색상 등
>> 구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지


추가하는 글자가 앞쪽 또는 뒤쪽에 위치할 수 있도록 할 수 있습니다.
아래 CSS에서 .show-more:before의 before를 after로 바꾸면, 추가하는 글자가 뒤쪽에 표시됩니다.

[링크 버튼 앞/뒤에 글자(텍스트) 추가하는 CSS]
.show-more:before {content:'모두 보기 ';}
.show-less:before {content:'창 닫기 ';}


[각각의 버튼을 꾸미는 CSS]
.show-more {margin: 5px; background:#efefef;}
.show-less {margin: 5px; background:#efefef;}


두 개의 버튼을 각각 꾸미려면, 위와 같이, 각각에 속성을 주면 되고, 두 버튼에 같은 속성을 한 꺼번에 주려면, 아래와 같이 하면 됩니다.

[두 버튼을 한 꺼번에 꾸미는 CSS]
.show-more, .show-less {margin:15px; background:#efefef;}


[라벨 가젯 꾸미는 CSS]
#Label1 {background:#fff; border-bottom:3px solid #EFEFEF; padding:0px 40px;}
#Label1 h3 {color:#2883f3; text-align:center; margin:5px 0px;}
#Label1 a {color:#333; font-size:0.9em;}
#Label1 a:hover {color:#2883f3;}

 #Label1 에서, 맨 앞의 #은 가젯의 id(아이디)를 지정하기 위한 것이고, 맨 뒤의 수자 1은 첫 번째 라벨 가젯을 의미합니다. 라벨 가젯을 여러개 넣으면 Label1 Label2 Label3 ... 와 같이 수자가 붙습니다.

#Label1 h3 는 라벨 가젯에 사용자가 붙인 이름을 말합니다.
#Label1 a 각각의 라벨 속성을 지정하는 것이고, #Label1 a:hover은 라벨에 마우스가 올라갔을 때의 동작 속성을 지정하는 것입니다.

속성은 필요에 따라, 테두리(border), 배경색(background), 글자크기(font-size),  글자굵기(font-weight),  색상(color) 등을 사용하여 잘 어울리도록 설정하면 됩니다.


[라벨 가젯 추가 하기]
구글 블로그 사용법: 반응형 테마 라벨 가젯 꾸미기 -  Show More / Less 버튼, 배경 색상 폰트 테두리 ...

도움이 되기를 바랍니다.