이 글에서는 티스토리 사이드바에 HTML 소스로 제작된 광고, 위젯 들을 쉽게 삽입하는 방법에 대해 알아보겠습니다.

티스토리 사이드바 HTML 소스 쉽게 삽입하기

이 방법으로 구글 애드센스 등의 광고와 다음 뷰, 블로그코리아 등의 메타블로그 위젯, 그외에도 기타 여러 HTML 형식으로 제작된 위젯 들을 티스토리 사이드바에 손쉽게 추가할 수 있습니다.
원래 사이드바에 HTML 소스로 제작된 부분을 추가하기 위해서는, 직접 전체 HTML 소스의 사이드 바 부분에서 새로운 사이드 바 모듈을 생성하고, 그 내부에 새 소스를 삽입하는 등 복잡한 과정을 거쳐야 합니다. 하지만, 이 방법을 사용하시면, 매우 손쉽게 티스토리 사이드바에 HTML 소스로 제작된 광고, 위젯 들을 쉽게 삽입할 수 있습니다.

먼저 티스토리의 설정-플러그인-플러그인 설정-관리 및 통계 영역으로 들어갑니다.
그곳에서 태그 입력기를 보실 수 있으실 것입니다.

이 태그 입력기를 사용해야 합니다.

이제 스킨-사이드바 설정 영역으로 들어가시면 플러그인 영역에서 태그 입력기를 보실 수 있으실 것입니다.
이 태그 입력기를 사이드바에 추가합니다.

마지막으로 치환자 영역에 HTML 소스를 붙여넣으시면 됩니다.
그리고, 태그 입력기를 사이드바의 원하는 위치로 설정하신 후 저장하시면 됩니다.
  1. 라온아띠 2010.04.30 17:00 신고

    감사합니다~^^

  2. 리브Oh 2010.12.07 09:06 신고

    트위터에서 넘어왔어요 ㅎ
    좋은 정보네요^^

  3. 밤벌레 2011.01.30 21:25 신고

    글 감사합니다..^^

  4. 한수위 2016.03.24 09:04 신고

    태그입력기가 없는데 어떻게해야하죠?

이 글에서는 블로그에서 사용할 수 있는 여러 유용한 위젯들에 대해 설명해 보겠습니다.

유용한 블로그 위젯들

이 위젯은 방문자의 IP 주소, 국가, 방문 시간을 알려주는 위젯입니다.
BlogUtil.net 에서 제작되었으며, 개인적으로 상당히 유용하다고 생각합니다. 사용하시려면 HTML 소스를 복사하셔서 적당한 곳에 붙여넣기 하시면 됩니다.


이번에는 Paran 지역정보에서 제작한 위젯입니다.
이 위젯은 방문자의 지역과 지역별 방문자 수를 세어주며, 날씨도 알려줍니다. BlogUtil.net 의 위젯과 다소 겹치는 면이 있습니다. 저는 BlogUil.net 의 위젯을 선호하는 편입니다. 이 위젯은 Daum 블로그, Daum 까페, 티스토리, 네이버 블로그에 부가 위젯 형태로 삽입이 가능하며, HTML 소스로도 사용 가능합니다.

다음은 전광판 위젯입니다. 매우 인기가 많은 위젯이고, 여러가지로 활용이 가능합니다.
공지사항이나, 블로그 생일 등 60자 까지의 문자를 글꼴, 크기, 스킨 등을 입맛데로 설정하면서 삽입할 수 있으니, 매우 좋은 위젯이죠. 이 위젯 역시 Daum 블로그, Daum 까페, 티스토리, 네이버 블로그에 부가 위젯 형태로 삽입이 가능하며, HTML 소스로도 사용 가능합니다.

마지막으로, 블로그 랭킹 표시 위젯입니다.
블로그 이름과 주소를 입력하면 블로그이 랭킹을 표시해 줍니다. 다만 등록된 블로그 수가 그리 많지 않고, 그 중에는 아예 활동을 멈춘 블로그들도 포함되어 있어, 그리 큰 의미는 없을 듯 합니다. 하지만, 재미로 달아보는것도 좋을 듯 합니다.

그리고, 다음 위젯 뱅크에 가시면 기타 여러가지 위젯들을 보실 수 있습니다.

  1. 그레이트C 2010.12.03 19:39 신고

    블로그 랭킹위젯은 블로깅활동에 있어 동기를 부여해줄것 같네요..^^

이 글에서는 티스토리의 티스토리 태그 클라우드를 꾸미는 방법에 대해 알아보겠습니다.

태그란, 블로그의 글 중 핵심 키워드를 모아놓은 것으로 블로그의 전체적인 성향이나 해당 글의 성향을 알려줍니다. 검색엔진 순위결과에도 영향을 미치기도 하는, 매우 중요한 요소이지요.
이런 태크들은 모아놓은 것이 바로 태그 클라우드로, 블로그의 사이드바에 많이 배치됩니다.

