구글블로그 사용법: 네비게이션바(Navigation bar: Navbar) 안보이게 하는 방법 2가지
구글 블로그의 기본 템플릿(스킨)에는 블로그 제일 위에 네비게이션바(Navigation bar)라는 도구상자가 있다.
위 그림에서 보는 것처럼 유용한 기능들이 잘 담겨 있다. 이를 순서대로 살펴보면,
[블로그로 가기] [검색창] [구글+에 글 공유] [트위트나 페이이스북에 글 공유] [이웃 블로그 가기] [새글 쓰기] [ 템플릿 디자인으로 가기] [로그 아웃] 등이다.
좋은 기능에도 불구하고 템플릿에 따라서는 어울리지 않는 단점으로 인해 나타나지 않게 하고 싶을 때가 있는 것 같다. 네비게이션바를 나타나지 않게 하는 방법은 2가지가 있는데, 하나씩 살펴보자.
방법1. 블로그의 기본 기능으로 네비게이션 끄기(Off)
=> 블로그 대시보드 > 레이아웃(Layout) > 오른쪽 위에 있는 [Navbar]를 누르면, 아래그림에서와 같은 네비게이션 설정창이 뜬다.
=> 창의 맨아래에 있는 [Off]를 선택하고 저장(Save)를 누른다.
=> 이 기능으로 네비게이션 바를 간단히 끄고 켤 수가 있다. 단점은 템플릿(스킨)에 따라서는 제대로 작동하지 않는 경우가 있고, 어떤 경우는 네비게이션이 작동은 하지 않지만 그 자리가 흰색의 공백으로 보이기도 한다.
=> 이 기능으로 네비게이션바가 깔끔하게 숨겨지면 좋지만, 만약에 그렇지 않으면 아래 2.번에서 설명하는 방법으로 하면 된다.
방법2. 템플릿에 CSS코드를 넣어서 네비게이션바 안보이게 하기
=> 블로그 대시보드 > 템플릿(Template) > 사용자설정(Customise)을 눌러 아래 그림과 같이 블로그 템플릿 디자이너 창으로 간다.
=> 왼쪽 메뉴바의 고급설정(Advanced) > CSS추가(Add CSS)를 눌러 아래 그림의 오른쪽 부분과 같은 CSS코드 입력창을 연다.
=> 그림 아래에 있는 CSS코드를 아래 그림과 같이 붙여 넣는다.
스크롤바를 당겨서, 맨 아래쪽에 붙여 넣고, 창 오른쪽 위에 있는 적용하기(Add to Blogger)를 눌러 저장을 한다. 이제 블로그로 가서 확인을 해보자.
입력란에는 이전에 넣은 다른 CSS코드가 모두 보일 것이다. 그러한 CSS코드들이 손상되지 않도록 주의하자.
블로그 네비게이션바를 나타나지 않게 하는 CSS코드
/* Nav Bar
------------------------------------------------ */
#navbar { height: 0px; visibility: hidden; display: none;}
#navbar-iframe { height: 0px; visibility: hidden; display: none;}
위의 코드를 설명하면 다음과 같다.
/* Nav Bar
------------------------------------------------ */
#navbar { height: 0px; visibility: hidden; display: none;} <= 네비게이션바(Navbar)의 높이를 0px, 보여줄지 여부는 숨김, 화면에 보일지는 아니오
#navbar-iframe { height: 0px; visibility: hidden; display: none;} <= 네비게인션을 나타나게 하는 영역의 높이는 0px, 보여줄지 여부는 숨김, 화면에 표시할지 여부는 아니오
다시 내비게이션을 보이게 하려면
언제든 내비게이션 바를 보이게 할 수 있다.
첫번째 방법으로 보이지 않게 하였으면, 설정할 때와 마찬가지 방법으로 [Off]를 풀어주면 된다.
두번째 방법으로 보이지 않게 하였으면, 설정할 때와 마찬가지 방법으로 추가한 CSS코드를 지워주면 된다.
[블로그로 가기] [검색창] [구글+에 글 공유] [트위트나 페이이스북에 글 공유] [이웃 블로그 가기] [새글 쓰기] [ 템플릿 디자인으로 가기] [로그 아웃] 등이다.
좋은 기능에도 불구하고 템플릿에 따라서는 어울리지 않는 단점으로 인해 나타나지 않게 하고 싶을 때가 있는 것 같다. 네비게이션바를 나타나지 않게 하는 방법은 2가지가 있는데, 하나씩 살펴보자.
방법1. 블로그의 기본 기능으로 네비게이션 끄기(Off)
=> 블로그 대시보드 > 레이아웃(Layout) > 오른쪽 위에 있는 [Navbar]를 누르면, 아래그림에서와 같은 네비게이션 설정창이 뜬다.
=> 창의 맨아래에 있는 [Off]를 선택하고 저장(Save)를 누른다.
=> 이 기능으로 네비게이션 바를 간단히 끄고 켤 수가 있다. 단점은 템플릿(스킨)에 따라서는 제대로 작동하지 않는 경우가 있고, 어떤 경우는 네비게이션이 작동은 하지 않지만 그 자리가 흰색의 공백으로 보이기도 한다.
=> 이 기능으로 네비게이션바가 깔끔하게 숨겨지면 좋지만, 만약에 그렇지 않으면 아래 2.번에서 설명하는 방법으로 하면 된다.
방법2. 템플릿에 CSS코드를 넣어서 네비게이션바 안보이게 하기
=> 블로그 대시보드 > 템플릿(Template) > 사용자설정(Customise)을 눌러 아래 그림과 같이 블로그 템플릿 디자이너 창으로 간다.
=> 왼쪽 메뉴바의 고급설정(Advanced) > CSS추가(Add CSS)를 눌러 아래 그림의 오른쪽 부분과 같은 CSS코드 입력창을 연다.
=> 그림 아래에 있는 CSS코드를 아래 그림과 같이 붙여 넣는다.
스크롤바를 당겨서, 맨 아래쪽에 붙여 넣고, 창 오른쪽 위에 있는 적용하기(Add to Blogger)를 눌러 저장을 한다. 이제 블로그로 가서 확인을 해보자.
입력란에는 이전에 넣은 다른 CSS코드가 모두 보일 것이다. 그러한 CSS코드들이 손상되지 않도록 주의하자.
블로그 네비게이션바를 나타나지 않게 하는 CSS코드
/* Nav Bar
------------------------------------------------ */
#navbar { height: 0px; visibility: hidden; display: none;}
#navbar-iframe { height: 0px; visibility: hidden; display: none;}
위의 코드를 설명하면 다음과 같다.
/* Nav Bar
------------------------------------------------ */
#navbar { height: 0px; visibility: hidden; display: none;} <= 네비게이션바(Navbar)의 높이를 0px, 보여줄지 여부는 숨김, 화면에 보일지는 아니오
#navbar-iframe { height: 0px; visibility: hidden; display: none;} <= 네비게인션을 나타나게 하는 영역의 높이는 0px, 보여줄지 여부는 숨김, 화면에 표시할지 여부는 아니오
다시 내비게이션을 보이게 하려면
언제든 내비게이션 바를 보이게 할 수 있다.
첫번째 방법으로 보이지 않게 하였으면, 설정할 때와 마찬가지 방법으로 [Off]를 풀어주면 된다.
두번째 방법으로 보이지 않게 하였으면, 설정할 때와 마찬가지 방법으로 추가한 CSS코드를 지워주면 된다.