2013년 7월 28일 일요일

블로거(blogger) 동적뷰의 뷰 스타일 선택 옵션 숨기기 #2

블로거(blogger) 동적뷰에서의 뷰 선택 옵션 설정은 예전에 구글 블로그 동적뷰에서 특정 뷰 제거하기 라는 글에서 한번 다룬 적이 있습니다. 오늘 소개하는 방법도 비슷한 내용입니다. 선택 옵션 자체를 완전히 숨기고자 할 때에는 오늘 소개하는 방법이 좀 더 손쉬운 방법이라고 할 수 있겠습니다.

그림1
동적뷰에서는 7가지 뷰 스타일을 선택할 수 있습니다. 헤더에 페이지 요소가 없을 때에는 그림1과 같이 7가지 뷰 스타일이 헤더에 일렬로 표시됩니다.

그림2

그림3
동적뷰에서 헤더에 페이지 요소를 추가하면, 그림3 처럼 7가지 뷰 스타일은 드롭다운 메뉴로 표시됩니다.

독자(reader)로 하여금 이 7가지 뷰 스타일을 선택을 할 수 없도록 하려면, 즉 해당 요소가 표시되지 않도록 하려면 블로그에 아래의 코드를 삽입합니다.

1:  #header #views {  
2:  display: none;  
3:  }  
4:     
5:  #header #pages:before {  
6:  border-left: 0px;  
7:  }  
8:     
9:  #header #pages {  
10:  margin-left: 100px;  
11:  }  

코드의 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.(복사하실 때 1: 2: 3: 등 코드 왼쪽의 숫자 행 표시는 알아서 삭제하셔야 합니다.)

그림4
코드의 9, 10, 11 행은 탭 페이지 요소와 왼쪽 가장자리 사이의 간격을 조절하는 요소입니다. 코드를 삽입할 때 10행의 '100px'을 자신이 원하는 수치로 대체해줍니다. 간격을 따로 설정하고 싶지 않다면, 9·10·11 행을 제외하고 1~7행만 삽입하면 됩니다.

댓글 1개: