구글블로그 사용법: 상태표시상자 (Status Message Bar, 검색결과 메지시) 꾸미기

상태표시상자는 아예 성가신 것만은 아니다. 방문자가 검색을 하거나 라벨(태그)를 클릭하였을 때 지금 있는 위치가 어디인지 등을 알려주기 때문에 편리함도 있다.

지난 번에 구글 블로그 상태표시상자(Status Message Bar)를 나타나지 않게 하는 방법을 설명했고, 이어서 이번에는 꾸미는 방법을 설명한다.(참고: 상태표시상자 보이지 않게 하기)

아래와 같이 상태표시(Status Message)에 대한 CSS를 작성하여 추가해 주면된다.
아래의 코드는 Blog and Web에서 예로 들어 설명한 것을 가져왔다.

코드는 HTML의 스킨 설정영역의 맨아래 부분이다. 즉, HTML편집창에서 ]]></b:skin> 코드 바로 위에 넣으면 된다.

추가할 CSS 코드
 ]]></b:skin>

코드를 넣는 방법은 템플릿디자이너나 HTML편집창을 이용하면 되는데, 템플릿디자이너를 이용하여 코드를 넣는 방법을 이 글 아래부분에서 설명한다.

[아래 코드를 입력하기 전과 후의 모습]
구글 블로그 상태표시상자 꾸미기 전과 꾸민후 모습

CSS 코 드

#main .status-msg-wrap { 
  width:90%; 
  padding:5px;
}   
#main .status-msg-body {
  font-size:80%;
  text-align:left;
  padding:5px 5px 5px 30px;
  width:auto;
}   
#main .status-msg-border {
  border:1px solid #a19a36;
  opacity:1;
}   
#main .status-msg-bg {
  background: #FFF9B3 url(배경이미지 URL) center left no-repeat; opacity:1;
}


CSS 코드 설명
아래 설명을 참조하여, 코드에서 숫자나 색상코드를 수정하여 꾸미면 된다.

#main .status-msg-wrap { <= 상태표시상자의 바깥 테두리
  width:90%;  <= 블로그 글이 표시되는 메인(main) 너비의 90%
  padding:5px; <= 테두리의 안쪽에 두는 여백
}   
#main .status-msg-body { <= 상태표시 문구가 표시되는 영역이며, 위의 바깥 테두리 안에 있음
  font-size:80%;  <= 글자 크기는 본문 글자 크기의 80%
  text-align:left; <= 표시 문구를 왼쪽으로 정렬
  padding:5px 5px 5px 30px; <= 안쪽 여백으로 각각 위쪽 오른쪽 아래쪽 왼쪽
  width:auto; <= 너비는 바깥 테두리에 맞춰 자동으로 함
}   
#main .status-msg-border { <= 테두리선
  border:1px solid #a19a36; <= 선: 굵기 1px, 선종류는 직선, 색상은 #a19a36
  opacity:1; <= 투명도
}   
#main .status-msg-bg { <=배경
  background: #FFF9B3 url(배경이미지 URL) center left no-repeat; opacity:1; <= 색상은 #fff9b3 (이미지를 넣으려면 이미지 주소를 넣음. 이미지를 넣지 않으려면 url 부터 opacity:1; 까지를 지우고, 색상코드 #XXXXXX뒤에 세미콜론(;)을 붙여준다 즉 #XXXXXX; )
}



코드 넣기 : 템플릿디자이너를 사용

 블로그의 대시보드 > 템플릿 > Customise 로 가면 아래 그림과 같은 '블로거 템플릿 디자이너'창이 열린다.

=>왼쪽 항목의 고급설정(Advanced) > CSS추가(Add CSS)로 가면 아래 그림과 같이 오른쪽에 CSS코드를 입력하는 창이 있다.

=> 그림에서 처름 위의 코드를 붙여넣고, 화면 오른쪽 위에 있는 [블로그에 적용 Apply to Blog]를 누르면 된다.

이제 코드를 넣었으니 블로그로 가서, 라벨(태그)을 클릭하거나 검색을 해보면 넣은 CSS코드가 적용되어 표시될 것이다.


참고: 템플릿디자이너 및 HTML편집창 사용법은 다음 글을 참고하면 된다. 블로그 템플릿(스킨 또는 테마) 수정 및 HTML 편집하기
주인으로 삽시다 !
우리 스스로와 사랑하는 후세대를 위하여 !
사람(人) 민족 조국을 위하여 !!



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



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

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

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

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

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

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

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



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

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