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


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


티스토리 팁

내가 직접 만든 사이드바


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


사이드바 만들기

이제 사이드바를 만들어서 "꼬마낙타 블로그에 오신 것을 환영합니다." 라는 글자를 출력해 보도록 하겠습니다.
관리자 메뉴에서 [스킨] - [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 class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
<div class="boxMidR">
                      
꼬마낙타 블로그에 오신 것을 환영합니다.

</div>
<div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></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 class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
<div class="boxMidR">
                      
꼬마낙타 블로그에 오신 것을 환영합니다.

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

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

티스토리 팁

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


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


티스토리 팁 - 댓글 창을 위로 먼저 띄우는 방법


블로그를 하는 이유 중에 가장 먼저 꼽히는 것 중에 하나가 바로 내가 쓴 글을 읽어주는 독자와의 소통입니다. 내 글을 읽고 느낀 점이나 추가 정보, 논쟁 등을 다시 알려주는 피드백 시스템인데요. 흔히 댓글( 혹은 답글 ), 트랙백의 형태로 이루어집니다. 그 중에서 오늘의 티스토리 팁에서 살펴 볼 것은 댓글에 관한 것입니다.

여러 블로그들을 방문하다 보면 댓글 창의 위치가 어디에 나오느냐에 따라서 두 가지 형태로 분류 할 수 있습니다. 댓글의 리스트가 먼저 나오는 형태와 댓글 창이 먼저 나오는 형태가 있습니다. 선택한 스킨에서 기본적으로 위치를 지정해 놓은 경우도 있고 블로거가 임의로 댓글창의 위치를 변경한 경우도 있는데요.

[사진 : 티스토리 팁 - 댓글 창이 나중에 나오는 경우]

포스트에 달린 댓글의 리스트가 먼저 나오는 경우는 위와 같습니다. 어찌보면 가장 기본적인 형태인데요. 댓글의 리스트가 10개 미만이거나 감당 할 수 있는 정도의 갯수라면 상관이 없습니다. 오히려 댓글을 달기 위해 스크롤을 내리면서 다른 블로거의 댓글들을 보는 즐거움을 줄 수도 있지요.

하지만 댓글의 갯수가 10개, 20개가 넘어가게 되면 댓글을 쓰기 위해 내려야하는 스크롤의 양이 많아집니다. 흔히 "스크롤 압박" 이라는 단어를 많이 쓰는데요. 이렇게 되면 스크롤을 내리거나 "End" 키를 누르는 대신 열려있는 탭이나 윈도우 창을 꺼버리고 다른 곳으로 가는 경우가 많이 있습니다. 댓글이 많이 달리기를 바라는 분들에겐 안 될 일이죠. ㅎ

[사진 : 티스토리 팁 - 댓글 창이 먼저 나오는 경우]

반면 댓글 입력창이 먼저 나오는 경우는 위와 같습니다. ( "꽁보리밥" 님의 블로그 댓글창 부분 캡쳐입니다. ) 이 경우 댓글을 쓰기위해 내려야 하는 스크롤의 양이 매우 적기 때문에 조금이라도 댓글을 달고 싶으신 분이 계시면 쉽게 댓글을 달 수 있습니다. 다만 다른 블로거 분들의 댓글을 읽으려면 어짜피 스크롤을 내려야 하고, 자신이 단 댓글을 보기 위해서는 한참 스크롤을 내려야 하는 불편함이 있습니다. ( 이 점은 나중에 자바스크립트 프로그래밍으로 어찌 해 볼 수 있습니다만 ㅎㅎ )

아무튼 이렇게 두 가지 댓글창의 위치가 있습니다. 각각 장단점이 있구요. 그럼 오늘의 티스토리 팁에서는 댓글창의 위치를 임의로 바꾸는 방법에 대해서 알아 보도록 하겠습니다.


댓글창 위치 바꾸기

댓글 창의 위치를 바꾸기 위해서는 티스토리의 HTML/CSS 편집 기능을 이용해야 합니다. HTML 코드부분을 직접 수정해서 댓글 창의 위치를 조정해 볼 텐데요. 저의 경우는 기본 스킨이 댓글 창을 댓글 리스트 다음에 출력해 주고 있습니다. 이 댓글 창을 댓글 리스트 전에 먼저 출력하도록 바꿔 보도록 하겠습니다.


티스토리의 관리자 메뉴에서 [HTML/CSS 편집] 메뉴를 선택합니다.
[HTML/CSS 편집] 메뉴에 대해서 더 알고 싶으신 분은 다음 링크를 참조하시기 바랍니다.


[HTML/CSS 편집] 메뉴를 여시고 skin.html 부분을 살펴 봅니다.



티스토리의 스킨은 댓글 창을 구분해서 나눠 놓았는데요.


위 처럼 "<s_rp_input_form>" 라는 태그로 둘러 쌓여 있는 부분이 바로 댓글 쓰기 부분입니다. 댓글을 써 넣을 수 있는 <textarea> 부분과 쓴 댓글을 달아 놓을 수 있도록 하는 "확인" 버튼 등이 있습니다.

위 사진처럼 "<s_rp_input_form>" 부터 "</s_rp_input_form>" 까지의 부분을 잘라내기 합니다. ( 복사를 해서 위에다 붙여 넣으면 댓글을 써 넣는 부분이 2개가 되겠지요. 미관상 좋지도 않고 동작을 안 하는 경우도 있습니다. 잘라내기를 해서 붙여 넣도록 합니다. ㅎ )


이제 잘라낸 소스파일( 댓글 창을 표현하는 HTML 코드 )을 붙여 넣어야 합니다. 당연히 댓글 리스트를 나타내는 부분 위에 붙여 넣어야 댓글 리스트 위에 댓글 창이 나오는 형태로 바뀌겠지요. 댓글 리스트를 나타내는 부분은 다음과 같이 시작합니다.


댓글 리스트는 위와 같이 나타나구요. "..." 부분에 독자분이 남겨주신 댓글과 링크, 닉네임, 파비콘, 블로그 아이콘에 대한 정보가 들어갑니다. 소스 파일에서 "<div class="commentList">"를 찾아서 그 위에 잘라내기 했던 댓글창 소스를 붙여 넣기 합니다. 그러면 최종 적으로 다음과 같은 형태의 소스코드가 됩니다.


이제 [미리보기] 버튼을 이용해서 스킨이 어떻게 적용 되었는지 확인합니다.

주의

여기서 바로 [저장] 버튼을 누르시면 위험합니다. 스킨을 잘 못 편집했을 경우 예상과 다른 결과가 나오게 되는데, [저장] 버튼을 그대로 눌러버리면 스킨 편집의 결과가 바로 블로그에 반영되기 때문입니다.

반드시 [미리보기] 버튼을 눌러서 실제로 어떻게 적용되는지 확인을 하시기 바랍니다. ^^ 잘 못 하면 블로그 스킨 다 날아가는 수도 있습니다. ( 저도 몇 번 그런적이 있습니다 ㅜㅜ )

Before

After



댓글 입력 부분이 댓글 리스트 위로 올라간 것을 볼 수 있습니다.
마음에 안 드시면 위에서 했던 단계를 거꾸로 가시면 된까 간단합니다. ㅎㅎ
각자 자신의 블로그에 맞는 댓글 창 위치를 만들어 보세요 ^^




블로그 팁 - 이올린 추천 버튼 제거하기


티스토리 블로그의 가장 큰 장점은 아마도 스킨을 편집 할 수 있는 것이 아닌가 생각됩니다.
마음에 안드는 부분은 과감히 정리하고 내가 넣고 싶은 기능을 넣을 수 있는 것이 바로 티스토리의 매력인데요. 이번엔 오랫동안 마음에 안들었던 "이올린 추천 버튼"을 제거해 보았습니다.
( 이올린은 아마 메타 블로그 사이트 같은데 이용해보지는 않았습니다. ㅎ )



예전의 제 블로그를 보시면 추천메뉴와 카테고리 더 보기 사이에 "이올린에 북마크하기" 와 "이올린에 추천하기" 라는 기능이 있던것을 볼 수 있습니다. 이올린이라고 하는 사이트로 제 글을 보내는 플러그인을 사용해서 이런 버튼이 생겼었는데요. 미관상 별로 좋아 보이지 않았고, 스킨을 편집하다보니 저 위치에 있는게 스킨 편집을 방해하길래 없에 보려고 했습니다.



이올린에 글보내기 플러그인을 제거해도 그 버튼은 없어지지 않더라구요. 아마도 이미 보내진 글에 대해서는 버튼이 사라지지 않거나 아니면 그 버튼을 제거 할 수 있는 플러그인이 사용 종료 되었거나, 둘 중 하나로 생각이 듭니다.


이올린 추천 버튼 없에기

그래서 이올린 추천 버튼을 없에기 위해서는 직접 스킨 편집을 해야합니다.
관리자모드에서 [스킨] -> [HTML/CSS 편집] 메뉴로 들어가셔서 "style.css" 부분에 편집을 하셔야 합니다.

[사진 : CSS 편집 ]

바로 이 부분이죠..


HTML/CSS 편집 기능에는 두 가지 편집창이 있는데, 위 쪽은 HTML 코드를 수정하는 부분이고 아래부분은 스타일 시트인 CSS 파일을 편집 할 수 있는 부분입니다. HTML 코드 부분에는 아무리 찾아봐도 이올린 버튼을 수정할 수 있는 부분이 없더라구요. 그래서 할 수 없이 CSS에서 수정을 해야 합니다.


다음 코드를 style.css 편집 부분에 붙여 넣습니다.

/* 이 올림 북마크 버튼 제거하기 */
.EolinBmVote { display : none }

미리보기나 저장을 눌러서 결과를 보시면



이올린 추천 버튼과 북마크 버튼이 사라진 것을 볼 수있습니다. 한결 깔끔해 졌네요.


PS. 사실 이 방법은 실제로 이올린 버튼을 없엔 것이 아니라 이올린 버튼을 웹 브라우저 화면에 표시하지 않겠다는 CSS 구문을 추가한 것뿐입니다. 웹 브라우저에 따라서는 display:none 을 걸어 놨을 때, 출력은 안되지만 1px*1px의 공간을 잡아 먹고 있는 경우도 있었는데요. 아예 없앨 수 있는 방법을 찾고 있습니다 ㅜㅜ 아시면 댓글에 남겨주세요.


티스토리 팁-티스토리의 무한계정을 이용해보자. (파일 업로드 주소 따기)



티스토리의 가장 큰 장점 중에 하나가 웹상의 저장공간을 무한대로 제공한다는 것입니다. 사진을 몇 천개를 올리던, 음악 파일을 몇 천개를 올리던 티스토리는 묵묵히 저장공간을 제공하며, HTML 태그로 그 사진과 음악 파일을 접근 할 수 있게 해줍니다. 물론 하나의 파일에 용량 제한이 걸려있어 20MB 이상의 파일은 업로드 할 수 없습니다. 하지만 20MB라면 고화질의 사진을 업로드 할 수 있으며 음악파일의 경우 고음질의 음악파일을 제공할 수 있습니다. ( 동영상의 경우는 인코딩을 다르게 하거나 해야 하지만 일반적으로 고화질을 제공하기는 어려울 것 같습니다. )


지난번 포스트에서 HTML/CSS 편집하기와 파일 업로드에 대해서 배웠는데요.

2010/09/14 - [블로그/블로그팁 - 연재] - 티스토리 초보팁 20편 - HTML/CSS 편집을 이용한 블로그 스킨 수정

파일업로드 부분에서 파일을 업로드하고 그 파일을 가져다 쓰는 방법을 설명하지 않았네요. 오늘은 그 파일을 가져다 쓰는 방법, 그러니까 HTML 태그에서 src 속성이나 href 속성에 사용할 수 있는 URL 을 따오는 방법을 알아보겠습니다.


업로드한 파일 가져다 쓰기

티스토리 초보팁 20번째 팁에서 스킨 편집을 위한 파일 업로드 기능이 있음을 배웠는데요. 깜빡하고 업로드한 파일의 URL을 따올 수 있는 방법을 설명 안 해드렸네요. ( 한 블로거 분께서 비밀글로 조언을 해주셨습니다. 감사합니다. ( -- )( __ )( -- )


파일 업로드 메뉴를 들어가보면 위와 같이 되어 있습니다. 현재 스킨에서 사용중이거나 여러분이 업로드 해 놓은 파일들의 목록이 보입니다. 하지만 이 파일에 어떤 경로로 접근해야 하는지는 나오지 않습니다. 파일 목록에서 우클릭을 해서 속성보기를 해봤자 해당 파일의 경로가 아니라 파일업로드 페이지의 경로만 볼 수 있죠..

손수 제작한 배너를 스킨 상단에 배치하고 싶어도 이걸 가져다 쓸 방법이 없으니 있으나 마나한 기능입니다. 하지만 방법이 있습니다. ( 치환자로 어떻게 할 수도 있을 것 같지만 약간은 다른 방법을 이용해 보겠습니다. )


파일 업로드 탭에는 업로드한 사진의 미리보기를 지원합니다. 확장자가 gif 인 파일을 아무거나 선택해보면 미리보기 화면에 해당 사진이 출력되는 것을 볼 수 있습니다. 이 미리보기 기능을 이용해서 '파일업로드'를 이용해서 업로드한 파일이 어디에 저장되는지 알 수 있습니다.


대충 목록에서 그림 파일 하나를 선택하면 미리보기 쪽에 그림 파일의 미리보기 항목이 있는 것을 볼 수 있습니다.
미리보기에 띄워진 그림파일에서 우클릭을 한다음 속성(R)을 클릭합니다. ( 파이어폭스 사용자 여러분은 '그림 정보보기' 가 되겠죠. )


그러면 '주소(URL)' 라는 항목에 복잡한 주소가 뜨는 것을 볼 수 있습니다. 이게 바로 '파일 업로드'에 올려진 파일들의 주소입니다.
재미있는 사실은 '파일 업로드' 페이지에서 볼 수 있는 모든 파일의 주소에서 'http://cfs.tistory.com/custom/blog/10/100974/skin/' 부분까지 똑같다는 것입니다. ( 마지막에 나와있는 preview.gif 를 제외하고는 모두 /images/ 까지 똑같죠. )

물론 앞으로 여러분들이 업로드 할 모든 파일들도 다 같은 경로에 업로드가 됩니다. 이를 이용하면 사진 뿐만아니라 플래시 파일, HTML 문서, 동영상 파일 등도 업로드를 해서 가져다 쓸 수가 있습니다.

모든 파일들이 같은 경로, 즉 'http://cfs.tistory.com/custom/blog/10/100974/skin/'에 있는 것을 볼 수 있는데요.
중간에 100974 라는 부분이 아마도 티스토리 내부에서 블로그를 구분할 수 있게 해주는 ID 같은 건가 봅니다.



시험삼아 올려보기

그럼 시험삼아 파일을 하나 올려보고 링크를 시켜 보겠습니다.
간단한 HTML 파일을 하나 작성해서 올려보도록 하겠습니다.

<!-- 파일 업로드 테스트 -->
<html>
<head>
   <title>여러분의 무한계정!!</title>
</head>
<body>
   안녕하십니까? 여기는 티스토리의 업로드 공간에 올려져 있는 문서입니다.!!!<br />
  <a href='http://plusblog.tistory.com/457>다시 돌아가기</a>
</body>
</html>

이와 같은 HTML 파일을 작성한 다음 업로드를 해보겠습니다. 편의상 파일이름은 aaa.html로 하겠습니다.
파일 업로드를 이용해서 파일을 업로드하면,


업로드 된 파일 목록에 aaa.html 이라는 항목이 생긴걸 볼 수 있습니다.
업로드 된 aaa.html 파일역시 다른 파일들과 마찬가지로 'http://cfs.tistory.com/custom/blog/10/100974/skin/' 까지는 동일한 주소를 갖고 그 다음에 images/aaa.html 이라는 추가적인 주소가 됩니다. ( 즉 업로드한 aaa.html 파일은 'http://cfs.tistory.com/custom/blog/10/100974/skin/images/aaa.html' 이라는 경로로 접근을 할 수가 있다는 말입니다. )


업로드한 파일의 경로로 따라가보니 HTML 문서 하나가 열리는 것을 볼 수 있습니다. ( 인코딩 설정을 안 해놔서 이상한 문자가 뜰텐데 인코딩을 한국어로 바꾸어 주시면 제대로 보입니다 ^^ )

aaa.html 보러가기

이렇게 티스토리에서는 스킨을 편집 할 수 있도록 블로거분들에게 무한 계정을 제공하고 있습니다. 여러분들이 직접 만든 배너나 플래시 파일( 플래시 게임이라든지 아니면 위젯 어플리케이션 등.. ) 등도 이곳에 업로드를 하고 이처럼 주소를 따와서 블로그에 게재, 혹은 링크를 걸 수 있습니다.

어떤가요? 이 정도면 티스토리 블로그 참 편하지 않나요?? ㅎㅎ


+ Recent posts