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


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


티스토리 팁

내가 직접 만든 사이드바


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


사이드바 만들기

이제 사이드바를 만들어서 "꼬마낙타 블로그에 오신 것을 환영합니다." 라는 글자를 출력해 보도록 하겠습니다.
관리자 메뉴에서 [스킨] - [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> 태그 바로 다음에 "<!--" 와 "-->" 사이에 사이드바에 할당하고 싶은 제목을 써 넣어 주면 됩니다. 저는 "블로그 환영 인사"라는 제목을 넣었구요. ㅎ


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


댓글 쓰게 유혹하는 댓글창에 배경 사진( 이미지 ) 넣기


블로거를 힘내게 하는 것들 중에 하나가 바로 내 글을 읽어주신 독자로부터의 댓글일텐데요. 한 시간, 두 시간 공을 들여서 작성한 게시물에 댓글이 많이 달리게 되면 신나게 글을 작성 할 수도 있고, 간혹 댓글에서 더 없이 소중한 정보들을 얻기도 하는데요. 이전에 작성한 포스팅에서도 좋은글의 요소  중에 댓글이 많이 달리는 글이 있음을 언급했던 적이 있습니다.


많은 분들이 자신의 글에 댓글이 많이 달리기를 바라는데요. 댓글이 많이 달리도록 하는 여러가지 방법 중에서 댓글창을 이쁘게 꾸며 놓는 방법이 있습니다. 그 중에서도 댓글창에 댓글을 바라는 이미지를 배경 사진으로 넣어 놓으면 그냥 가려던 방문자분들도 관심을 보일 것입니다.


그냥 하얀색 입력창이었던 기존의 댓글창 대신에 귀엽게 댓글을 구걸하는 사진이나 댓글을 바라는 메시지등을 댓글창 배경 이미지로 지정을 해주면 방문자 분들의 댓글 참여율을 높일 수 있을 겁니다. ( 평범한 흰색 배경의 댓글 창은 시시하니까요. ^^ ) 오늘 티스토리 팁에서는 댓글창의 배경을 원하는 사진으로 꾸미는 방법에 대해서 알아보도록 하겠습니다.


댓글창에 배경 사진을 씌워 보자!!

댓글창에 배경 이미지를 씌우기 위해서 가장 먼저 필요한 준비물은 바로 사진입니다. 댓글창에 배경으로 설정해 두고 싶은 이미지를 준비해야 합니다. 제가 준비한 사진은 주인옆에서 구걸하는 개님의 사진인데, 거기에 "댓글 주세요~" 라는 글자를 입혀봤습니다. 일단 멋진 사진은 나중에 구하고 개님의 유머러스한 사진을 댓글창에 적용해 보겠습니다.


이 사진을 댓글창 배경으로 넣어 보겠습니다. 어떤 사진을 쓰던 상관 없으니 직접 하실 때 더 멋진 사진을 쓰시기 바랍니다. ( 너무 급조한 티 나죠 ㅋㅋㅋ )


관리자메뉴에서 [스킨]->[HTML/CSS 편집] 메뉴를 선택한 다음, "파일 업로드" 탭에서 (1) 파일 업로드버튼을 눌러서 사진을 업로드합니다. 그러면 (2) 아래 목록에 여러분이 올리신 파일이 등록된 것을 볼 수 있습니다. 업로드하신 파일을 선택하시면 좌측 미리보기 화면에 작은 화면으로 사진을 볼 수 있습니다.


위 사진의 빨간 화면이 업로드 된 사진인데요. 우클릭을 해서 속성(R)을 클릭해서 그림의 주소를 확인합니다.

참고

파이어폭스와 인터넷 익스플로러의 경우가 다른데요.



파이어 폭스의 경우 우클릭을 해서 "그림 정보 보기(F)"를 선택하시면 위와 같은 화면이 나옵니다. 여기서 위치라고 나와 있는 부분이 이 사진의 주소( URL )입니다.


인터넷 익스플로러의 경우 속성(R)을 들어가 보시면 "주소(URL)" 부분에 나와있는것이 사진의 주소입니다. 다른 웹 브라우져도 다르지 않을 겁니다. ㅎ


이 주소를 알아야 댓글창의 배경을 수정 할 수 있습니다. 메모장이나 다른 곳에 복사를 해 놓습니다.


다시 [HTML/CSS 편집] 부분으로 돌아와서 skin.html 을 클릭한뒤 [Ctrl] + F 를 눌러서 "##_rp_input_comment_##" 를 찾습니다. 아마 한 군데 밖에 없을 것인데 바로 이 부분이 댓글창을 의미합니다.


이런 코드가 있을 겁니다. 이제 이 부분을 바꿔줘야 합니다. 이제 아까 복사해 놓은 주소를 써야 할 때가 왔습니다.


위 소스의 빨간색 부분에 아까 복사해 놓은 주소를 써 넣습니다. 위 소스는 "댓글창 꾸미기" 파일에 있으니 다운받아 쓰세요 ^^
그리고 원래 있던 <textare>를 지우고 그 자리에 위 소스를 붙여 넣습니다.
그리고 미리보기를 하면,


위 처럼 댓글 창에 이미지가 들어간 것을 볼 수 있습니다. 이미지 크기에 따라 댓글창에 사진이 다 안 나올 수도 있습니다. 이럴 경우 rows="9" 부분과 cols="50" 부분을 조절해서 댓글창의 크기를 조절 할 수 있습니다. 확인을 하셨으면 [저장] 버튼을 누릅니다.

저는 일단 허접한 사진을 댓글창의 배경으로 설정했지만, 여러분은 더 멋진 사진, 더 어울리는 사진으로 댓글창을 꾸며보세요. ^^



아 그리고 위 소스코드에서 onClick 부분을 추가해서 댓글창을 클릭했을 때, 배경 사진이 없어지도록 했습니다. 클릭 후에도 배경사진을 그대로 유지하고 싶으시면 onClick="this.style.backgroundImage=''" 이 부분을 지우시면 됩니다. ^^


티스토리 초보팁 16편 -파비콘, 블로그 아이콘 만들기



여러분은 파비콘이라는 말을 아시나요? 사실 파비콘은 합성어라서 잘 모르시는 분들도 있으시겠지만 여러분이 항상 보고 있는 것입니다. 파비콘은 인터넷 웹 브라우저의 주소창에 표시되는 아이콘입니다. 네이버의 경우에는 검색창 모양의 파비콘을 사용하고 있고, 다음의 경우에는 D 자 형태의 아이콘을 사용하고 있습니다.



파비콘은 위에서 말했듯이 합성어인데, 영어로 Favorites와 Icon이 합쳐져서 만들어진 용어로 Favorites는 즐겨찾기를 말합니다. 다시말해서 즐겨찾기에 등록되는 아이콘이라는 뜻으로 즐겨찾기에 어떤 홈페이지를 등록하면 아이콘이 표시되는데에서 비롯된 말입니다.



블로그 아이콘은 댓글을 달 때, 여러분의 블로그를 대표 할 수 있는 아이콘을 말합니다. 댓글창을 보시면 각 블로거들이 사용하는 필명 옆에 어떤 그림이 있는 것을 볼 수 있는데 이것이 바로 블로그 아이콘이라고 하는 것입니다. 대부분 파비콘과 블로그 아이콘을 같이 쓰고 있으며, 같은 그림으로 사용하고 있습니다.


블로그 아이콘 설정하기

티스토리에서는 이런 파비콘과 블로그 아이콘을 다룰 수 있는 기능을 제공합니다. 먼저 블로그 아이콘을 설정해보도록 하겠습니다.


관리자 메뉴에서 '환경설정' -> '블로그 정보' 메뉴를 들어갑니다.


그러면 프로필을 관리할 수 있는 화면과 프로필 사진을 관리 할 수 있는 항목들이 나옵니다. 스크롤을 내리면 '아이콘'이라는 부분이 있습니다. 여기에서 블로그 아이콘과 파비콘을 지정할 수 있습니다.

'찾아보기...' 버튼을 눌러서 여러분의 컴퓨터에 저장되어 있는 사진을 업로드 하시면 됩니다. 단, 블로그 아이콘으로 사용될 사진은 jpg, gif, png 형식의 그림 파일만 되며 그림 파일의 가로 세로 사이즈는 16*16, 24*24, 48*48..(픽셀) 이렇게 3가지 종류의 크기밖에 저장이 되지 않습니다. 크기에 맞도록 크기를 변환시켜줘야 합니다.

사진의 크기변환은 그림판으로도 쉽게 할 수 있습니다. ^^

'삭제' 버튼은 기존에 있던 아이콘이 맘에 안들면 지워 버릴 수 있는 기능입니다. 파비콘이나 블로그 아이콘을 출력하지 않고 싶으면 삭제를 누르시면 됩니다. ( 그러면 기본적인 아이콘이 출력이 될 겁니다. )


파비콘은 약간 더 복잡합니다. 파비콘은 ico 형태의 파일만을 요구하기 때문에 사진을 ico 형태의 파일로 변환해 줘야 합니다. 따로 변환 프로그램을 가지고 있으신 분들은 파비콘으로 사용하고 싶은 이미지를 ico 형태의 파일로 변환 시키면 됩니다. 없으신 분들은 '삭제' 버튼 오른쪽에 있는 'ico로 변환'을 클릭하셔서 ico 파일로 변환 할 수 있는 사이트로 가셔야 합니다. ( 자세한 사용법은 밑에 설명해 놓겠습니다. )

ico 파일로 변환이 완료되면 '찾아보기' 버튼을 눌러서 업로드하고 최 하단의 '저장' 버튼을 눌러서 저장을 해주셔야 파비콘과 블로그 아이콘이 저장이 됩니다.


ico 파일로 변환

그러면 변환시키고 싶은 파일을 ico 형태의 파일로 변환하는 법을 알아보도록 하겠습니다. 여기서는 티스토리에 링크되어 있는 사이트를 이용하겠습니다.


아이콘메뉴의 파비콘 부분의 오른쪽을 보시면 'ico로 파일변환' 이라는 링크가 있습니다. 이 링크를 클릭해서 이미지 변환을 해주는 사이트로 들어갑니다.


사진을 올리고 보니 크기가 크네요 ㅎ
'Get Started' 버튼을 눌러서 다음 단계로 진행합니다.


그럼 업로드할 파일을 선택하는 윈도우 대화창이 나옵니다. 기본적으로는 ico 파일이 선택이 되어 있네요.


파일 형식을 'Imgae (png, gif, jpeg)' 로 바꾸어 변환을 원하는 그림 파일을 선택합니다. (선택하시고 열기 버튼을 눌러주세요)



그럼 위 그림처럼 여러분이 선택한 그림이 미리보기 형식으로 나옵니다.
이 그림이 맞으면 'Export' 버튼을 눌러서 진행합니다. 다른 그림을 원하시면 'Browse' 버튼을 눌러서 다른 그림을 선택해 주시면 됩니다.


저장될 icon 파일의 크기를 지정해 줍니다. 체크박스 형태라 중복 설정이 가능하지만 출력되는 파일은 하나밖에 없네요. 나머지 체크박스는 해제해 주시기 바랍니다. 파비콘이 표시될 부분은 굉장히 작기 때문에 16*16 으로도 충분하지만 512*512도 상관 없습니다.

다만 파일의 가로,세로 크기가 너무 클 경우 아이콘의 파일 크기가 커져서 나중에 블로그 로딩 속도에 영향을 줄지도 모르겠습니다. 저는 그냥 16*16으로 했습니다.

크기를 지정해 주셨으면, 'Save As' 버튼을 눌러서 다음으로 진행합니다.



여기서 중요한게 파일 이름이 원본 이름과 같아야 하더군요. 즉, 그냥 '저장(S)' 버튼을 눌러주면 바탕화면에 icon 파일이 생성됩니다.

여기서 파일 이름을 수정하면 icon 파일이 아니라 그냥 파일이 생성되어 나중에 업로드 할 때 인식을 못 하더라구요. 왜 그런지는 모르겠습니다. 이유는 이 변환기를 개발한 분에게 문의 하세요 ㅎ

이제 이 icon 파일을 파비콘 설정화면에 업로드를 하고 저장을 하시면 여러분도 파비콘을 갖게 됩니다.


블로그를 대표 할 수 있는 아이콘을 갖는 것도 나중에 여러분의 블로그를 홍보 하는데에 도움이 될 수 있습니다. 예를 들면, 애플의 한 입 베어문 사과 같은 로고는 애플을 상징하는 로고가 되었죠. 마찬가지로 여러분도 여러분을 상징할 수 있는 아이콘을 만들어서 등록해 보세요 ^^


▲ 이전 글 : 티스토리 초보팁 15편 -프로필 만들기
▼ 다음 글 : 티스토리 초보팁 17편 -블로그 주소 형식


+ Recent posts