구글블로그 사용법: 상태표시상자(Status Message Bar) 안보이게 하기
구글 블로그에는 검색결과나 라벨에 의한 목록 등을 보여 주는 페이지에는 아래 [그림1]과 같은 상태표시상자가 나타난다.
기능적으로는 좋지만 보기에는 그리 어울리지 않기 때문에 블로거들을 성가시게 하는 것 같다.
이를 해결하는 방법은 두 가지가 있을 것 같다.
이 상태표시상자를 아예 보이지 않도록 하는 것이 하나 일 것이고, 또 다른 하나는 보이되 모양을 잘 꾸며서 블로그에 어울리도록 수정을 하면 될 것이다. 여기서는 상태표시상자를 안보이게 하는 방법을 설명하고, 꾸미는 방법은 별도의 페이지에서 설명한다. (참고: 상태표시상자 꾸미기)
[그림 1 : 블로그 상태표시상자 ]
블로그 템플릿(스킨)에 다음과 같은 CSS코드를 추가한다.
참고: CSS는 Cascading Style Sheets의 약어이며, HTML이나 XML에서 위치나 모양새를 지정하는 언어이다.
/* Hide Status Message bar
------------------------------- */
.status-msg-wrap {
display: none;
}
코드를 추가하는 방법은 2가지가 있다.
블로그의 템플릿-디자이너 도구를 이용하는 방법과 직접 템플릿의 HTML을 수정/추가하는 방법이 있다. 어느 쪽이든 결과는 같으므로 편한 방법으로 하면된다.
먼저, 현재의 템플릿을 백업한다.
=> 블로그 대시보드 > 템플릿(Template) > 화면 오른쪽 위에 있는 백업/복구(Backup/restore)를 클릭하면, 아래그림의 아랫부분에서 보는 것과 같은 백업/복구 창이 뜬다.
==>백업/복구 창에서, 윗쪽 버튼(템플릿 내려받기: Download full template)를 클릭한다.
==>특별한 설정이 없다면, 컴퓨터의 내문서 > 다운로드 (또는 Download) 폴더에 저장되며, 파일이름은 " template-xxxxxxxxxxxx.xml "형식으로 되어 있다. xxxx부분은 숫자로 되어 있다. 이 파일은 나중에 템플릿을 현재상태로 되돌릴 때 필요하므로 잘 보관한다.
방법1: 템플릿-디자이너 도구로 코드 넣기(아래 그림중 윗쪽 부분 참고)
==> 블로그 대시보드 > 템플릿(Template) > 사용자설정(Cusomise)을 클릭하여, 템플릿-디자이너를 연다.
==> 열린 템플릿-디자이너에서 고급설정(Advanced) > CSS추가(Add CSS)를 클릭하여 아래 그림의 윗쪽 부분처럼 코드를 붙여넣고 저장한다.
방법2: 직접 템플릿 HTML 수정 (위 그림중 아래쪽 부분 참조)
==> 블로그 대시보드 > 템플릿(Template) >HTML편집(Edit HTML)을 클릭하여 HTML편집창을 연다
==> HTML편집창에서 템플릿편집(Edit template) > 마우스로 HTML코드가 있는 부분을 클릭하여 창을 활성화 > [컨트롤 + F]키로 찾기 박스를 연다
=> 찾기박스에 " ]]></b:skin> "를 입력하고 엔터키를 누르면, " ]]></b:skin> "에 노랑색 표시가 되면서 해당위치로 이동된다.
=> 위 그림의 아랫쪽 부분에서 보는 것처럼 ]]></b:skin> 코드 바로 위에 코드를 붙여 넣고, 저장한다. 경우에 따라서는 시간이 조금 걸릴 수 있다.
이제 코드 넣기가 끝났으니, 블로그로 가서 검색을 하거나 라벨을 선택해서 상태표시상자가 나타나는지 확인해 보자.
[그림: 코드를 넣기 전의 상태표시상자 모습 ]
[그림: 코드를 넣은후 상태표시상자가 보이지 않음 ]
기능적으로는 좋지만 보기에는 그리 어울리지 않기 때문에 블로거들을 성가시게 하는 것 같다.
이를 해결하는 방법은 두 가지가 있을 것 같다.
이 상태표시상자를 아예 보이지 않도록 하는 것이 하나 일 것이고, 또 다른 하나는 보이되 모양을 잘 꾸며서 블로그에 어울리도록 수정을 하면 될 것이다. 여기서는 상태표시상자를 안보이게 하는 방법을 설명하고, 꾸미는 방법은 별도의 페이지에서 설명한다. (참고: 상태표시상자 꾸미기)
[그림 1 : 블로그 상태표시상자 ]
블로그 템플릿(스킨)에 다음과 같은 CSS코드를 추가한다.
참고: CSS는 Cascading Style Sheets의 약어이며, HTML이나 XML에서 위치나 모양새를 지정하는 언어이다.
/* Hide Status Message bar
------------------------------- */
.status-msg-wrap {
display: none;
}
코드를 추가하는 방법은 2가지가 있다.
블로그의 템플릿-디자이너 도구를 이용하는 방법과 직접 템플릿의 HTML을 수정/추가하는 방법이 있다. 어느 쪽이든 결과는 같으므로 편한 방법으로 하면된다.
먼저, 현재의 템플릿을 백업한다.
=> 블로그 대시보드 > 템플릿(Template) > 화면 오른쪽 위에 있는 백업/복구(Backup/restore)를 클릭하면, 아래그림의 아랫부분에서 보는 것과 같은 백업/복구 창이 뜬다.
==>백업/복구 창에서, 윗쪽 버튼(템플릿 내려받기: Download full template)를 클릭한다.
==>특별한 설정이 없다면, 컴퓨터의 내문서 > 다운로드 (또는 Download) 폴더에 저장되며, 파일이름은 " template-xxxxxxxxxxxx.xml "형식으로 되어 있다. xxxx부분은 숫자로 되어 있다. 이 파일은 나중에 템플릿을 현재상태로 되돌릴 때 필요하므로 잘 보관한다.
방법1: 템플릿-디자이너 도구로 코드 넣기(아래 그림중 윗쪽 부분 참고)
==> 블로그 대시보드 > 템플릿(Template) > 사용자설정(Cusomise)을 클릭하여, 템플릿-디자이너를 연다.
==> 열린 템플릿-디자이너에서 고급설정(Advanced) > CSS추가(Add CSS)를 클릭하여 아래 그림의 윗쪽 부분처럼 코드를 붙여넣고 저장한다.
방법2: 직접 템플릿 HTML 수정 (위 그림중 아래쪽 부분 참조)
==> 블로그 대시보드 > 템플릿(Template) >HTML편집(Edit HTML)을 클릭하여 HTML편집창을 연다
==> HTML편집창에서 템플릿편집(Edit template) > 마우스로 HTML코드가 있는 부분을 클릭하여 창을 활성화 > [컨트롤 + F]키로 찾기 박스를 연다
=> 찾기박스에 " ]]></b:skin> "를 입력하고 엔터키를 누르면, " ]]></b:skin> "에 노랑색 표시가 되면서 해당위치로 이동된다.
=> 위 그림의 아랫쪽 부분에서 보는 것처럼 ]]></b:skin> 코드 바로 위에 코드를 붙여 넣고, 저장한다. 경우에 따라서는 시간이 조금 걸릴 수 있다.
이제 코드 넣기가 끝났으니, 블로그로 가서 검색을 하거나 라벨을 선택해서 상태표시상자가 나타나는지 확인해 보자.
[그림: 코드를 넣기 전의 상태표시상자 모습 ]