보통 이런 형태이지요. 단순합니다.

이 글에서는 태그 클리우드를 이런 모습으로 바꾸는 방법에 대해 설명해 보죠. 마우스를 가져가면 움직이기도 합니다.

먼저, 아래 파일을 다운로드 하신 후 압축을 푸세요. 총 3개 파일입니다.

script 파일을 열어보세요. 바로 태그 클라우드의 스크립트입니다.

티스토리 관리 영역에서 시킨-HTML/CSS 편집 영역으로 들어가세요.

Ctrl + F 로 찾기 기능 이용해 태그 를 찾습니다.

위와 같은 구조의 태그를 찾습니다. 보통 "s_sidebar element" 근처에 있습니다.
"태그 클라우드" 조금 하단에 보시면 <ui> 와 </ui> 라는 태그를 보실 수 있으실 것입니다.
<ui> 까지에서 </ui> 까지 코드를 지우시고 script 파일의 태그를 삽입하세요.
위 부분은 각 블로그의 스킨마다 조금씩 다를 수 있습니다.

마지막으로, 파일 업로드 영역에서 swfobject 파일과 tagcloud 파일을 업로드합니다.

이제, 좀 더 세련된 태그 클라우드 기능을 사용하실 수 있으실 것입니다.
  1. Duffy 2010.08.05 12:59 신고

    안녕하세요? 티스토리에 태그 클라우드를 넣어서 잘 쓰고 있었는데, 스킨 쪽에서 뭐 건드린것도 전혀 없었는데, 태그 클라우드가 아예 나오질 않아요 ㅠㅠ 어떻게 된건지 아시나요? ㅠ

  2. 카쿠覺 2010.08.10 06:27 신고

    항상 이를 적용해서 사용하고 싶었는데 오늘에서야 달게되네요~ 잘보고갑니다 =]

  3. 2010.08.24 15:59

    비밀댓글입니다

  4. 621 2010.08.27 16:27 신고

    알려주신대로 하니 참~ 쉽네요...

    고맙습니다...

  5. sensyo 2010.09.05 22:07 신고

    저는 찾아보니
    <s_sidebar_element>
    <!-- 태그목록 모듈 -->
    <div class="tagbox">
    <h3>Tag</h3>
    <ul>
    <s_random_tags>
    <li><a href="" class=""> </a></li>
    </s_random_tags>
    </ul>
    </div>
    </s_sidebar_element>
    이렇게 돼어있습니다만 따로 이부분만 script로 교체하고 파일 업로드만 하면돼는지..

    아님 class name을 맞춰줘야 하는건지.. 어디부분을 수정하면 될까요.

  6. inne 2010.09.12 21:44 신고

    제가 잘모르겟습니다만...
    혹시 네이트온같은 원격지원으로 가능하신가요? ㅎㅎ

  7. 나연이네 2010.09.24 14:10 신고

    설명을 잘해주셔서 잘 설치하였는데 제블로그는 배경색이 검정색이다보니
    좀 어색해서 원래대로 수정하였습니다.
    배경색을 검정으로, 글자를 흰색으로 바꿔볼까 했는데
    어디를 수정해야할지 모르겠네요
    가능할까요???

    • 초록 날개 2010.09.24 18:07 신고

      음... 색상 HTML 코드를 바꾸시면 되실 것 같은데..
      좀 많이 건드려셔야 할 것 같네요,..
      더구나 자바 스크립트여서 수정하면 좀 불안정해질수도...

  8. 살짝올려 2010.11.02 11:18 신고

    정말 좋은 정보 감사합니다. 태그라는걸 아얘 몰랐는데..
    티스토리하면서 처음해보네요;..앞으로 쭈욱 배워 보기도 싶구요^^

    • 초록 날개 2010.11.02 12:42 신고

      ㅎㅎ
      태그를 잘 활용하셔면 여려 면에서 좋은 효과들을 많이 보실 수 있으시 것입니다~

  9. 연결고리 2010.11.24 00:00 신고

    아, 이거 보고야 겨우 해결했습니다.
    ^^
    멋지네요 테그 클라우드^^

  10. Nalo Kubi 2011.01.26 16:47 신고

    물어보고 싶은 것이 있는데 적용을 잘 됬습니다만

    특수문자가 안나오네요. R&B라는 태그가 있었는데

    R B라고만 나오네요. 해결 방법이 없나요?

  11. 달콤한 하루 2011.02.09 10:48 신고

    안녕하세요.
    티스토리에서 태그 이쁘게 할려고 찾고 있었는데
    덕분에 잘 달았습니다.
    감사합니다. ^^

  12. Cornwolf 2011.03.21 00:04 신고

    잘 되네요,,, 유용한 정보 잘 보고 배웠습니다. ^^ 종종 들를께요!

  13. 하하하 2011.04.11 23:55 신고

    감사합니다 잘쓸께요~

  14. 물컹물컹 2011.05.17 22:57 신고

    저도 Duffy님이랑 같은현상입니다, 오늘까지 잘쓰다가

    갑자기 저녁에, 태그자체가안뜨내요.

    스킨원본으로 했을때는 태그가잘뜨는데말이죠, 다시해도안돼내요

