[블로그팁] 티스토리 사이드바 설정하기

아시다시피 티스토리에서 사이드바는 강력한 역할을 합니다. 본문영역을 제외하고 가장 다양하고 핵심적인 역할을 하는 곳이 사이드바입니다. 이런 사이드바에는 플러그인을 통해서 설정하거나 직접태그로 적어넣는 방법도 있습니다.

오늘을 이러한 다양한 방법에 대해서 알아보도록 하겠습니다.

우선사이드바를 설정하는 방법부터 알아보겠습니다. 스킨 - 사이드바 설정으로 들어갑니다.

사이드바가 1단인 스킨의 경우에는 사이드바 메뉴가 1개로 되어있고
제 블로그처럼 사이드바가 2단인 스킨의 경우에는 사이드바메뉴가 두개로 되어 있습니다.

설정방법은 아주 간단합니다. 우선 좌측의 요소를 드래그해서 필요한 부분에 드롭해주시면 됩니다.

좌측에 없는 메뉴는 어떻게 추가할까요? 이미지태그, HTML배너, 스킨수정으로 설정할 수 있습니다. 그 방법은 아래에서 자세히 설명합니다.

사이드바요소로 추가하기 위한 방법에 따라 분류하고 장,단점에 대해서 알아보도록 하겠습니다.


1. 플러그인이나 위젯에서 설정하기
장점 : 쉽게 사이드바의 요소로 추가할 수 있다.
단점 : 미리 만들어진 플러그인이나 위젯만 설정할 수 있다.

다음검색창을 사이드바에 설치해 보겠습니다.

우선 플러그인에 들어가서 Daum 검색창을 사용으로 설정합니다.

그런다음에 사이드바 설정으로 들어가 Daum 검색을 사이드바쪽에다가 끌어다 놓으면 됩니다.

2. 이미지배너로 설정하기
장점 : 비교적 쉽게 배너를 설정할 수 있다.
단점 : 이미지만 보이게 배너설정이 가능하다. 사이드바 설정에서 뺄시에는 나중에 다시 추가하려면 재작성해야 한다.

이미지 배너설정을 통해서 Daum View배너를 설정해보도록 하겠습니다. 다음뷰에서는 html태그의 형태로 배포되지만 이미지배너로도 설정할 수 있습니다.

http://daumview.tistory.com/36 로 가면 배너/엠블렘 설정페이지로 갈 수 있습니다.

일단 이미지배너출력 을 클릭해줍니다.

편집으로 들어가서

이름 : 다음 뷰
이미지 URL : http://img-section.daum-img.net/blognews/banner/big.gif
연결할 URL : http://v.daum.net

을 입력해줍니다.

그런다음 자신이 설정하고자 하는 위치에 드래그해서 위치해준 뒤 저장을 누릅니다. 첫페이지로 돌아와 사이드바에 제대로 설정이 되었는지 확인을 합니다.

3. HTML배너로 설정하기
장점 : 다양한 태그로 배너설정이 가능하다.
단점 : 이미지배너와 마찬가지로 설정에서 뺀뒤에는 나중에 추가하려면 다시 작성해야 한다.

html배너출력 메뉴를 이용하여 다음뷰배너를 설치해보도록 하겠습니다.

우선 html배너출력을 눌러 배너를 추가한 뒤 편집을 눌러 편집메뉴로 들어갑니다. 이미지배너와의 차별을 두기위해서 이미지 아래줄에 "다음 뷰 가기"라는 문장을 삽입해보겠습니다.

이름 : 다음뷰
html소스 :  
<a href="http://v.daum.net" target="_blank"><img src="http://img-section.daum-img.net/blognews/banner/big.gif" alt="Daum view" width="162" height="52" /></a>
<div>다음 뷰 가기</div>

을 입력합니다.

확인을 누른 후 원하는 위치로 드래그해줍니다. 저장하고 제대로 설정이 첫페이지로 돌아가 제대로 설정이 되었는지 확인합니다.

4. 스킨메뉴의 HTML 설정으로 s_sidebar_element로 추가하기
장점 : 플러그인이나 위젯처럼 사이드바의 요소를 쉽게 추가, 제거할 수 있다.
단점 : 위의 방법들보다 다소 어렵다. HTML수정시 사이드바 순서가 바뀌는 현상이 있다.

html로 직접설정하는 방법을 해보겠습니다. html의 사이드바요소로 추가할때는 가끔 사이드바 순서가 뒤죽박죽해지는 현상이 있습니다. 미리 사이드바 구성을 미리 적어두거나 기억해두어야 합니다.

우선 <s_sidebar_element>를 찾아 해당 부분을 찾아줍니다.

눈치가 빠르신분들은 아시겠지만 <s_sidebar_element></s_sidebar_element>  빠르신분들은 아시겠지만 저 태그사이에 필요한 부분을 찾아서 넣어주면 사이드바 요소로 추가가 됩니다.

</s_sidebar_element> 로 다른 사이드바요소가 끝나는 부분의 밑에
<s_sidebar_element></s_sidebar_element>를 추가해줍니다. 그리고 그사이에 필요한 태그를 적어주면 됩니다.

'다음 뷰 배너'라고 적힌 부분이 사이드바 요소 이름으로 추가됩니다.

<s_sidebar_element>
<!-- 다음 뷰 배너 -->

<a href="http://v.daum.net" target="_blank"><img src="http://img-section.daum-img.net/blognews/banner/big.gif" alt="Daum view" width="162" height="52" /></a>
<div>다음 뷰 가기</div>

</s_sidebar_element>

저장한 뒤 사이드바 메뉴로 와 제대로 설정이 되었는지 확인합니다. 드래그해서 필요한 부분에 추가해주니다.

첫화면의 사이드바에 적용이 되었습니다.