2009년 4월 5일

Blogger Sidebar 에 링크 목록 위젯을 순위 로 만들기.

먼저 '링크목록 위젯' 을 추가하지 않았다면 레이아웃 -> '페이지 요소'에서 '가젯 추가' 로 추가합니다.

그리고 HTML 편집으로 갑니다.
'도구 템플릿 확장' 에 체크합니다.

다음 브라우저 검색으로 'sidebar ul' 을 찾습니다.
그 리스트 바로 아래에 아래 내용을 추가합니다.

.sidebar ol {
list-style:number;
margin: 0 2em 1.25em;
padding:0;
}

마지막으로 브라우저 검색으로 맨 위에 추가한(혹은 이전에 있었던) 위젯 이름을 검색합니다.
그리고 ul 로 되어 있는 태그를 ol 로 바꿔줍니다.

이렇게 하면 왼쪽 그림이 오른쪽 그림으로 바뀝니다.

추가로 ul 의 리스트와 비슷하게 하기 위해서 li 스타일도 정해줍니다.

.sidebar ol li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:3px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height:1.4em;
}

그런데 숫자는 아래 언더라인이 가질 않네요.

해결방법이 있을 지 모르겠네요. 혹시라도 아시는 분 계시면  알려주시면 고맙겠습니다.

그리고... css 에서 margin 과 padding 순서 위, 오른쪽, 아래, 왼쪽 순서.. 시계방향이라는거.