이 글에서는 티스토리를 네이버 검색에 추가하는 방법에 대해 설명해 보겠습니다.

네이버 블로그가 아닌 다른 외부 블로그를 운영할 경우, 국내 최대의 검색 엔진인 네이버에서 검색이 되지 않습니다. 때문에, 티스토리에 글을 써도 네이버에서는 검색이 되지 않지요. 네이버에서 검색이 되게 하려면 검색 DB 에 RSS 주소를 추가해야 하는데요, 이 절차가 최근에 조금 바뀌어 새로 글을 씁니다.

먼저, 이곳에 접속합니다.

위 페이지에서 네이버 검색 등록이 가능합니다.

중앙에서 사이트 검색 항목을 선택하신 후, 주소를 입력한 후, 등록하기 버튼을 클릭합니다.

먼저, 중복 검사가 이루어집니다.

약관에 모두 동의하세요.

사이트 이름과, 주소, 설명, 분류 등을 입력합니다.
이제 확인 버튼을 클릭하시면 처리가 됩니다. 공휴일을 제외하고 2일 정도면 처리가 완료되었다는 메일을 받으실 수 있으실 것입니다.
  1. 2010.03.26 23:10

    비밀댓글입니다

  2. amanda K 2010.04.22 00:22 신고

    이제 막 시작하는 초보자에게 좋은 정보가 되었어요 ^^
    감사합니다 :)

  3. 와야 2010.09.03 17:53 신고

    감사합니다~! 정말 유용한정보였어요

  4. 인내 2010.09.10 22:17 신고

    막시작한 초보자인데요....구글 어드센스로 돈벌자고 하는데 어떻게 해야할까요?
    답변달아주세염.. ㅋㅋㅋㅋㅋ

이 글에서는 즐겨찾기 추가 자바 스크립트를 이용해 내 블로그에 즐겨찾기 추가 버튼 만드는 방법에 대해 설명해 보겠습니다.

얼마 전, "많은 블로그에 메타블로그 추천 버튼, RSS 구독 버튼 등은 많으면서, 왜 즐겨찾기 추가 버튼은 하나도 없을까?" 하는 의문이 생겼습니다. 당장 웹서핑을 통해 즐겨찾기 추가 Java 스크립트를 구했습니다. Java 의 활용도는 정말 무궁무진한 것 같습니다. 다만 로딩 속도가 조금 느린것이 문제지요.
어쨋든, 버튼 아이콘도 만들어 즐겨찾기 추가 버튼을 만들어 보았습니다.

위 스크린샷은 제 블로그의 사이드바 영역이죠. 여기서 즐겨찾기 버튼을 클릭해보죠.

보시다시피 즐겨찾기 추가 창이 뜹니다.


<a href="javascript:window.external.addfavorite('http://greenwings.tistory.com/', 'GreenWings Computers And Others');"><img src="http://cfs.tistory.com/custom/blog/46/460846/skin/images/x.gif" border="0"></a>
위 태그가 바로 즐겨찾기 추가 버튼에 관한 부분입니다. 차례차례 설명해 보죠.

<a href="javascript:window.external.addfavorite('http://greenwings.tistory.com/', 'GreenWings Computers And Others');"><img src="http://cfs.tistory.com/custom/blog/46/460846/skin/images/x.gif" border="0"></a>
위 강조 부분이 즐겨찾기 추가 스크립트이죠.

<a href="javascript:window.external.addfavorite('http://greenwings.tistory.com/', 'GreenWings Computers And Others');"><img src="http://cfs.tistory.com/custom/blog/46/460846/skin/images/x.gif" border="0"></a>
위 부분에서 빨간색 부분이 즐겨찾기에 추가할 페이지의 주소입니다. 초록 부분은 즐겨찾기의 이름이죠.

<a href="javascript:window.external.addfavorite('http://greenwings.tistory.com/', 'GreenWings Computers And Others');"><img src="http://cfs.tistory.com/custom/blog/46/460846/skin/images/x.gif" border="0"></a>
마지막으로, 위 강조된 부분이 버튼 아이콘의 주소 영역입니다. 제가 만든 아이콘에 마음에 들지 않으시다면 위 영역에 새로운 아이콘 주소를 넣으세요.
  1. 최우신 2010.05.15 20:11 신고

    저기 제가 좀 태그를 이용을 잘 못해서그런데요
    제가 주로를 www.ws.co1.kr 하고 이름을 우시니네블로그 ~ 라고 하고싶은데 어떻게해야되죠??
    cdt0545@naver.com
    으로 메일로 답장부탁드립니다(__)

