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

yourjune blog|2010. 2. 5. 19:14

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

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

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

사이드바가 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>


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



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


댓글()
  1. Favicon of https://njhlove.tistory.com BlogIcon njhlove 2010.03.06 13:20 신고 댓글주소  수정/삭제  댓글쓰기

    유용한 정보 감사합니다..^^

  2. Favicon of http://fever4u.tistory.com BlogIcon 그대를사랑합니다 2010.04.04 16:15 신고 댓글주소  수정/삭제  댓글쓰기

    6월님.. 저역시 사이드바에 배너이미지를 하나 넣고 싶은데요
    이미지 배너나 html배너 둘다 이미지 주소를 입력해서 넣으면
    이미지 위아래로 흰색이 생기면서 이미지가 쪼그라 들어있습니다.
    그래서 height 을 바꿨는데 흰색부분과 함께 이미지가 변하네요..

    어떻게 해야 하나요?? 이게 저의 소스입니다
    -->> [img src="https://t1.daumcdn.net/cfile/tistory/1779890D4BB836E115?original" border="0" width="300" height="100"]

    • Favicon of https://yourjune.tistory.com BlogIcon yourjune 2010.04.04 18:06 신고 댓글주소  수정/삭제

      해당 배너 소스를 분석해보니 (웹브라우져창에 주소를 넣어보니) 원래 위아래에 흰색 바가 있는 이미지이네요. 포토샾 같은 프로그램으로 이미지를 수정해주셔야 할 거 같습니다.

  3. Favicon of http://fever4u.tistory.com BlogIcon 그대를사랑합니다 2010.04.04 21:42 신고 댓글주소  수정/삭제  댓글쓰기

    감사합니다. 6월님 덕택에 사이드바에 잘 적용할수 있게 되었네요~~!! *^^*

    • Favicon of https://yourjune.tistory.com BlogIcon yourjune 2010.04.04 21:45 신고 댓글주소  수정/삭제

      네. 잘 해결되셨다니 다행이네요. 블로그 들어가보니 제가 관심있어 하는 주제도 몇 개 있던데 종종 들려보겠습니다 ^^

  4. Favicon of http://www.ligger.co.kr BlogIcon 라이거 2010.04.14 22:01 댓글주소  수정/삭제  댓글쓰기

    포스팅내용이 아주 상세해서 많은 도움이 되네요^^

  5. Favicon of https://h99ko.tistory.com BlogIcon 까만배경 2011.05.01 02:11 신고 댓글주소  수정/삭제  댓글쓰기

    카테고리 분류 전체보기 밑에 폰트,글자 크기 설정은 어떻케 하는지요??
    또한 댓글 의 글자크기도 궁금합니다.
    lif in mono 스킨을 사용합니다.

    • Favicon of https://yourjune.tistory.com BlogIcon yourjune 2011.05.02 22:25 신고 댓글주소  수정/삭제

      모든 스킨의 구조에 대해서 기억하고 있지를 못합니다. 직접 CSS를 분석해보시는 것이 좋을 것 같습니다.

      http://yourjune.tistory.com/508

      위 링크는 파이어폭스에서 사용가능한 Developer 툴입니다. IE나 크롬에서도 비슷한 애드온 프로그램이 존재합니다.

      일단 위 링크로 들어가셔서 해당하는 부분의 SPAN, DIV의 ID를 찾아낸 후 관리자의 CSS페이지에서 해당부분을 찾아서 코드를 수정해 주시면 됩니다. 제 말이 어렵게 느껴지신다면 다른분께 직접 수정을 요청하시는 것도 좋은 방법이 될 것 같습니다.