티스토리 팁 - 사이드바 만들기

2010. 10. 12. 06:00

티스토리 팁 - 사이드바 만들기

대다수의 블로거들을 보면 사이드 바에 여러가지 기능들을 제공하고 있습니다. 티스토리에서 기본적으로 제공하는 기능도 있고, 블로거가 외부에서 퍼온 위젯을 달아 놓는 경우도 있습니다. 오늘 살펴 볼 티스토리 팁은 티스토리에서 제공하는 기능이 아니라 블로거가 사이드바 항목을 만들 수 있는 방법에 대해서 다룰 예정입니다.

참고 링크

티스토리 초보팁 11편 - 사이드바 설정하기
티스토리 초보팁 20편 - HTML/CSS 편집을 이용한 블로그 스킨 수정

내가 직접 만든 사이드바

티스토리의 가장 큰 장점이 바로 스킨을 편집 할 수 있다는 점이었는데요. 스킨을 편집해서 사이드바를 만들어 낼 수 도 있습니다. 특히 블로거가 만든 사이드바를 사이드바 편집 메뉴에서 조정을 할 수 있도록 하고, 좀 더 부드럽게 사이드바 처럼 보이게 해 놓을 수도 있습니다. 사이드 바를 보기 좋게 만드는 법에 대해서 알려드리겠습니다.

사이드바 만들기

이제 사이드바를 만들어서 "꼬마낙타 블로그에 오신 것을 환영합니다." 라는 글자를 출력해 보도록 하겠습니다.
관리자 메뉴에서 [스킨] - [HTML/CSS 편집] 메뉴를 선택합니다. HTML 편집 페이지에서 skin.html 부분을 선택합니다.
HTML 편집 창에서 "<s_sidebar>" 라는 부분을 찾습니다.

<s_sidebar>과 한참 밑의 </s_sidebar> 사이의 공간이 사이드바 항목들을 추가해 주는 부분입니다. 이 곳에 추가를 해주셔야 사이드바에 적절하게 표시가 되니 유의 하시기 바랍니다.

<s_sidebar_element>

꼬마낙타 블로그에 오신 것을 환영합니다.

</s_sidebar_element>

기본적인 골격은 위와 같습니다.
이 소스를 아무 </s_sidebar_element> 태그 밑에 삽입 합니다.

<s_sidebar_element>와 </s_sidebar_element> 사이에 있는 내용이 사이드 바의 항목이 되는 것 입니다.

사이드바에 추가가 된 것을 볼 수 있습니다. 하지만 뭔가 이상하죠? 다른 사이드바와 달리 흰색 박스 배경이 없습니다. 이래가지고는 사이드바 같다고 할 수가 없겠네요. 이제 흰색 배경을 한번 넣어 보겠습니다.

<s_sidebar_element>

꼬마낙타 블로그에 오신 것을 환영합니다.

</div>

</s_sidebar_element>

위 소스를 아까 넣었던 소스 대신에 넣어 봅니다. 아까 넣었던 부분은 지우고 그 자리에 한번 넣어 보세요.

아까와는 좀 달라진 것을 볼 수 있습니다.
"꼬마낙타 블로그에 오신 것을 환영합니다." 라는 메시지가 흰색 박스에 들어 있는 것을 볼 수 있습니다.

설명

<div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>

이 부분이 흰색 박스의 위쪽을 담당합니다. 박스를 잘 보시면 왼쪽 구석과 오른쪽 구석이 각지지 않고 둥글게 마무리 되어 있는 것을 볼 수 있습니다. boxTopR 이 박스의 윗 쪽 부분을 꾸미는 역할을 하며, boxTop-left 가 박스 상단의 왼쪽 둥근 모서리를, boxTop-mid 가 박스 위쪽 라인을, boxTop-right 가 오른쪽 귀퉁이 모서리를 담당하고 있습니다.

<div class="boxMidR">

꼬마낙타 블로그에 오신 것을 환영합니다.

</div>

boxMidR은 글자가 쓰여지고 있는 부분을 담당하며 글자가 쓰여지고 있는 부분의 배경 색을 흰색으로 만들어 줍니다.

<div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>

이 부분도 마찬가지로 하단의 양쪽 모서리를 둥글게 만들어 주는 부분입니다. Top 부분과 똑같이 생각하시면 됩니다.

"꼬마낙타 블로그에 오신 것을 환영합니다." 라는 부분에 다른 태그를 넣어도 됩니다. 예를 들면, 이미지 태그를 이용해서 배너를 넣어 줄 수도 있구요. 알라딘이나 다른 광고 코드를 넣어서 광고를 달아 놓을 수도 있습니다. 그냥 회색 배경에 광고가 덜렁 있는 것보다 다른 사이드바 항목처럼 흰색 박스에 넣어서 보여주면 좀 더 깔끔하게 보여 줄 수 있습니다.

사이드바 메뉴에 사용하기

여러분이 만든 사이드바는 티스토리가 제공하는 사이드바 관리 메뉴에 나타나게 됩니다. <s_sidebar_element> 태그를 이용해서 나타내 주고 싶은 사이드바 항목을 감싸 줬기 때문에 티스토리 메뉴는 <s_sidebar_element>와 </s_sidebar_element>사이에 있는 항목들을 하나의 사이드바 항목으로 인식하게 됩니다.

사이드바 메뉴에 들어가보면 "(이름 없음1)" 이라는 새로운 사이드바 항목이 있음을 알 수 볼 수 있습니다.
새롭게 추가된 항목인데요. 만약 이 사이드바에 이름을 부여해서 사이드바 관리 메뉴에서 순서를 바꿀 때 편하게 쓰고 싶을 수 있습니다. 사이드바 항목에 이름을 부여 할 수 있습니다.

<s_sidebar_element>

꼬마낙타 블로그에 오신 것을 환영합니다.

</div>

</s_sidebar_element>

아까 소스에서 바뀐 부분은 <s_sidebar_element> 태그 밑에 " 라는 것을 써 넣어 준 것 뿐입니다. 사실 이건 HTML의 주석인데 티스토리 사이드바 관리 메뉴는 이 주석을 사이드바 이름으로 인식하나 봅니다. 아까 소스에 새로운 부분만 추가해서 넣어주면,

사이드바 항목에 이름이 생긴것을 볼 수 있습니다. 새로운 사이드바 항목을 만들고 이름을 부여하고 싶으면 <s_sidebar_element> 태그 바로 다음에 "" 사이에 사이드바에 할당하고 싶은 제목을 써 넣어 주면 됩니다. 저는 "블로그 환영 인사"라는 제목을 넣었구요. ㅎ

참고 링크

티스토리 초보팁 11편 - 사이드바 설정하기

블로그를 운영하다보면 사이드바를 직접 만들어야 하는 경우가 많이 생깁니다. 광고를 유치할 수도 있고, 여러분의 배너를 만들 수도 있고 이웃들의 목록을 정리해서 넣을 수도 있습니다. 그럴때, 다른 사이드바 항목들과 잘 어울리도록 흰색 박스에 넣어서 보여주면 더 깔끔한 블로그를 만들 수 있을 겁니다. ^^

저작자표시 비영리 변경금지

파프리 블로그

티스토리 팁 - 사이드바 만들기

티스토리 팁 - 사이드바 만들기

+ Recent posts

티스토리툴바