[팁] 티스토리 #2 스킨 사이드바 스크롤바 디자인 변경하기

check / 사용하던 스킨 백업 해 놓기.


티스토리 #2 스킨 사이드바 스크롤바 디자인 변경하기


티스토리 스킨 사이드바 스크롤바 수정 사진.

티스토리 #2 스킨 사이드바의 기본 스크롤바.

카테고리가 많으면 이렇게 우측에 스크롤바가 생기는데

디자인을 살짝 바꿔서 사이드바와 통일성을 높여보았다.

코드 수정을 위해 “블로그 관리” – “HTML / CSS 편집”에 들어간다.

<script src="./images/script.js"></script>

HTML에 들어가 600줄 부근 <script src=”./images/script.js”></script> 를 찾는다.

이 구문의 위와 아래에 코드를 추가해줘야 한다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax
/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
<script src="./images/script.js"></script>
<script>
    jQuery(".area_sub").niceScroll({
        zindex: 1001,
        cursorcolor: "orange",
        cursoropacitymin: 0,
        cursoropacitymax: 1,
        cursorwidth: "3px",
        cursorborder: "2px solid transparent",
        cursorborderradius: "7px",
        scrollspeed: 100,
        hidecursordelay: 3000
    });
</script>

이렇게 <script src=”./images/script.js”></script> 구문의 위, 아래로

코드를 추가해주면 끝이다.


티스토리 스킨 사이드바 스크롤바 수정 사진.

오렌지 색상으로 변한 스크롤바.

훨씬 통일감있고 깔끔해졌다.


tip / 구문을 응용하면 색상과 두께 등 여러 설정 변경이 가능하다.

답글 남기기