파란토마토 블로그

여러분,

내 블로그 방문자들이

어떤 검색어로 왔을까?
어떤 검색엔진을 통해서 찾아왔을까?
어떤 검색어, 게시물이 가장 인기일까?
언제 가장 많은 사람이 왔을까?
글을 몇 개 정도 읽고 갈까? 왔다가 바로 나가는 건 아닌가?
몇 분 동안 글을 읽고 갈까?

궁금하시죠?

저는 다른 분들의 통계를 보는 것도 재밌더라구요.
여러분도 통계 툴 하나쯤 사용하시면서 저에게 구경하는 재미도 주고 그러세요^^
그런 의미에서 제가 블로그 통계 툴을 여러 개 모아서 소개해드릴게요.


티스토리 관리자에서는 유입경로와 유입키워드 기본 기능을 제공합니다.
네이버나 일반 미니홈피에 비하면 굉장히 매력적인 기능이죠.

하지만 더 전문적이고 자세한 정보를 제공하는 통계툴들이 여기 있습니다.
통계툴을 사용해보시면 티스토리 카운터가 얼마나 심한 뻥튀기 선수인지 알 수 있습니다.
한동안은 인정하기 싫은 마음에 괴로우실 것입니다. ^^;;


1. 가장 쉽고 가장 유명한 다음 웹인사이드

다음 아이디 하나쯤 없는 사람은 없으므로 새로운 가입의 압박이 없다는 것과 아주 쉬운 사용법이 매력입니다. 제가 가장 즐겨 사용하는 통계 툴입니다. 다른 것도 몇 개 더 가입해놓긴 했는데 저는 다음 웹인사이드가 쉬워서 거의 이것만 씁니다. 제가 작성한 통계게시물도 거의 모두 다음 웹인사이드를 이용한 것입니다.

사용법은 ZET님께서 자세히 설명해주셨습니다.

2. 그 다음으로 알려진 것은 구글 아날리틱스

가입이 좀 귀찮고 뭔가 불친절한 구글 사용법 때문에 어려워서 처음에는 거의 사용을 안했지만 괜찮더군요. 거의 모든 유입검색어를 끝까지 다 볼 수 있다는 것, 게시물별 체류시간 등을 쉽게 알 수 있어서 좋습니다.

전체 요약정보 확인은 다음 웹인사이드가 편하고, 세부 정보를 확인하기에는 구글 아날리틱스가 좋다고 생각합니다. 다음 웹인사이드에 비해서 방문자 수치와 페이지뷰 수치가 낮게 나와서 살짝 기분 상한다는 단점이 있습니다.

이것 역시 ZET님 게시물입니다.

  )께서 소개해주신 위젯입니다.

사용법까지 자세히 소개해주셔서 제가 별로 추가할 말은 없지만 굳이 한 마디 보태자면... 어쨋든 좋습니다~ㅋㅋ
카운터 모양도 예쁘고 칼라나 크기도 다양해서 내 블로그 테마에 맞는 디자인을 선택할 수 있다는 것이 장점입니다. 또한,, 가장 큰 장점은 다른 위젯에서는 따로 따로 설치해야하는 기능들을 이 위젯 하나만 설치하면 모두 실시간으로 확인 가능하다는 것입니다. (※오늘 페이지뷰, 총 페이지뷰, 오늘 방문자수, 총 방문자수, 실시간 접속자수 등등을 작고 예쁜 위젯이 실시간으로 보여줍니다.) 제 블로그 오른쪽 하단에 붙어있는 파란 박스가 바로 Histats입니다.

4. 이 아래의 것들은 모두 ZET님이 소개해주신 툴들입니다. 이 툴들은 제가 사용해 보지 않은 툴들이라서 장점과 단점이 무엇인지 잘 모르겠습니다. 저는 예시화면 캡쳐만 했습니다. 자세한 사용법과 설명은 ZET님의 게시물을 참고해주시기 바랍니다.

 

(요건 ZET님 캡쳐입니다.)

티스토리에서 간편하게 로그인하는 방법은 여러가지가 있습니다. 이미 많은 분들이 알고 계시지만 모르시는 분들을 위해서 로그인 방법을 알려드리겠습니다.

다른 곳에서 로그인해서 오는 방법

1. My 블로거뉴스에서 내 블로그로 바로 오기
2. 애드클릭스에서 내 블로그로 바로 오기
3. 티스토리 홈페이지에서 내 블로그로 바로 오기 (이건 당연한 거고^^;)


내 블로그에 접속할 때 자동으로 로그인하는 방법

http://내블로그.tistory.com/login?loginid=이메일주소&password=암호
(※이 주소를 바로 누르면 새창이 열리는데 거기서 자신의 블로그 주소, 이메일주소, 암호로 고치고
 즐겨찾기에 추가하시면 편리하게 사용 가능합니다.)


티스토리 블로그에서 로그인하는 방법

