태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

블로그하트링(Blog Heart Ring) 구현 방법

분류: Digitial News/Blogging Guide 작성일: 2007.06.13 16:13 Editor: 마루[maru]

블로그하트링(Blog Heart Ring) 구현 방법

최근들어 블로그하트링(Blog Heart Ring)에 관심을 가져주시는 블로거분들이 많아지고, 블로그에서 구현하는 방법을 알려달라는 요청이 많아 아래와 같이 설명을 드립니다.

아래의 예는 티스토리나 태터툴즈 블로그를 중심으로 설명을 하였습니다만, 블로그 스킨에 Html을 구현할 수 있는 블로그라면 모두 가능합니다.

참고로 이 블로그하트링 점프메뉴 구현은 임프레스 매거진을 운영하고 계신 정호씨 님이 많은 도움을 주셨습니다. 정호씨께 이번 기회를 통해 다시금 감사를 드립니다.

그럼 블로그하트링(Blog Heart Ring) 점프메뉴의 구현방법을 설명하도록 하겠습니다.

1. 티스토리 계정으로 접속 후 [스킨 탭]을 클릭하면 아래와 같은 화면이 나옵니다. [스킨 탭]에서 사이드 바를 클릭 하십시요.

사용자 삽입 이미지

2. 사이드 바를 클릭하면 기본모드로 열리는데, 여기서 안전모드를 클릭하시고 기본 사이드바에 들어있는 [링크모듈]을 제거합니다. 그리고 보시는 바와같이 [배너출력::CodeBanner] 모듈을 블로그하트링이 구현될 위치에 배치합니다.
사용자 삽입 이미지

3. 배치한 코드배너출력 모듈의 편집을 누르면 다음과 같이 HTML 코드를 입력할 수 있는 창이 팝업이 되는데 이곳에 첨부한 BlogHeartRing_Code.html 파일을 에디터로 열어서 자신의 블로그하트링 링크를 대입한 다음 복사(Ctrl+C)해서 붙여넣기(Ctrl+V)를 하시고 전송을 하시면 됩니다.
사용자 삽입 이미지

4. 추가로 블로그하트링(Blog Heart Ring) 점프메뉴 모듈의 각 항목앞에 있는 이미지를 자신의 블로그 계정에 업로드 하는 방법 입니다.
다시 [스킨 탭]을 누르시면 하단에 [직접올리기]링크가 보이고 이곳을 클릭하시면 됩니다.
사용자 삽입 이미지

5. 아래와 같이 이미지 파일을 계정에 올릴 수 있는 공간이 나오면 [파일 올리기] 버튼을 클릭하셔서 첨부한 압축파일에 포함된 이미지만를 선택하고 업로드 하시면 됩니다.
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지
이렇게 하시면 블로그 사이드바에 좌측과 같이 예쁜 블로그하트링(Blog Heart Ring) 점프메뉴가 보여지게 됩니다.

그리고, 티스토리나 태터툴즈 블로그가 아닌 경우에는 첨부한 블로그하트링(Blog Heart Ring) 점프메뉴 압축파일을 다운 받아서 에디터나 편집기로 열어서 자신만의 블로그하트링 링크를 대입하신 다음 적당한 공간에 배치를 하시면 됩니다.

앞으로 블로그하트링(Blog Heart Ring) 캠페인의 활성화를 위해서 나름대로 예쁜 디자인의 엠블렘을 구상 디자인 작업에 들어가 있으며 완성이 되는대로 선별과정을 거쳐 다양한 사이즈로 배포할 계획이니 블로그하트링(Blog Heart Ring)에 참여하시는 블로거 여러분들의 많은 관심과 호응을 부탁 드리겠습니다.

참고로 부탁을 드립니다. 블로그하트링을 적용하신 블로거 께서는 적용 후 트랙백이나 이 글에 댓글을 달아주시면 디자인로그와 뉴스페이퍼2.0 블로그블로그하트링에 연결해 드리고 차후에 있을 전체연결프로젝트에 기본링크로 확대할 방침입니다.^^

