구글 블로그(Blogger) 사이드바 글보관함 목록 개수 설정하기
구글 블로거 커스텀 강좌입니다. 구글 블로그에는 티스토리와 마찬가지로 사이드바 개념이 있으며 사이드바에는 여러 가지 모듈이 들어있습니다. 보통 이것을 위젯이라고 부르죠. 네이버 블로그의 그 위젯 맞습니다. 구글 블로거도 오픈소스여서 HTML 커스텀이 가능한데 글보관함 목록 개수를 기본적으로 변경하는 옵션이 제공될 줄 알았는데 없더라고요. 따라서 이 부분을 수동으로 변경해 보고자 합니다.
블로거 글보관함이란?
글보관함은 말그대로 아카이브이며 월 또는 년 단위로 설정도 가능합니다. 보통은 월별로 분리하는 편입니다.
글보관함 위젯은 설정 화면에서 가젯 추가를 통해서 세팅 가능합니다. 블로그 보관함이라는 가젯을 추가하시면 됩니다.
하지만 애석하게도 글보관함 옵션에는 개수에 대한 설정이 없습니다.
수동 설정 방법
아래의 CSS 코드를 복사합니다.
.BlogArchive li:nth-child(n+6) {
display: none !important;
}
이 코드를 스킨의 CSS 영역에 그대로 붙여넣습니다. 이게 끝입니다. 간단하죠? 다만 주의하실 점은 사용중인 스킨의 HTML 구조에 따라 선택자가 달라질 수 있다는 것입니다. 위의 선택자는 블로거에서 공통적으로 사용되는 블로그 보관함의 클래스명을 사용한 것이니 너무 심하게 커스터마이징한 구글 블로거 스킨 사용자가 아니라면 대부분 사용 가능할 것입니다.
자세한 설명
위의 CSS 코드를 떡주무르듯 어루만지기 위해서는 작동 원리를 알아야겠죠? 해당 코드에서 눈여겨 봐야 할 곳은 바로 :nth-child(n+6) 입니다. 이 뜻은 아래의 글에 자세히 나와있습니다.
CSS :nth-child 선택자 (n부터 n까지 등 다양한 선택 방법)
CSS :nth-child 선택자 (n부터 n까지 등 다양한 선택 방법)
여러개의 요소들이 있는 경우에 클래스명을 사용해서 원하는 리스트만 선택 후 CSS 스타일을 적용시킬 수 있지만 nth-child를 사용하면 규칙적이면서도 원하는 위치의 리스트를 꽤 손쉽게 선택할
rgy0409.tistory.com
즉 해당 코드의 의미는 "~부터" 라는 뜻입니다. n+6 이라고 마크업 했으니 <li>태그의 6번째부터 적용시킨다는 의미가 되는 것입니다. display: none !important; 는 다른 코드를 무시하고 강제적으로 선택된 요소를 없애는 코드입니다. 따라서 6번째 li 태그부터 없애겠다는 의미가 되는거죠. 그러면 최종 목록은 몇 개가 나오죠? 그렇습니다. 최대 5개까지 출력되는 것입니다. 이해되셨죠? 만약 목록을 3개만 나오게 만들고 싶다면 값을 n+4 라고 입력하시면 되는 것입니다.
적용 위치
구글 블로거의 수많은 코드 중 대체 어디에 붙여넣기를 해야 좋을지 모르시는 분들을 위해서 자세히 한번 더 언급해 드리겠습니다. 구글 블로거는 XML 문서라 티스토리의 HTML과는 약간 성향이 다릅니다. XML 문서 안에서 모든것을 컨트롤하게 됩니다. <head> 안에 보시면 <b:skin> 이라는 태그가 있고 바로 이어지는 <
