동적뷰의 텝 페이지를 드롭다운 메뉴로 변경시키기

그림1

그림2

동적뷰에서 탭 페이지는 <그림1>에서 처럼 헤더 아래 검은 바에 가로로 표시됩니다.
아래의 코드는 탭 페이지를 <그림2>와 같이 드롭다운 메뉴로 바꿔줍니다.

 #header.header .header-drawer #pages.tabs ul li{  
 margin: 100000px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 이며, 코드의 출처는 해외 블로거 southernspeakers 입니다.

참고로, 드롭다운 메뉴 최상단에는 <그림2>에서 보시는 바와 같이 'Pages'라고 표시됩니다. 이 문구를 원하는 문구로 바꿀 수 있지 않을까 싶어서 테스트용 블로그에서 여러 방식으로 시도해보았습나다만, 방법을 찾을 수 없었습니다.


! 내용수정

'Pages' 바꾸는 방법에 대해 +Hui-Su Jeong 님께서 댓글로 링크를 남겨 주셨네요. 아래에 해당 코드를 추가하였습니다.

 #pages span:first-child{  
 font-size: 0px !important;  
 }  
 #pages .menu-heading:before, .ss{  
 content: "목록";  
 font-size: 15px !important;  
 }  

코드 삽입 위치는 마찬가지로 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 삽입하실 때 '목록' 대신 원하는 글자를 입력하시면 됩니다.

블로거(blogger) 태그·레이블을 이용한 페이지 탭 활용

그림1

블로거의 페이지 탭은 보통 독립적인 빈 페이지를 작성하거나 다른 웹 주소로 독자를 보낼  때 사용되지만, 특정 태그(레이블)의 글 만을 보여주는 카테고리 기능으로도 이용할 수 있습니다.

그림2

블로거에서 태그 위에 마우스 커서를 올리면, 태그 검색 주소를 볼 수 있는데요. 바로 이 주소를 이용하는 것입니다.

예를 들어, '테스트1'이란 태그가 붙은 글만을 보여주는 페이지 탭을 생성한다고 가정해보겠습니다.

그림3

대시보드의 페이지에서 새 페이지로 '웹 주소'를 선택한 후 페이지의 이름, 그리고 하단에는 <그림2>에서 본 것과 같은 태그 검색 주소를 입력해줍니다.

태그 검색 주소는 다음과 같은 형태로 되어 있습니다.

http://자신의블로그주소.blogspot.com/search/label/자신이입력하고자하는태그

여기에 최대 검색 결과의 수를 제한하는 옵션을 추가하면, 주소는

http://자신의블로그주소.blogspot.com/search/label/자신이입력하고자하는태그?max-results=10

과 같은 형태가 됩니다. 뒤의 숫자 10은 자신이 원하는 숫자로 대체해 줍니다.

블로거(blogger) 페이지 탭 중앙 정렬시키기

그림1

블로거(blogger)에서 그림1과 같이 페이지 탭을 중앙에 정렬시켜주는 태그입니다.

 .PageList {text-align:center !important;}  
 .PageList li {display:inline !important; float:none !important;}  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.