여러분들의 많은 관심과 격려를 부탁 드립니다. 블로그하트링의 발전을 위해서 ..^^

P.S
12/18일자 25개의 블로그하트링을 정리한 다음 업데이트 되었습니다.

기존의 30개의 하트링에서 블로그하트링 스타일을 유지하고 있는 블로그 25개의 블로그하트링만 유지하고 정상적인 게재를 하지않고 있는 기존의 블로그는 T-Blog링크로 조정하였습니다.
참고로 사이즈는 스타일 부분의 넓이를 조정하시길 바랍니다. 차후, 블로그하트링 스타일을 유지하고 참여하실 때 업데이트 해드리도록 하겠습니다. 블로그하트링에 참여하시는 분은 아래 업데이트 된 블로그하트링을 그대로 유지해 주시길  바랍니다.


BlogHeartRing.zip

2007/12/18일자 블로그하트링 점프메뉴소스

신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. 이전 댓글 더보기
  2. Favicon of http://lstyle.tistory.com/ BlogIcon 러빙이 2007.11.16 21:44 신고  댓글주소  수정/삭제  댓글 남기기

    배너출력 모드가 없어서 잠시 헤매다가,
    방금 달게 되었습니다.
    전부터 달고 싶었는데 말이지요 ^^
    감사합니다 ~ 잘 사용하도록 하겠습니다.

  3. Favicon of http://b-story.net BlogIcon 방동 2007.11.24 20:05 신고  댓글주소  수정/삭제  댓글 남기기

    이야, 정말 좋은 정보감사합니다 T_T 이웃목록이 길어지면 어쩌나 하고 고민했는데, 이렇게 깔끔하게 하는 법이 있었군요. 감사합니다!

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2007.12.10 18:00 신고  댓글주소  수정/삭제

      많은 분들과 소통하고 싶은데 하염없이 늘어나는 링크목록이 상당히 부담스러울 때가 있습니다.
      그럴 때 블로그하트링을 활용하면 좋은 효과를 볼 수 있습니다. 더불어 많은 분들과 소통할 수 있는 길이 되었으면 합니다.

  4. Favicon of http://homer.tistory.com/ BlogIcon 기다림의 미학 2007.12.01 10:32 신고  댓글주소  수정/삭제  댓글 남기기

    블로그 한지 얼마 안됬는데,,,,
    다른분 블로그 갔다가 깔끔해 보여서, 블로그 하트링으로 검색하니 이곳에 구현방법이 포스팅 되 있더라구요 그래서 코드 얻어 설치했습니다....감사드립니다(__)

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2007.12.10 17:59 신고  댓글주소  수정/삭제

      블로그하트링이 기다림의 미학 님의 블로그 관리에 조금이나마 도움이 되었다니 기쁜 마음입니다.
      빠른 시간내에 블로그하트링을 업데이트 해서 많은 분들과 소통할 수 있도록 하겠습니다.

  5. Favicon of http://hanseongmin.tistory.com BlogIcon 한성민 2007.12.06 11:17 신고  댓글주소  수정/삭제  댓글 남기기

    안녕하세요...
    전부터 이걸 달고 싶었는데 여기에 자세한 설명이 나와 있네요...
    오늘 설치 했습니다.... 감사합니다..^^

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2007.12.10 17:57 신고  댓글주소  수정/삭제

      안녕하세요. 한성민 님
      좀 더 쉽게 블로그하트링을 활용할 수 있도록 설명을 하지못한 것 같아서 죄송스럽습니다.
      한동안 신경을 쓰지 못해서 제대로 업데이트를 못해 드렸는데 이 번 주간에는 꼭 업데이트를 하고 관련 글 발행을 통해 소식을 전하도록 하겠습니다.

  6. Favicon of http://haruburning.tistory.com/ BlogIcon Haru_burning 2007.12.09 12:20 신고  댓글주소  수정/삭제  댓글 남기기

    약간 디자인을 바꿔서 달았어요. 정말 좋은 소스 감사드려요
    하트링 업데이트 되어서 제 블로그도 포함되면 좋겠네요 ^-^
    좋은 하루되세요~

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2007.12.10 17:56 신고  댓글주소  수정/삭제

      이렇게 만나게 되어 반갑습니다.
      그동안 여러가지 실험과 개인적인 업무 때문에 블로그하트링에 많은 신경을 쓰지 못했던것 같습니다.
      그럼에도 불구하고 이렇게 관심과 성원을 보내주셔서 뭐라고 감사의 말씀을 드려야할지 모르겠습니다.
      빠른 시간안에 블로그하트링을 정리해서 관련 글을 발행하도록 하겠습니다.
      당연히 Haru_burning님의 블로그도 포함 되겠지요.^^

  7. Favicon of http://www.shinalog.com BlogIcon 썬샤인 2007.12.26 04:59 신고  댓글주소  수정/삭제  댓글 남기기

    훗; 저도 하트링 설치했습니다 드디어..ㅎㅎ 한다한다하고 안했더니 리스트에서 빠져버렸네요^^ㅋ 2008년에는 블로그 하트링에 많은 분들이 참여했으면 좋겠습니다:) 즐거운 연말 보내세요~

  8. 푸른대지 2007.12.26 10:32 신고  댓글주소  수정/삭제  댓글 남기기

    배너출력 모듈이 없어요..
    하고 싶은데 보이질 않아서 답답하네요...

    • Favicon of http://gostopgo90.tistory.com BlogIcon gostopgo90 2007.12.29 07:11 신고  댓글주소  수정/삭제

      저도 처음에 배너출력 모듈이 없어서 많은 시간을 소비했는데...
      관리자 - 플러그인 에 보면 배너출력 플러그인 있습니다.
      이거 활성화 시켜 주면 사이드바 편집할 때 배너출력 모듈 보입니다.

  9. Favicon of http://gostopgo90.tistory.com BlogIcon gostopgo90 2007.12.29 07:10 신고  댓글주소  수정/삭제  댓글 남기기

    예전부터 설치하고 싶었는데 방법을 몰라 전전긍긍
    드디어 설치했습니다. 제 즐겨찾기 수정부터 해야겠어요^^

  10. Favicon of http://insam.tistory.com/ BlogIcon 삶엔삼 2008.01.05 14:08 신고  댓글주소  수정/삭제  댓글 남기기

    오늘 블로그하트링 설치하였습니다.
    알기는 작년(?)에 알았는데,
    티스토리초보라 이것저것 배우다보니 이제야 설치하였습니다.
    좋은 만남의 장소가 되리라 기대 됩니다.
    즐겁고 행복한 2008년 되세요..^^

  11. Favicon of http://www.rainydoll.com BlogIcon rainydoll 2008.01.06 19:45 신고  댓글주소  수정/삭제  댓글 남기기

    저도 오늘 블로그하트링 달았습니다. 깔끔하니 좋네요. :)

  12. Favicon of http://seamind.tistory.com BlogIcon seamind 2008.01.13 13:05 신고  댓글주소  수정/삭제  댓글 남기기

    저도 몇일전에 여기서 보고 달아놨는데..
    참 편리한것 같네요...블로그하트링에 있는 여러 블로그에도
    자주 찾아가 보려구요...감사합니다 ^^

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.01.23 10:09 신고  댓글주소  수정/삭제

      이번 업데이트에 반영을 했습니다.
      오늘 저녁에는 다운로드 하실 수 있도록 수정해 놓겠습니다.
      늘 관심을 가져 주셔서 진심으로 감사를 드립니다.

  13. Favicon of http://haruburning.tistory.com/ BlogIcon Haru_burning 2008.01.22 19:13 신고  댓글주소  수정/삭제  댓글 남기기

    안녕하세요 블로그하트링 잘쓰고있습니다.
    이웃블로그 링크추가를 수작업으로 말고 바로적용되게 태그를 수정해봤는데 도움이 될련지 모르겠네요. 트랙백 걸어뒀습니다. ^-^

    즐거운 하루되세요~

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.01.23 10:08 신고  댓글주소  수정/삭제

      저도 생각하지 못했던 좋은 방법을 찾아주셨네요
      지금 업데이트 할 블로그하트링에 반영해서 오늘 저녁에는 간단한 소개글과 더불어 업데이트를 하도록 하겠습니다.
      늘 관심을 가져주셔서 진심으로 감사를 드립니다.

  14. Favicon of http://www.epl-inside.net BlogIcon rainydoll 2008.01.24 22:08 신고  댓글주소  수정/삭제  댓글 남기기

    블로그 스킨이 바뀌어서 다른 블로그(http://www.epl-inside.net)에 하트링을 달아놓았습니다. :)

  15. Favicon of http://fafagel.com BlogIcon 아도니스 2008.03.05 15:30 신고  댓글주소  수정/삭제  댓글 남기기

    셀렉트 링안에 있는 블로그주소는 바꿀 수 없는건가요? 아르, 열이아빠,디자인로그,꽃수염님 등 여러 블로거분들이 계시잖아요. 이쪽은 수정하면 안되고 나머지만 수정하는 건가요? 아니면 다 수정해도 되나요? 답변 부탁드려요. 그도 아니면 T블로그라고 되어있는 이부분만 수정가능하고 나머진 불가능한건가요? 일단 멋대로 수정해놓고 이미지도 삭제했는데 안된다면 답변 부탁드릴께요. 다시 원래대로 할려구요.

    다시 보니까 편집시에 블로그링은 수정하면 안된다고 나오네요.^^ 이 외의 나머지는 수정해도 되나요?

  16. Favicon of http://jinugoon.com BlogIcon jinugoon 2009.07.04 14:24 신고  댓글주소  수정/삭제  댓글 남기기

    블로그 링크가 지저분했는대 좋은 아이디어인것 같습니다.
    단순링크가 아닌 블로그간의 '연결'이 되는 것 같아서 더 좋게 보이네요
    블로그링은 수정하면 안되는건지..저도 궁금하군요..

  17. Favicon of http://reignman.tistory.com BlogIcon Reignman 2009.07.31 12:13 신고  댓글주소  수정/삭제  댓글 남기기

    아주 예쁘고 실용적인 것 같아요. ^^
    설명도 쉽게 해주셔서 금방 달았습니다.
    감사합니다.ㅎㅎ

  18. Favicon of http://minidollhouse.tistory.com/entry/김대중-전-대통령님의-쾌유를-비는-리플들을-모아서-전해드리고-왔습니다 BlogIcon 미니 2009.07.31 18:10 신고  댓글주소  수정/삭제  댓글 남기기

    안그래도 티스토리 쓰면서 링크가 좀 더 편리하게 개선되야 한다고 느껴왔는데, 너무 쉽고 예뻐요! 잘 쓸께요.감사합니다(*^^*)

  19. Favicon of http://tomatomail.tistory.com/ BlogIcon 호련 2009.10.28 21:02 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 정보 감사합니다 ^_^)*

  20. Favicon of http://theforest.tistory.com/ BlogIcon 수페 2010.04.16 19:59 신고  댓글주소  수정/삭제  댓글 남기기

    우연찮게 발견하게 되어서 사용하게 되었습니다
    볼때마다 이쁘네요ㅠ//ㅠ
    너무 실용적이어서 .. 감사합니다

  21. Favicon of http://storyheaven.tistory.com BlogIcon storyheaven 2011.06.04 03:35 신고  댓글주소  수정/삭제  댓글 남기기

    들를 때마다 하나씩 배워가는 참 재미...
    오늘도 잘 보고 갑니다.


우드스