본문 바로가기
블로그 BOX/블로그 팁

티스토리 블로그 스크롤바 색상 변경하는 법 !

by 쿨펀치 2011. 12. 11.
반응형

티스토리 블로그 스크롤바 색상 변경하는 법 !

티스토리 블로그 댓글창에 방명록 스크롤바 색상을 변경해보자.
지금 까지 티스토리의 댓글창 수정을 통해 방문자의 불편한 점을 몇 가지 개선해보았습니다.
댓글창에 그림 넣기 , 댓글창 위치변경, 댓글창에 스크롤바 넣기 등을 통해 많은 개선이 보였는데요.
이번 시간엔 스크롤바의 색상을 자신의 스킨에 맞춰 변경을 해보기로 하겠습니다.


 티스토리 블로그 스크롤바 색상 변경하는 법 !

티스토리 관리자 모드에 접속해 주세요.

티스토리 관리자모드 접속해주세요.HTML/CSS 편집 선택

   
검색 Ctrl + F 하셔서 

<head>        <=== 요 항목을 검색해 주세요.

<head> 와 </head> 사이에 <style>소스를 넣어 삽입한다.

 

 
변경전

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

여러가지 소스

</head>

 
 

 
변경후

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">                                   
body {
scrollbar-arrow-color: #0066C8;
scrollbar-3dlight-color: #4F4F82;
scrollbar-darkshadow-color: #4F4F82;
scrollbar-face-color: #f4f4f0;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #d0d0d0;
scrollbar-track-color: #ffffff;
}
</style>

여러가지 소스

</head>



 

 

 
잠깐 !

가끔 스킨에 따라 <style type="text/css"> 소스가 있을 수도 있습니다.

예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
                                             중간 생략
</style>


 

 
해결법

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">                                   
body {
scrollbar-arrow-color: #0066C8;
scrollbar-3dlight-color: #4F4F82;
scrollbar-darkshadow-color: #4F4F82;
scrollbar-face-color: #f4f4f0;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #d0d0d0;
scrollbar-track-color: #ffffff;
}
</style>

<style type="text/css">

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
                                             중간 생략
</style>


 


해결법 어려운 게 아니다.  기존 <style type="text/css"> 있다면 머리가 쥐나시는 분들 있을 텐데.
<style type="text/css"> 소스의 하위 내용이 body와 관련이 없는 소스라면 <style type="text/css">이 여러 번 삽입 되는 것은 문제가 되지 않는다.

위 해결법 에서 처럼 이미 있어도 다른 내용의 소스라면 추가 사용 하면 된다.
 


 


 


 

쿨펀치의 세상리뷰 는 여러분의 소중한 댓글과 VIEW ON 클릭 구독 클릭이 큰힘이되어.
더 좋은 블로그를 만들 수 있게 하는 원동력이 됩니다.  

반응형

댓글