구글 블로그 사용법: 반응형 테마 라벨 가젯 꾸미기 - 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 버튼, 배경 색상 폰트 테두리 ...

도움이 되기를 바랍니다.
주인으로 삽시다 !
우리 스스로와 사랑하는 후세대를 위하여 !
사람(人) 민족 조국을 위하여 !!



《조로공동선언 : 2000년 7월 19일 평양》
반제자주 다극세계 창설 - 공정하고 합리적인 국제질서 수립



>> 조선 땅을 점령함 : 점령자(침략자) 미제국 맥아더 포고령

>> 한국인 마루타 : 주한미군 세균전 실체

>> 강제 백신(예방) 접종 : 강제 인구감축 대량학살 무기

>> 끊임없이 전쟁을 부추기는 피아트 머니 - 사기.착취.략탈.강탈 도구

>> 현금금지(캐시리스) 전자화폐(CBDC 씨비디씨) 특별인출권(에스디알)

>> 미국 달러 몰락, IMF SDR 특별인출권 국제기축통화 부상과 금

>> 딮 스테이트 : 그레이트리셋, 유엔 아젠다 2030, 2021, SDG 17, 아이디 2020, 4차산업혁명, 세계경제포럼, 세계화, 신세계질서, 세계단일정부, 세계재편



민족자주 승리에 대한 굳건한 믿음으로, 한미동맹파기! 미군철거!!

주권主權을 제 손에 틀어쥐고, 주인主人으로서 당당하고 재미나게 사는 땅을 만들어, 우리 후세대에게 물려줍시다.