1. 티스토리 메뉴 중에 관리자 누르기 혹은 블로그 주소 뒤에 관리자 기능 치기 (http://blutom.com/owner)
블로그 주인은 관리자 페이지의 센터로 넘어가고, 방문자들은 그 블로그의 초기 화면으로 넘어갑니다.

2. 블로그 아무 위치에서 Q/q 누르기(자동 로그인 기능입니다.)
혹은 블로그 주소 뒤에 로그인 치기 (http://blutom.com/login)
블로그 주인도, 방문자들도 모두 초기 화면에서 로그인이 됩니다.


근데 이 방법들의 문제는 그 블로그의 초기 화면으로 넘어간다는 것입니다.  현재 게시물에서 댓글 달고 싶어서 애써 로그인했는데 이렇게 초기 화면으로 넘어가 버리면 대단히 크나큰 의욕상실과 귀차니즘의 발현으로 인하여 왠만한 투지와 근성이 없으면 댓글 달기를 포기해 버리는 초비극적인 상황이 발생하게 되는 것입니다!!

로그인 후에 초기화면에서 다시 좀전에 그 게시물을 찾아 들어가서 댓글달기는 하늘에서 별따기요, 가난하고 외로운 블로거에게 희망과 사랑을 선물하겠다는 인류애적인 박애정신이 없이는 정말 실천하기 힘들지 않습니까??


압니다.. 다 알아요~
제 블로그에 수천명의 방문자들이 왔다 가시면서도 댓글수가 형편없는 이유가 다 저런 것 때문 아니겠습니까.


하지만 제가 또 누굽니까?? 친절한 주인장 아닙니까?? 딸랑딸랑~~♪

그리하여 어제도 오늘도 방문자를 위해서 이 한 몸 불사르는 파란토마토가 여러분을 위해 편리한 '현재 게시물에서 바로 로그인이 가능한 버튼'을 만들었습니다. (※제 블로그에는 댓글 다는 부분에 로그인하기가 있습니다.)

그런데 이 방법에는 두 가지 버그가 있었습니다. 늘 그런 것은 아니고 가끔 이런 일이 생기더군요.

1. 한 번만에 로그인이 안되고, 두 번을 눌러야 로그인된다.
2. 한 번만에 로그인은 되는데 관리자 버튼을 눌렀을 때처럼 초기화면으로 가버린다.


저는 몇 번의 시행착오 끝에 오류 없이 로그인하기 방법을 알아냈습니다.

<a href="[#샵_blog_link_샵샵]login" title="현재 게시물에서 바로 로그인하기">
<font color=#1bb4ff>  이 게시물에서 바로 로그인하기^^</font></a>

이 방법으로 하니 저런 오류가 생기지 않고 바로 현재 게시물에서 로그인이 되더라구요.
제 블로그는 복사하기 기능이 안되니까 메모장으로 다운받아서 고쳐쓰세요.. ^^.

편리하게 로그인하기 태그.txt

title 부분은 안넣으셔도 되고, font color와 뒤의 문구는 마음에 드는 것으로 수정하시면 됩니다.

제가 쓰는 스킨은 티스토리 최고의 인기스킨 공지용 블랙스킨!!

그런데 기본 스킨에서 공지용 블랙스킨으로 바꿨더니...
디자인은 깔끔한데 필수 기능 몇개가 사라졌더군요.

제일 마음에 안드는 것은
1. 링크가 전혀 표시되지 않는 것!!!
2. more/less 의 아이콘이 안나타나는 것!!!

부단한 연구와 노력 끝에 more/less 아이콘을 나오게 하는 건 성공해서
저번에 게시물도 올렸습니다.

티스토리 more/less(더보기, 감추기) 기능에 대해 알아보자!
티스토리, 이미지 직접 올리기로 more/less 아이콘 등록하기, 댓글창 버튼 넓히기 방법


하지만 여전히 링크는 해결되지 않았습니다.

저는 일일이 링크에 밑줄을 나오게 하거나 색깔을 바꾸었는데
귀찮기도 하고, 파랑실선이 계속 드러나 있으니 깔끔하지가 않더군요.


그러던 어느날, bluenlive님께서 무지몽매한 중생을 불쌍히 여기시어
하늘과 같이 높고 바다와 같이 넓으신 은혜를 베풀어 주시사~ 드디어 구원을 받았습니다.


지금은 제 블로그 게시물 내에 삽입된 관련글에 모두 빨간 점선이 나타나구요,
제 블로그 로고, 블로그 이미지, 공지, 사이드바 등 게시물이 있는 곳이면
"어디선가 누군가에 링크가 생기면~ 틀림없이 나타난다~ 홍반장~" 이 아니라;;

파란 줄이 생깁니다. 부러우시죠?? ^^


자자~ 침 닦으시고..
여러분도 할 수 있습니다~

조금 어렵지만 웹맹인 저도 했으니 여러분도 할 수 있습니다~


먼저 이것은 skin.html 이 아니라 style.css 에서 수정하셔야 합니다.

a:link - 링크가능한 곳을 나타내는 코드
a:visited - 한번 방문한 곳을 나타내는 코드
a:hover - 마우스를 가까이 대었을 때 밑줄 나오게 하는 코드

다음은 공지용 블랙스킨 style.CSS 파일의 기본 설정입니다. (본문이 아니라 사이드바의 설정)

사이드바 등의 링크에 마우스를 가까이 대면 파란 밑줄이 나오게 하는 명령어 코드입니다.
만약 빨간 민줄을 원하시면 blue를 red로 바꾸시면 됩니다.

저는 여기서 빨간 글자 부분을 아래와 같이↓↓↓↓↓↓ 수정해주었습니다.

border-bottom-width: 1px; ㅡ 밑줄의 굵기
BORDER-BOTTOM-COLOR: blue; ㅡ 밑줄의 색깔
border-bottom-style: solid;  ㅡ 점선인지, 실선인지를 결정

저는 파랑색 실선이 나오도록 했습니다.
지금 제 블로그 아무 곳이나 마우스를 대보시면 파란 밑줄이 나올 것입니다.

현재 제 블로그는 복사가 안되므로, 보고 따라치기가 어려운 분들을 위해서 텍스트 문서를 첨부해드리겠습니다. 이것을 다운받으셔서 Style.css 에 복사해서 여러분 각자의 취향에 맞게 수정하시면 됩니다.

밑줄 나오게 하는 태그.txt

아래는 수정 후의 모습입니다.

저는 링크될 부분의 색상은 빨간 점선으로 했구요,
color:#508; border-bottom: #ffc0c0 1px dotted;  - 링크에서 표시될 색상과 선 굵기, 선 모양(점선) 

마우스를 가까이 댈 때는 위와 같이 파란 밑줄입니다.


현재 제 블로그는 복사가 안되므로, 보고 따라치기가 어려운 분들을 위해서 텍스트 문서를 첨부해드리겠습니다. 이것을 다운받으셔서 Style.css 에 복사해서 여러분 각자의 취향에 맞게 수정하시면 됩니다.

링크될 부분 빨간줄 표시 태그.txt

2차 도메인 (http://blutom.tistory.com , http://blutom.com )을 등록하는게 보통이 아니네요..
어제는 꾸벅꾸벅 졸면서 깨어진 내부링크 수백 개를 수정해주느라고 정말 딱 토할 것 같았습니다.ㅜㅜ

이거 하면서 여러 고수님들의 도움을 많이 받았는데요,

저에게 2차 도메인이 뭔지 최초로 알게 해주었고, 아직도 2차 도메인을 찾아서 오는 리퍼러가 꽤 된다는 전설적인 게시물의 주인공, Rukxer님,

이 게시물은 2차 도메인의 개념에 대한 설명이 있으니 꼭 읽어보시는게 좋을 겁니다.

(개념이 없던 저는 이 분의 게시물에다 수많은 뻘리플과 허공에다 대고 삽질하는 센스를 보여주기도 했습니다. 지금은 그 댓글들 삭제하고 싶은데 비밀번호가 기억이 안나네요. 어쨋든, 저는 2차 도메인의 개념도 모르다가 블로그에 자신 만의 도메인 사용이 가능하다는 걸 알고는 "아싸라비야~~♪"하면서 티스토리로 전격 이사왔다가 그 모든 것의 1순위는 도메인 구입이라는 것을 알게 된 순간, 난관에 부딪혀서 블로그 개설만 해놓고 1년을 넘게 쉬게 되었지요.ㅋㅋ 도메인 구입하는 것도 그 당시 저에게는 너무 힘들었거든요.)

그리고 어제 알게 되었지만 친절히 은혜를 베푸사, 친히 이 곳에 찾아오셔서 설명해주신  열산성님


너무도 당연하고 쉬운 절차가 웹맹인 저한테는 머리가 깨어질 만큼 골치 아팠다는 거 아니겠어요?
그래서 저의 고생을 되풀이하지 않도록 여러분께도 소개합니다!!


전격 공개~~ 진짜 쉬운 2차 도메인 등록방법!!

1. 일단 도메인을 삽니다.
인터넷으로 조회해보니 싼 곳이 몇 군데 있더군요. 근데 웃긴 건 http://ssandomain.com(싼 도메인)은 쌀 것 같은데 안싸더라구요.ㅋㅋ 잘 알아보시고 싼 곳을 골라보세요.


2. 마음에 드는 도메인을 고르고 결재를 하세요~


3. 그 다음부터가 본격적인 단계입니다.
DNSever에 가서 자신이 구입한 도메인을 추가하고, 호스트 관리로 갑니다.

빨간 박스 보이시죠? 저건 제 아이피가 아니라 티스토리 공통 아이피인가 봐요. 저걸 입력해줍니다.

4. 그 다음 파란 박스 보이시죠?? 네임서버 설정 변경으로 가세요.
저는 빨간 박스 입력까지가 끝인줄 알았는데 그게 끝이 아니었던 것입니다!

저건 DNSever에서 할 수 없고, 자신이 도메인을 구입한 업체에 가서 해야합니다.


5. 도메인 구입한 싸이트에 가서 정말 어렵게(?) 찾아낸 네임서버 변경 메뉴;;
(메뉴가 진짜 숨어있었음..ㅜㅜ)

6. 변경 신청하기를 누르면 다음과 같은 것이 나옵니다.

저는 블루웹이라는 곳에서 샀기 때문에 저런 표시가 나옵니다.
저걸 DNSever로 바꿔줘야 한다는 것입니다!


7. DNSever 호스트를 넣어주면 저런 메시지가 나옵니다.

이상한 건 Primary(1차 네임서버)에 분명히 ns1.dnsever.com 을 입력했는데 자동으로 ns2.dnsever.com으로 바뀌어버리네요.

암튼 그러면 엔터 좀 작작 치고 15분간 기다리라는 빨간 메시지가 영어로 나옵니다.


8. 그래서 기다렸습니다.
잠시 후 DNSever에 확인 차 가봤더니 네임서버 1과 네임서버 2가  bluweb.co.kr이 아니라 dnsever.com으로 성공적으로 변경이 되었습니다. 도메인 연결은 아직 안되네요.

저처럼 무식하고 성급한 사람들을 위해서 12시간~48시간 정도 기다리라고 안내 메시지가 나옵니다.

하지만 1시간도 안되어서 연결되었답니다.^^
네임서버 변경 외에는 어제 다 해놔서 그런가봐요~


아.. 이거 하느라고 정말 고생했습니다..
여러분은 이제 쉽게 하세요~~

블루톰.컴 애용하여~
주소 변경 쉽게 하세!


※아참. 사족!
DNSever에서 지원해주는 도메인인 wo.tc 도메인은 네임서버 변경 절차가 없습니다.
제가 처음에 wo.tc 주소를 한 번 쓰는 바람에 더욱 헤맸던 것 같습니다.

사족2.
저 주소로 연결되고 나면 환경설정에서 2차 도메인 등록해야하는 건 아시죠? ^^

주소를 변경하고 나니 가슴팍이 쓰리네요ㅡㅡ;;

우선 검색싸이트나 메타싸이트에 재등록해야 한다는 귀차니즘의 압박도 있지만 그보다 블로거 뉴스에도 재가입해야하고 (처음 등록했던 블로그에서 도메인 변경을 해서 실제 운영하는 블로그와 블로거가 같더라도) , 또 많은 분들과 소통의 흔적, 트랙백, 링크 등도 다 깨어지게 되니 참 안타깝습니다.
 (티스토리에서 옮겨간 주소로 자동 링크를 해주면 얼마나 좋을까요?)


블로거 뉴스 송고한 것까지 다 삭제된다는 것도 참 아까워요. 조회수나 추천수가 많은 뉴스를 일부러 보존해놨었는데.. 그 모든 걸 다 버려야한다는 것 때문에 오랫동안 망설였네요.

이렇게까지 하는 건 다음에도 좋지 않을 것 같은데 고객센터에 문의하니 탈퇴 후 재가입밖에 없다고 합니다. 조금 배려를 해주시면 좋을텐데... 한 아이디당 한 블로그 밖에 가입을 못한다니.. 주소 변경은 무조건 안되고 탈퇴 만이 해결책이라는 것은 참 갑갑한 정책이네요.

보시다시피 닉네임만 변경이 가능하고 블로그의 주소나 RSS 주소는 수정버튼이 없습니다.

다만 2차 주소로 등록했을 경우에는 닉네임과 RSS 주소까지 수정이 가능합니다.
이 경우에도 블로그 주소는 변경이 불가능합니다.

여러분도 참고로 하시고, 블로그 주소 변경할 생각이 있으시면 하루라도 빨리하세요.:)



<참고>
고객센터에 항의메일 보내면 변경해준다는군요.ㅋ
저도 처음 문의메일 보내니까 변경은 안되고, 탈퇴 후 재가입해야된다길래 ㅡㅜ 포기하고 냉큼 탈퇴했거든요. 근데 생각할수록 열받는 겁니다. 그래서 "항의메일"을 보냈죠. 이런 불합리한 법이 어딨냐고.
그랬더니 한참 후에 변경 해주겠다는 메일이 오더군요.. 하지만 그땐 이미 늦었다는거...

제 블로그의 사이드바에는 '태그'라는 두 글자 대신에 '태그구름 모두 보기'라는 글자를 입력했습니다.

그것은 바로 링크가 된다는 점입니다.
인터넷 사용시에 마우스가 주로 화면의 오른쪽 가운데 쯤에 위치하게 되는데, 이때 더 보고 싶은 태그가 있어도 다시 상단으로 올라가서 '태그'를 눌러서 찾는 것은 왠만한 정성 가지고는 쉽지 않죠.


저도 다른 블로그에 놀러가서 관련 태그를 보고 싶어도 '태그' 링크 찾기가 어려워서 포기한 적도 많거든요. 어제도 오늘도 고객의 편의를 제일로 생각하는 저는 이것을 좀더 쉽게 볼 수 있도록 사이드바 자체에 '태그로그'로 바로가기 명령어를 넣기로 했습니다. 즉, 태그구름 모두 보기 글자를 누르면 바로 태그구름을 모두 보여주는 것입니다.


이렇게 태그로그로 바로 가기 명령어를 넣는 방법은 다음과 같습니다.

1. 관리자 메뉴에 가서 스킨 변경으로 가세요.

2. skin.html에서 태그목록을 찾으세요~ (Ctrl＋F를 누르시면 빠릅니다.)

<!-- 태그목록 모듈 -->
     <div id="tagbox">
      <h3>태그목록</h3>
      <ul>
       <s_random_tags>
        <li><a href="" class=""> </a></li>
       </s_random_tags>


3. 그 다음에 저기 파란 글자부분을 자신이 원하는 문구로 수정하고, 빨간 글자 명령어 부분을 입력해주시면 됩니다.

<!-- 태그목록 모듈 -->
<div id="tagbox">
<a href="https://blutom.tistory.com/tag"><h3>태그구름 모두 보기</h3></a>


이것만 입력해주시면 끝~~~ ^^
어때요? 쉽죠? ^^

먼저 트랙백의 개념에 대해서부터 알아야겠죠?


트랙백이란 무엇인가??
제가 내리는 트랙백의 정의는 바로 '먼 댓글'입니다. 그게 트랙백이 필요한 이유기도 하구요.

트랙백이란, 자신이 댓글을 달고자하는 글(A)이 있는 곳이 아닌 자신의 블로그에서 A와 관련된 글(B)을 연결시키는 것입니다. 댓글을 달고자 하는데, 댓글이 너무 길어지거나, 댓글에 그림, 음악, 영상 등을 넣고 싶을 때, 그럴 때 자신의 블로그에서 글(B)을 적은 후 (A)에 가서 이를 연결해주는 것이죠. :)

제 경우에는 어떤 글을 보고 제가 트랙백을 위한 글을 적은 경우는 딱 한 번 밖에 없구요, 대부분은 제가 먼저 글을 작성한 후에 다른 사람들은 여기에 대해서 어떻게 생각하고 있을까? 혹은 다른 사람들은 어떤 방법을 썼을까? 라는 호기심에 검색을 해보고 트랙백을 보낸 경우가 많습니다.

참으로 곤란한 것이.. 영어에 있던 개념을 한글로 옮긴 것이다 보니 싸이트마다 호칭이 다 다릅니다-_-; 그러다보니 덧글, 댓글, 엮인글, 참조글, 관련글 등의 용어가 뒤죽박죽으로 엉켜서 굉장히 개념이 모호한 상태가 되어버렸고 처음 접하는 이들에게 더욱 혼란을 주고 있습니다.

이 용어들에 대한 개념을 잘 정리한 게시물
1upz님의 제멋대로 사용하는 코맨트와 트랙백의 한글 명칭
김중태 문화원 블로그의 블로그 용어 정리


자, 그럼 트랙백의 의미는 대충 뭐.. 멀리서 댓글을 쓰는 건줄은 알겠는데... 그럼 그걸 어떻게 하냐구요??


걱정마십시오~
제가 누굽니까?? 바로 친절한 주인장 아니겠습니까?? 딸랑딸랑~ 


지금부터 트랙백 보내는 방법을 그림과 함께 알아봅시다.!


자..... 파란토마토가 좋아하는 주제 중 하나인 역사입니다. 저는 어떤 블로그에 갔다가 미국드라마 튜더스(헨리 8세와 앤볼린 이야기를 다룬 것)에 대한 글을 보았습니다.  저는 '어? 헨리 8세에 대한 내용이 내 블로그에도 있는데.. 알려주고 싶다.' 라는 생각을 하게 되었죠.


1. 저는 우선 저 글의 트랙백 주소를 복사해옵니다. (트랙백 주소의 위치는 주로 오른쪽 하단이지만, 싸이트마다 트랙백 주소가 놓여진 방식이 조금씩 다른데 저는 티스토리를 예로 들겠습니다.)

저길 누르면 트랙백 주소가 자동으로 복사됩니다.

2. 그것을 트랙백 보낼 게시물에 붙이기만 하면 됩니다.


======>이때 트랙백 주소를 넣는 방법이 두 가지입니다.


하나는 그 게시물을 직접 찾아가서 관련글/트랙백 보내기 라는 창을 눌러서 입력하는 것이고,

또 다른 하나는 관리자 메뉴에서 입력하는 것입니다.

관리자 → 글목록 → 그 글을 찾은 다음, 저기 보이는 파란 트랙백 버튼을 누르면 트랙백 목록이 열립니다.

3. 자, 이젠 붙입니다. 저는 관리자에 들어가지 않고 트랙백 상자에 입력했습니다.

4. 그럼 이렇게 제 블로그의 헨리 8세 관련글에 튜더스 글의 주소가 입력됩니다. 이것은 제가 그쪽으로 트랙백을 보낸 목록입니다.

5. 그리고 튜더스 글에 다시 가보면 다음과 같이 제 글이 트랙백으로 나타납니다.

(→→→→ )

이건 스킨 변경에서 직접 올리기를 통해서 해결이 가능한데요, 직접 올리기는 다운받은 스킨을 사용할 때만 필요한 기능인줄 알았는데 그게 아니더군요. 이런 more/less 버튼, rss 버튼 등도 직접 올리기에서 등록이 가능합니다.
(※ rss 버튼을 자신이 원하는 이미지로 바꿀 때, 웹 주소로 올리는 방법은 다른 분들도 많이 설명해주셨으니 생략하겠습니다. 저는 Zet님, 선샤인님의 글을 참고로 했습니다.)

이 사실을 모를 때는 저는 일일이 이걸 다른 웹싸이트에 올리거나, 이 블로그에서 비공개로 그림을 올린 다음 그 그림의 주소를 링크하는 방식으로 사용했는데 정말 불편했습니다. 그림주소도 엄청 길고, 블로그에 직접 등록된 것이 아니라서 html에서 수정할 때도 html 태그 형식을 바꾸는게 정말 헤깔리고 어렵더군요.


혹시 여러분도 more/less 아이콘이나, rss 버튼을 일일이 다른 싸이트에 올려서 링크해서 올리시나요??
그러지 말고, 직접 올리기를 해보세요. 트래픽 걱정도 없고 파일명도 간단해서 훨씬 편리합니다! ^^

제가 직접 올린 것들은 more/less 아이콘, rss 버튼, 댓글 입력 버튼 등입니다.
간단히 설명하면, 직접 올리기에 가서 추가하고, skin.html 혹은 style.css에 가서 이미지 이름 변경하면 됩니다.

닫기

1. 일단 직접 올리기에 가서 자신이 올리고자 하는 파일(***.jpg, ***.gif, ***.png 등)을 선택해서 올립니다. 저는 more/less 아이콘과, 저의 파란토마토RSS 아이콘, 댓글입력창을 올렸습니다. 검색의 용이함을 위해서 이름도 원래 아이콘과 비슷하게 지었습니다.

2. 그 다음에 skin/html 편집으로 갑니다. 그리고는 Ctrl키 + F 를 눌러서 RSS 링크를 찾습니다.
(저는 한rss에 추가하기 명령이라서 여러분들과 명령어가 약간 다를 수 있습니다.)

    <!-- RSS 링크 -->
     <div id="btnRSS">

<center>      
<a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Ffeeds.feedburner.com%2Fblutoto" title="한RSS에 추가"><img src="./images/rss.gif" alt="rss"/></a> 

이런 게 나올 것입니다.


여기에서
<img src="./images/rss.gif" alt="rss"/></a>  
 img src= 다음에 나오는 " "안에 든 것이 이미지의 이름이나 주소거든요,
이것을 방금 제가 올린 rss_blutoto.gif라는 이름의 파일로 바꿔보겠습니다.

<img src="./images/rss_blutoto.gif" alt="한RSS에 추가"/> </a> </center>
그림의 이름이 다른 거 보이시죠? 제가 올린 그림으로 바꾼 것입니다.



3. 다음은 more/less 버튼 삽입/수정입니다.
more/less는 조금 더 어렵습니다.
*skin.html이 아니라, style.css에서 수정하셔야 하거든요.

style에서 원하는 부분을 찾으세요!
more 버튼과 less 버튼에 각각 기본적인 모양이 설정되어 있을 것입니다.
(문제는 이 설정만 있고, 아이콘 파일 업로드가 빠진 스킨이 아주 많다는 것입니다!)

 { background:url(images/iconmore.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}
 { background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}

이때, 이것을 여러분이 올린, 아이콘의 이름으로 바꿔주기만 하면 됩니다!!
(저기서 빨간 부분이 제가 올린 아이콘의 이름입니다.)

/* 본문 - more / less */

.moreless_fold { background:url(images/icon-more-circle-red.png) top left no-repeat;  padding-left:20px; color:#000;}
.moreless_top   { background:url(images/icon-less-blue.png) top left no-repeat;  padding-left:20px; color:#000;}
.moreless_body          { }
.moreless_bottom        { background:url(images/icon-less-blue.png) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}



4. 다음은 제가 늘 답답하게 생각하던 댓글 입력창 넓히기입니다.
이 스킨은 댓글 입력창이 너무 작아서 ↓↓↓↓↓ 정말 불편하더군요.

제가 누굽니까? 고객의 편의를 제일로 생각하는 '친절한 주인장' 아닙니까?
그래서 댓글 입력창을 넓직하게 바꾸기로 마음 먹었습니다.
(친절하신 세션님께서 강같은 은혜를 내리사 친절하게 가르쳐주셨습니다.)


style.css에서 다음을 찾습니다. (이 역시  Ctrl키 + F 를 이용하시면 편리합니다.)
그런데 숫자만 조정했더니 그림은 그대로라서 넓어졌는지 표시가 안나더군요.

마음 먹은 김에 그림 하나를 만들었습니다.

btn_reple_acple.jpg이라는 파일이름으로 올렸습니다.

그리고는 이것을 아까처럼 직접 올리기에서 올린 후에 이름을 변경했습니다.
원래 이름은 btn_reple.gif였는데 제가 올린 파일 이름으로 변경하고, 넓이도 넓혔습니다.

.commentWrite .submit { background:url(images/btn_reple_acple.jpg) no-repeat; width:620px; height:26px; overflow:hidden; display:block; text-indent:-1000em; border:0; cursor:pointer; margin:0 auto; }

닫기

어떻게.. 도움이 조금이라도 되었으면 좋겠네요.
캡쳐하고 잘 모르는 skin.html, style.css 편집하느라 장장.. 5시간에 걸쳐 쓴 글입니다..ㅜㅜ

정말 너무 고생해서 쓴 글이라 처음으로 제 블로그 구독을 권유드려 봅니다.
이 게시물이 도움이 되었다면 제 블로그를 한RSS로 구독해보세요.   

 

관련글
티스토리 more/less(더보기, 감추기) 기능에 대해 알아보자!
티스토리, 이미지 직접 올리기로 more/less 아이콘 등록하기, 댓글창 버튼 넓히기 방법
티스토리 카테고리 모두 펼치기 방법! (하위 카테고리를 모두 보여주는 방법)
트랙백(trackback)의 개념과 보내는 방법을 그림으로 알아보자!

티스토리 카테고리 모두 펼치기 방법! (하위 카테고리를 모두 보여주는 방법)에 대한 열화 아니 활화산과도 같은 성원에 대단히 감사드립니다. 성원에 힘입어, 이번에는 카테고리 모두 펼치기 방법 중 더 쉽고 간단한 방법을 두 가지 더 알려드리겠습니다. (※저의 영원한 백과사전이신 매너좋으신 안군님과 친절하신 엠의세계님께서 가르쳐주신 방법입니다.)


어제의 방법은 자바스크립트를 입력하는 것이고, 오늘 알려드릴 방법은 치환자를 입력하는 것인데 웹맹인 저는 솔직히 이게 무슨 말인지 모릅니다.


어쨋든 자바스크립트를 입력해도 명령이 실행되지 않는 분들을 위한 바디태그 변경 방법~

1. 관리자메뉴 의 스킨 변경에서 HTML/CSS 편집으로 가세요.
2. skin.html 에 가셔서 상단 부분 <body> 태그를 찾으세요. (Ctrl＋F 하시면 빨리 찾아요.)
3. <body> 태그에 onload="expandTree()" 를 삽입하시고, 저장하세요.

<body> → <body onload="expandTree()">

이것만 입력하시면 끝~~입니다.



두 방법은 약간의 차이가 있습니다. (미리보기 결과는 둘 다 같습니다.)

자바스크립트 방법을 적용하면, 로딩 직후 하위카테고리가 모두 펼쳐진 상태로 보여집니다.
하지만 두번째 바디태그를 수정했을 경우에는 페이지가 모두 로딩된 후 3∼5초 정도의 시간이 흐른 뒤 하위 카테고리가 열린다는 말이 있습니다. 제가 시험해봤을 때는 이런 증상이 없었고, 자세히는 모르겠습니다.
(만약 스킨에 따른, 혹은 이 명령어에 따른 차이점이 있다면 알려주시면 감사하겠습니다.)



다음은 치환자를 이용하는 방법입니다.

1. 관리자메뉴 의 스킨 변경에서 HTML/CSS 편집으로 가세요.
2. skin.html 에 가셔서 상단 부분  

분류 전체보기 (1313) 읽을 거리 (274) 블로그 이야기 (37) 재미있는 역사 (81) 영화랑 드라마 (104) 책이랑 좋은글 (52) 사주명리역학 (2) 즐길 거리 (447) 귀여운 동물들 (64) 풍경&바탕화면 (57) 먹고 듣고 보자! (325) 성격＊심리테스트 (117) 혼자서 중얼중얼 (111) 영어? 그건 아무 것도 아니야 (262) 영어 교육+추천싸이트 (14) 영어 회화·듣기 (147) 영어 자료·상식 (59) 영어 문법·설명 (42) 컴퓨터 ＆ 양식 (34) 상식 생활정보 (59) 이벤트 광고리뷰 (7)

를 찾으세요. (Ctrl＋F 하시면 빨리 찾아요.)
3.

분류 전체보기 (1313) 읽을 거리 (274) 블로그 이야기 (37) 재미있는 역사 (81) 영화랑 드라마 (104) 책이랑 좋은글 (52) 사주명리역학 (2) 즐길 거리 (447) 귀여운 동물들 (64) 풍경&바탕화면 (57) 먹고 듣고 보자! (325) 성격＊심리테스트 (117) 혼자서 중얼중얼 (111) 영어? 그건 아무 것도 아니야 (262) 영어 교육+추천싸이트 (14) 영어 회화·듣기 (147) 영어 자료·상식 (59) 영어 문법·설명 (42) 컴퓨터 ＆ 양식 (34) 상식 생활정보 (59) 이벤트 광고리뷰 (7)

에서 list_ 를 삽입하시고, 저장하세요.

[샵샵_category_샵샵] → [샵샵_category_list_샵샵]
(샵을 #으로 바꿔서 사용. #이 명령어의 일종이라 출력이 안되거든요.)


이것만 입력하시면 끝~~입니다.
이것도 정말 쉽죠? ^^

이 방법에 대한 자세한 설명은

에 있습니다.


그런데 이 방법으로 하시면 트리의 모양이 아주 약간 다릅니다.
비교를 위해서 캡쳐샷을 올려드리겠습니다.

①번은 어제 말씀드린 자바스크립트와 오늘의 <body>태그수정 방법이고, ②번은 바로 위의 치환자를 이용했을 때의 카테고리 트리 모양입니다.  마음에 드는 모양으로 선택하세요^^

티스토리의 단점 중에 하나가 카테고리 아래에 하위 카테고리를 만들게 되면 모두 합쳐져서 최상단 카테고리 하나만 뜬다는 것이죠. 저는 이게 너무 너무 불편한겁니다. (왼쪽 아래) 제 스스로도 불편했고, 방문자들께서도 불편을 주는 것이지요. 어떤 분이 일일이 ＋버튼 눌러서 하나 하나 다 확인하시겠냐고요ㅡㅡ;;

'친절한 주인장'인 제가 이를 그냥 두면 안되겠죠.? 그리하여 (오른쪽 아래처럼) 카테고리를 다 보여주고 싶은데 펼치는 방법을 몰라서 온갖 무식한 방법을 다 시도해보았습니다.

카테고리 접은 모습과 펼친 모습 비교, 펼친 것이 훨씬 깔끔하고 보기에 좋다.

저는 이게 스킨의 문제인 줄 알고 혼자서 스킨을 온갖 걸로 다 시도해봤지요.
아래는 카테고리가 자동으로 펼쳐지는 스킨들입니다. 제가 쓰는 2단 스킨에서는 저 5개 외에는 카테고리가 펼쳐지지 않습니다. (제가 테스트해본 블로그에서 상단 카테고리는 큰 목록, 하단 카테고리 이름은 작은 목록으로 정했습니다.) 그런데 스킨 디자인과 색상이 제 마음에 안들어서 탈락~

이전다음

01234

이렇게 쓸데없이 시간만 낭비하며 힘들게 체력을 소모하던 저는 '드디어' 검색을 하게 되었고,

<!-- 카테고리 모듈 -->
     <div id="category">
      <h3>카테고리</h3>

분류 전체보기 (1313) 읽을 거리 (274) 블로그 이야기 (37) 재미있는 역사 (81) 영화랑 드라마 (104) 책이랑 좋은글 (52) 사주명리역학 (2) 즐길 거리 (447) 귀여운 동물들 (64) 풍경&바탕화면 (57) 먹고 듣고 보자! (325) 성격＊심리테스트 (117) 혼자서 중얼중얼 (111) 영어? 그건 아무 것도 아니야 (262) 영어 교육+추천싸이트 (14) 영어 회화·듣기 (147) 영어 자료·상식 (59) 영어 문법·설명 (42) 컴퓨터 ＆ 양식 (34) 상식 생활정보 (59) 이벤트 광고리뷰 (7)

 <script language="JavaScript">try{expandTree();}catch(e){}</script>

     </div>

카테고리 펼치는 태그.txt

3. 다음에 저기 빨간 글씨로 된 명령어 부분을 입력하거나 혹은 제가 올려놓은 메모장 복사해서 붙이시면 됩니다.
그러면 전지현 다리처럼 쫙 펼쳐진(오른쪽에 보이는) 시원한 카테고리가 보일 것입니다.^^

안녕하십니~까?

블로그 연지 두 달도 안됐는데 벌써 블로그에 올릴 꺼리가 다 떨어져서 글쓸 거리를 찾아 불철주야 애쓰고 있는 파란토마토입니다.

먼저, 오늘도 허접한 제 블로그를 찾아주시는 남녀노소 여러분, 신사 숙녀 여러분, 재외 동포 여러분께 심심한 감사의 말씀을 올립니다. ^____________^


여러분께 보답하는 의미로 제가 알고 있는 블로그 팁들을 조금이나마 알려드리겠습니다.

내용은 티스토리 스킨 변경 시에 도움될 만한 팁과, 자주 발생하는 티스토리 버그와 완벽한 해결책을 알려드리....고 싶지만ㅡㅜ 그것은 저도 모르는 관계로 알려드릴 수가 없고, 다만 이러한 문제가 여러분이 잘못해서 생기는 것이 아닌, 티스토리 스킨 자체의 문제라는 것을 말씀드리고자 합니다.


이미 다 알고 계시는 고수 블로거분들은 "이런 것 쯤은 식은 죽 먹기~" 라고 외치시며 살포시  ←뒤로 버튼을 누르셔도 됩니다.. 흑흑..ㅠㅠ

저는 가장 깔끔하다는 이유로 티스토리의 공지스킨을 사용하고 있는데.. 이 스킨을 사용하면서 굉장히 많은 문제가 발생했고, 이것이 저만의 문제가 아니라는 것을 재아님의 블로그를 보고 알게 되었습니다. 그전에는 제가 잘못해서 생긴 문제인줄 알고 고쳐보려고 정말 한참 끙끙거렸거든요. ㅡㅡ;;;;♨ 
여러분은 고민하지 마세요~ We Are the World 잖아요~ (엉?ㅋㅋ)


스킨 변경하면서 발견하게 된 버그들

1. 스킨을 변경하고 나서 모든 화면설정이 초기화된다. (이는 공지스킨 만의 문제가 아님.)
변경한 스킨이 바로 적용되지 않기 때문에 Ctrl+F5를 눌러서 스킨을 정신차리게 만들어주고, 환경설정 - 화면설정에 가서 노출될 글수, 댓글수, 트랙백수, 글자수까지 모두 다시 설정해주어야 한다.



2. 로고를 넣으면 오른쪽 상단의 티스토리 관련 메뉴와, 내 블로그 바로가기 메뉴 ' | 지역로그 | 태그 | 미디어로그 | 방명록 가 보이지 않고 온통 까만 색으로만 보인다.

썬샤인님의 블로그에서 자신의 블로그에 그림 로고를 넣는 법이라는 게시물을 보고 '아싸~ 나도 넣어보겠어~' 라며 신난 마음에 제 로고를 만들었습니다. 로고라 할 수 없을 정도로 초라했지만 글자보단 이뻐 보여서 저는 만족했지요.

딱딱한 돋움체 글자만 있는 현재의 제 블로그 상태에서

저는 여기에 포토샵으로 만든 로고를 이렇게 ↓↓↓↓↓↓↓↓ 넣고 싶었습니다.

그러나... 현실..., 아니 티스토리는 냉정했습니다.
그만 이렇게 ↓↓↓↓↓↓↓↓  되고 마는 것입니다.ㅜㅜ

결국은 한참을 씨름하다가 원래대로 글자만 있는 초라한 로고로 되돌아왔습니다. -_ㅡ;;;

3. 이 뿐 아니라 블로그 자체가 다 깨어졌네요.
아뉘... 스킨 한 번 바꾸는 대가 치고는 너무 큰 거 아닌가요?? ㅠㅠ

4. 또한 무슨 이유에서인지는 모르겠으나 갑자기 스킨 위자드 메뉴가 사라졌습니다. -_-;;
분명히 HTML/CSS 편집 옆에 있어야 할 스킨 위자드 단추가 없어진 거.. 보이시죠?

이런 건 해결하는 방법도 모르겠고, 정말 답답해 죽겠습니다. 혹시라도 아시는 분 저 좀 도와주세요..!
(저는 결국 새로이 스킨 변경하는 방식으로 해결을 봤습니다.)



4. 스킨 변경할 때 more/less 아이콘 버튼이 사라져버린다.
원래 기본 스킨에서는 멀쩡하게 자리하고 있던 more/less 아이콘이 공지스킨으로 바꾸면서 사라졌습니다. 심리테스트의 결과 보기나, 추가 설명 시에 more/less 기능을 많이 사용하는 저에게는 아주 치명적인 오류지요. 버튼이 없이 글자만 떡~ 하니 나오니까 more/less 인지 구분이 안가서 정말 불편했거든요.

그런데 이것의 해결방법이 의외로 간단하다는 것을 알았어요!!
지금은 버튼이 나오도록 만들었습니다. 혹시 필요하신 분은 이 아이콘을 저장해서 사용하세요.(→)

more/less 아이콘 나오게 하기 다 봤으니 닫기

이건 스킨 변경에서 직접 올리기를 통해서 해결이 가능한데요, 직접 올리기는 다운받은 스킨을 사용할 때만 필요한 기능인줄 알았는데 그게 아니더군요. 이런 more/less 버튼, rss 버튼 등도 직접 올리기에서 등록이 가능합니다.
(※ rss 버튼을 자신이 원하는 이미지로 바꿀 때, 웹 주소로 올리는 방법은 다른 분들도 많이 설명해주셨으니 생략하겠습니다. 저는 Zet님, 선샤인님의 글을 참고로 했습니다.)

이 사실을 모를 때는 저는 일일이 이걸 다른 웹싸이트에 올리거나, 이 블로그에서 비공개로 그림을 올린 다음 그 그림의 주소를 링크하는 방식으로 사용했는데 정말 불편했습니다. 그림주소도 엄청 길고, 블로그에 직접 등록된 것이 아니라서 html에서 수정할 때도 html 태그 형식을 바꾸는게 정말 헤깔리고 어렵더군요.


혹시 여러분도 more/less 아이콘이나, rss 버튼을 일일이 다른 싸이트에 올려서 링크해서 올리시나요??
그러지 말고, 직접 올리기를 해보세요. 트래픽 걱정도 없고 파일명도 간단해서 훨씬 편리합니다! ^^

제가 직접 올린 것들은 more/less 아이콘, rss 버튼, 댓글 입력 버튼 등입니다.
간단히 설명하면, 직접 올리기에 가서 추가하고, skin.html 혹은 style.css에 가서 이미지 이름 변경하면 됩니다. [#M_직접 올리기 방법 자세히 보기|닫기|
1. 일단 직접 올리기에 가서 자신이 올리고자 하는 파일(***.jpg, ***.gif, ***.png 등)을 선택해서 올립니다.

저는 more/less 아이콘과, 저의 파란토마토RSS 아이콘, 댓글입력창을 올렸습니다. 검색의 용이함을 위해서 이름도 원래 아이콘과 비슷하게 지었습니다.

2. 그 다음에 skin/html 편집으로 갑니다. 그리고는 Ctrl키 + F 를 눌러서 RSS 링크를 찾습니다.
(저는 한rss에 추가하기 명령이라서 여러분들과 명령어가 약간 다를 수 있습니다.)

    <!-- RSS 링크 -->
     <div id="btnRSS">

<center>      
<a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Ffeeds.feedburner.com%2Fblutoto" title="한RSS에 추가"><img src="./images/rss.gif" alt="rss"/></a> 

이런 게 나올 것입니다.


여기에서
<img src="./images/rss.gif" alt="rss"/></a>  
 img src= 다음에 나오는 " "안에 든 것이 이미지의 이름이나 주소거든요,
이것을 방금 제가 올린 rss_blutoto.gif라는 이름의 파일로 바꿔보겠습니다.

<img src="./images/rss_blutoto.gif" alt="한RSS에 추가"/> </a> </center>
그림의 이름이 다른 거 보이시죠? 제가 올린 그림으로 바꾼 것입니다.



3. 다음은 more/less 버튼 삽입/수정입니다.
more/less는 조금 더 어렵습니다.
*skin.html이 아니라, style.css에서 수정하셔야 하거든요.

style에서 원하는 부분을 찾으세요!
more 버튼과 less 버튼에 각각 기본적인 모양이 설정되어 있을 것입니다.
(문제는 이 설정만 있고, 아이콘 파일 업로드가 빠진 스킨이 아주 많다는 것입니다!)

 { background:url(images/iconmore.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}
 { background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}

이때, 이것을 여러분이 올린, 아이콘의 이름으로 바꿔주기만 하면 됩니다!!
(저기서 빨간 부분이 제가 올린 아이콘의 이름입니다.)

/* 본문 - more / less */

.moreless_fold { background:url(images/icon-more-circle-red.png) top left no-repeat;  padding-left:20px; color:#000;}
.moreless_top   { background:url(images/icon-less-blue.png) top left no-repeat;  padding-left:20px; color:#000;}
.moreless_body          { }
.moreless_bottom        { background:url(images/icon-less-blue.png) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}



4. 다음은 제가 늘 답답하게 생각하던 댓글 입력창입니다.
이 스킨은 댓글 입력창이 너무 작아서 ↓↓↓↓↓ 정말 불편하더군요.

제가 누굽니까? 고객의 편의를 제일로 생각하는 '친절한 주인장' 아닙니까?
그래서 댓글 입력창을 넓직하게 바꾸기로 마음 먹었습니다.
(친절하신 세션님께서 강같은 은혜를 내리사 친절하게 가르쳐주셨습니다.)


style.css에서 다음을 찾습니다. (이 역시  Ctrl키 + F 를 이용하시면 편리합니다.)
그런데 숫자만 조정했더니 그림은 그대로라서 넓어졌는지 표시가 안나더군요.

마음 먹은 김에 그림 하나를 만들었습니다.

btn_reple_acple.jpg이라는 파일이름으로 올렸습니다.

그리고는 이것을 아까처럼 직접 올리기에서 올린 후에 이름을 변경했습니다.
원래 이름은 btn_reple.gif였는데 제가 올린 파일 이름으로 변경하고, 넓이도 넓혔습니다.

.commentWrite .submit { background:url(images/btn_reple_acple.jpg) no-repeat; width:620px; height:26px; overflow:hidden; display:block; text-indent:-1000em; border:0; cursor:pointer; margin:0 auto; }

more/less 아이콘 나오게 하기 다 봤으니 닫기

어떻게.. 도움이 조금이라도 되었으면 좋겠네요.
캡쳐하고 잘 모르는 skin.html, style.css 편집하느라 장장.. 5시간에 걸쳐 쓴 글입니다..ㅜㅜ

정말 너무 고생해서 쓴 글이라 처음으로 제 블로그 구독을 권유드려 봅니다.
이 게시물이 도움이 되었다면 제 블로그를 한RSS로 구독해보세요.  

관련글
2008/01/10 - 블로그 주소가 변경되면 다음 블로거뉴스도 탈퇴해야 한답니다.
2008/01/04 - 티스토리 카테고리 모두 펼치기 - 무지 쉬운 방법 2개 더 추가!!
2008/01/04 - 티스토리 more/less(더보기, 감추기) 기능에 대해 알아보자!
2008/01/04 - 티스토리, 이미지 직접 올리기로 more/less 아이콘 등록하기, 댓글창 버튼 넓히기 방법
2008/01/04 - 트랙백(trackback)의 개념과 보내는 방법을 그림으로 알아보자!