[Tistory] 티스토리 블로그 오른쪽 사이드바 만들기

오른쪽에 사이드바를 만들기 위한 방법이다.

순서데로 따라하면 된다.

 

1. 왼쪽아래 스킨 편집으로 들어간다.

2. 오른쪽에서 html편집을 클릭하여 스크립트를 연다.

 

3. ctrl + F를 눌러 "sidebar"를 검색하여 가장 맨 처음 나오는 부분을 본다.

   그러면 아래와 같이 <div id="wrap"> 아래 <div id="sidebar">를 볼 수 있는데,

   저 라인을 마우스로 클릭하면 하이라이트가 된다.

   그리고 휠을 내려 아래로 내리다보면, 마찬가지로 하이라이트가 되어진 부분</div>이 있다. 그부분이 왼쪽 sidebar의 처음과 끝을 나타내는 것.

 

4. </div> 아래 다음과 같은 코드를 입력한다.

	<!-- 오른쪽창 사이드바 -->
	<div id="ngside">
		오른쪽 사이드바 생성함
	</div>

5. CSS를 편집해준다. 위에 탭을 클릭하여 이동

6. ctrl + F를 눌러 "sidebar"를 검색한다. 그럼 아래와 같이 쭉 속성이 나오는데, 이 부분은 왼쪽사이드바에 대한 속성이다. 이제 오른쪽 사이드바의 속성을 만든다.

7. 아래 다음과 같이 코드를 작성한다.

/* ngside 내가 만듦 */
#ngside { position: absolute;
	right: 200px; bottom: 0;
	padding: 0;
	width: 300px; height: 100%;
	background-color: #fff;
	border: 1px solid #ddd;
	cursor: default;
}
@media (max-width: 1817px){
	#ngside {display: none;}
}

옵션에 fixed 로 설정하면 스크롤을 돌려도 고정된다.

 

8. 적용을 누르면 오른쪽에 새로운 사이드바가 생길 것이다.

(참고: https://nilgi.tistory.com/103)