구글블로그 사용법: 상태표시상자 (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 편집하기
지난 번에 구글 블로그 상태표시상자(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 편집하기