티스토리블로그 이웃링크 스크롤바 적용하여 깔끔하게 만들기
- 블로그 관련 정보
- 2011. 6. 27.
반응형
최근 제 방명록에 몇몇 분들이 문의하시는 내용이 있었습니다.
바로 블로그 사이드바에 있는 이웃링크에 스크롤바를 어떻게 적용하는가?
였는데요.
CSS 에 스크립트만 넣어주면 되는 간단한 작업이기 때문에
포스트로 발행해서 알려드릴까 합니다.
티스토리블로그 이웃링크에 스크롤바 적용하기
일단 티스토리블로그에 이웃링크를 적용하기 전 모습을 봅시다
위 처럼 리스트 형식으로 주르르르륵 나열이 됩니다.
링크가 많이 없다면 그런대로 보기가 좋은데,
10개..20개..가 넘어가면서는 굉장히 길어져서
사이드바가 불필요하게 늘어지는 경향이 있습니다.
관리자 - 스킨 - HTML/CSS 편집
일단 관리자모드에서 스킨 - HTML/CSS 편집으로 갑니다.
CSS 에 스크립트 삽입
CSS 에 위와같은 스크립트를 삽입해 주시면 됩니다.
위 소스에서 height:180px 부분은 높이 설정 부분입니다.
픽셀 숫자를 적절히 조정하여 잘 어울리게 만들어 줄 수 있습니다.
소스 복사가 안되시는 분들은 아래 텍스트 파일을 다운로드 해주세요
복사를 해 준 뒤, CSS 하단에 붙여넣어 주시면 됩니다.
정상적으로 적용이 되면 위와 같은 모습을 나타냅니다.
참~ 쉽죠?ㅎㅎ
위 처럼 리스트 형식으로 주르르르륵 나열이 됩니다.
링크가 많이 없다면 그런대로 보기가 좋은데,
10개..20개..가 넘어가면서는 굉장히 길어져서
사이드바가 불필요하게 늘어지는 경향이 있습니다.
관리자 - 스킨 - HTML/CSS 편집
일단 관리자모드에서 스킨 - HTML/CSS 편집으로 갑니다.
CSS 에 스크립트 삽입
CSS 에 위와같은 스크립트를 삽입해 주시면 됩니다.
/* 이웃블로그 링크 스크롤 */
#sidebar #link ul{overflow-y:auto;height:180px
}
#sidebar #link ul{overflow-y:auto;height:180px
}
위 소스에서 height:180px 부분은 높이 설정 부분입니다.
픽셀 숫자를 적절히 조정하여 잘 어울리게 만들어 줄 수 있습니다.
소스 복사가 안되시는 분들은 아래 텍스트 파일을 다운로드 해주세요
복사를 해 준 뒤, CSS 하단에 붙여넣어 주시면 됩니다.
정상적으로 적용이 되면 위와 같은 모습을 나타냅니다.
반응형