이 글에서는 WhiteGround 스킨을 소개해 보겠습니다.

얼마 전, MovingBox 스킨이 너무 단조롭다는 느낌이 들어 스킨을 WhiteGround 진한 녹색으로 바꾸어 보았습니다. 결과는 대만족이었습니다.

먼저, 1단 스킨의 장점은 넓은 본문 영역 때문에, 스크린 샷 가독성이 훨씬 높아졌을 뿐만 아니라, 전체적으로 매우 밝고 산뜻한 느낌을 주고 있죠. 또한, 네이버의 나눔 고딕체를 기본 사용하여 읽기에 매우 편합니다. 타이틀과 배경 영역을 유자연스럽게 연결 가능한 점 등도 큰 장점이죠. 마지막으로, 용의자 님의 Plain 스킨을 기반으로 제작되어 매우 높은 안정성을 자랑합니다.

스크린 샷 첨부합니다.

메인화면

방명록

본문

Plain 스킨에 대한 정보는 이곳에서 보실 수 있고, WhiteGround 스킨은 이곳에서 다운로드 가능하십니다.
  1. 2010.05.21 14:23

    비밀댓글입니다

이 글에서는 자신의 블로그 방문자의 IP 및 위치를 확인(추적)하는 방법에 대해 설명해 보겠습니다.

요즈음, 많은 사람들이 블로그와 미니홈피를 운영하면서, 방문자 추적에 관심을 갖는 사람도 많아졌습니다. 물론, 이 정보를 악의적인 용도로 활용하는 것은 옳지 않지만, 단순히 자신의 블로그를 방문한 사람이 어디에 사는지, 언제 방문했는지 등의 정보는 블로그를 운영하며 유용한게 쓰일 수 있지요.

제가 소개하는 툴로는 방문자의 국가, IP, 방문 시간 을 보여줍니다. 이때, IP 를 이용해 대략적인 위치도 추적할 수 있습니다.

먼저, BlogUtil.net 으로 접속합니다.

좌측에 최근방문객 표시 영역으로 들어가시면 툴의 소스와 예시를 보실 수 있습니다. 보시다시피 국가, IP 방문 시간 순으로 표시되며, 가운데 소스를 자신의 블로그의 적당한 곳에 붙여넣으시면 됩니다. 소스 편집 방법은 아래 글을 참고하세요.
2009/12/15 - [Blogging] - 티스토리 사이바에 HTML 소스로 제작된 광고, 위젯 들을 쉽게 삽입하기

방문자의 IP 를 이용해 위치를 추적하고 싶다면 좌측 메뉴에 자신의 IP 정보 영역으로 들어가시면 됩니다. 여기서 방문자의 IP 를 붙여넣으면 지도에 위치가 표시됩니다. 아래에서 더 자세한 정보도 얻을 수 있습니다.
  1. 주은 2011.07.12 14:07 신고

    이제 블로그유틸넷이란 곳이 안되나봐요?ㅠ 무슨 이상한 싸이트가 나오네요..

  2. dd 2011.12.23 20:56 신고

    http://blogutil.net 웬 중국사이트네요 ㅜㅜ;

  3. anonymous 2012.03.06 12:13 신고

    저 블로그 방문자 추적하는거에 피해입은 사람인데.. 왜 저만 피해입어야 하는지.. 이런 도움안되는 자료 게시할거면 아예 게시하지 마시죠.

    • 초록 날개 2012.03.06 16:27 신고

      왜 피해를 입으셨는지 생각해 보셨나요? 남의 블로그에 가서 하신 행동이 정당하시다면 피해를 입으실리도 없죠...

  4. conmocioniar 2012.09.03 13:57 신고

    ㄴ그런 문제라면 블로그 관리에서 블로그명 차단이 있지 않나요,

  5. conmocioniar 2012.09.03 13:57 신고

    이런. 여기는 위부터 써지는구나

  6. myrankis 2012.09.08 14:44 신고

    myrankis.com 실시간 블로그 방문자 확인 그래픽통계 카운터 기능

  7. 나누누게 2012.12.24 10:51 신고

    트위트 id만 알아로 ip추적 가능한가요? 특정인을 음해해서 사전에 신원확인해서 고소를 하려는데..ㅠㅠ

  8. asd 2013.01.21 00:06 신고

    저 실례합니다 블로그 유틸넷이 바뀐거 같고 위 사진의 html 쓸려고하니 안된다고합니다 다른방법이 없는지 궁금하네요

+ Recent posts