태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

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

분류: Digital News/Blog Source & 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일자 블로그하트링 점프메뉴소스

rss reader guide 블UP! 해주세요 한RSS로 구독 Feed Burner RSS-디자인로그[DESIGNLOG] Google에서 구독 위자드닷컴에서 구독

트랙백 주소 :: http://www.designlog.org/trackback/2511044 관련글 쓰기

  1. Subject: 블로그 간의 링크교환, 블로그 하트링 위젯을 달아보자

    Tracked from 신나는 블로그 세상, 신날로그 2007/06/14 04:45  삭제

    블로그 하트링은 블로그들을 서로 링크교환으로 연결해서 의사소통을 할수있는 일종의 블로그 커뮤니티 입니다. 블로거간의 관심과 정보교류 등 여러면으로 많은 블로거들에게 꼭 필요한 것이라고 강력 추천합니다 ㅎ 블로그 하트링에 대해 더알고 싶으시거나 관심있으신 분들은 저의 전글인 블로그를 이어주는 고리 블로그하트링 을 읽어보시기 바랍니다 저의 블로그 하트링은 오른쪽 사이드바에 보시면 알수있으시고, 혹시 저와 블로그 하트링을 연결하고 싶으신분은 댓글을 남겨주..

  2. Subject: "마루"님의 블로그하트링(Blog♥Rings)을 달았습니다. ^_^

    Tracked from [ MissFlash - Digital Life ] 2007/06/14 19:47  삭제

    지금까지 해왔던 닫힌 블로그 생활을 청산하고 좀 더 많은 블로거들과 교감을 갖기 위해... 마루님의 블로그하트링을 달았습니다. 우측 사이드바에 있습니다. ^^ 메뉴를 누르시면 아래와 같이 블로그하트링을 보실 수 있습니다. ^_^ 마루님이 어제 친절하게 소스와 파일을 공유해주셨는데요... 아직 모두가 (실시간으로) 동일한 블로그하트링을 가지게 설정하지는 못하지만... 하나씩 채워나가다 보면 저도 수백명의 블로거들과 고리를 맺을 수 있을거라 기대합니다...

  3. Subject: 블로그 하트링 실수..ㅠ.ㅠ

    Tracked from 추억이 될 오늘... 2007/06/28 00:26  삭제

    예전에 마루님의 블로그에서 블로그하트링 이라는 링크 구현 방법을 보고 제 블로그에도 적용을 하였습니다. 이런저런 제가 필요한 웹사이트나 친구들 블로그&싸이월드.. 그리고 자주 찾아뵙는 분들의 블로그 주소들까지 싹 넣어놨었죠.. 방법은 이렇습니다. 태터툴즈의 관리자메뉴에 들어가 스킨 메뉴의 사이드바 메뉴에서 사이드바 배너출력 모듈을 추가하고 코드를 삽입하는 방식이죠..그런데.. 오늘.. 스킨을 바꿔볼까?? 라는 위험한 발상을 하고 이런저런 스킨..

  4. Subject: 블로그 하트링을 달았습니다.

    Tracked from Feel the Freeism 2007/06/29 10:07  삭제

    그림. 블로그 하트링블로그 하트링을 달았습니다. 오른쪽 사이드바 아랫쪽에서 보실 수 있습니다. ^^다들 알고 계실 것 같지만, 제가 만든 것은 아닙니다. Otz원문&원본 출처 및 설치법은 아래 링크로~ :: 블로그 하트링 보기 & 달기 ::뭐랄까...C월드의 일촌 파도타기와 같은 느낌이지만, 역시나 마구 잡이식의 '링크[!!]'가 아니라서 조금 더 소중한 느낌이랄까요? ^^원본의 내용을 마구 칼질 했는데... 괜찮겠죠? ㅠㅠ - Com..

  5. Subject: 블로그 하트링을 달아봤습니다.

    Tracked from 편리의 오늘스러운 이야기 2007/06/29 13:38  삭제

    마루님께서 블로그 하트링 소스를 공개하셨을 때 달까말까 고민하다 그냥 방치해두었는데.. 오늘은 갑자기 무슨 바람이 불었는지.. 업무시간에 잠시 쉬는 시간에 달아보자.. 라는 생각이 불현듯 엄습해와서.. 뚝딱~ 달아봤습니다. 소스 그대로 스킨 수정해서 올렸는데.. 마음에 드네요. 아~ 사이즈만 약간 수정했습니다. 스킨이 작아요. ㅋ하트링으로 이제 좀 더 많은 블로글 방문할 수 있을 것이니까.. 그냥 기분이 좋아집니다. 메타사이트에 워낙 많은 글들이 올..

  6. Subject: 블로그 하트링?...

    Tracked from Live with Gagamell...아지라엘과 가가멜의 반찬거리.. 2007/07/02 14:43  삭제

    예전 부터 여기 저기 블로그를 돌아 다니다 보면 저게 뭐지 하는 궁금 증이 있었는데... 벗님의 블로그에 물어 봤더니 친절히 마루님의 링크를 알려 주셔서... 하트링을 달아 보았네요... 그런데.. 이거 링크는 자신이 직접 추가하는 것이 아니고 마루님이 추가 해주는 건가요?... 아니면... 자신의 블로그를 링크에 추가 하려면.. 어케 해야 하나요... 일단.. 트랙백을 날려드리고 답변을...ㅋㅋㅋ 한창 블로그 공사 중이라.. 아직 블로그가 어수선..

  7. Subject: Blog♥Rings 구현완료!

    Tracked from emotionbank 2007/07/09 09:25  삭제

    Blog♥Rings을 구현했습니다..^^;; 저도 좀 더 많은 블로거들과 소통하고자 합니다.. 자주 들를께요^^;;

  8. Subject: 블로그를 시작 했어요!

    Tracked from 블로그짱 2007/07/29 15:38  삭제

    왕초보인 내가 티스토리에 무작정 블로그를 만들어 버렸다! 이젠... 어쩐다지.. 뭐 여러 많은 포털사이트에서 초보자도 쉽게 만들고 꾸밀수 있는 블로그를 제공해주긴 하지만 웬지 욕심이 생기기 시작했다. 설치형블로그라는게 있다길래 호기심이 생겨 검색을 해보니 테터툴즈,티스토리가 눈에 띄였다. 완성된 블로그를 제공해주는곳에서 기본으로 제공해주는 스킨이나 이미지를 골라쓰기만 할줄알았던 나에게는 테터툴즈가 설치된 블로그인 티스토리가 딱이라는 생각에 만든것이다..

  9. Subject: Blog♥Rings 을 설치했답니다.

    Tracked from brainchaos™ TiP 2007/08/02 08:39  삭제

    마루님이 개발 하신 블로그하트링을 설치 했습니다~~~ 이제서야 ... 마루님의 디자인로그에 무척이나 친절하게 설명되어 있답니다. 블로그하트링(Blog Heart Ring) 구현 방법! 그냥 따라 하시면 됩니다. 참 유용한 링크입니다. 한번 달아보시길 권해드립니다. 제블로그엔 이렇게 적용했답니다. #Blog♥Rings 적용# 마루님 감사합니다. 잘쓸께요~~ 그리고 저도 Blog♥Rings에 연결될까요? ^^;

  10. Subject: 블로그 하트링을 달면서...

    Tracked from blog.betterface 2007/09/04 11:46  삭제

    어느덧 블로깅을 시작한지도 7개월째 접어들기 시작합니다. 주로 정보위주의 블로깅으로 흐른 이유는 제 블로그에 가끔씩 오신분들중에 저의 글을 많이 읽으신 분들이나 눈치 빠르신 분들은 아시겠지만 블로깅의 시작자체가 불온한 의도였기 때문(노골적인 상업용 블로그)이었습니다. 이전에 말씀드린대로 이건아니구나 깨달으면서 정보위주의 블로깅을 했습니다. 요즘들어서는 소통에 대해서 욕구가 생기기 시작했습니다. 초기에는 트랙백 개념을 몰라 애먹기도 했지만(이게 링크거..

  11. Subject: 블로그하트링을 달았다.

    Tracked from 토끼의 오두막집 2007/11/08 14:07  삭제

    '달았다' 2편인가...(저번 포스트는 '야후위젯을 달았다'였는데ㅋㅋㅋ) 아무튼 드디어 블로그하트링을 달았다. 사이드바에서 기본적으로 제공되는 링크 모듈을 쓰다가 불편한 점이 있어서 티스토리에 이렇게 제안한 적이 있었다. 잇힝... 다른 블로그들을 다니다 보면 그다지 내 링크가 많진 않은 것이 사실이지만 불편하긴 했다. 그래서 티스토리가 해결해주기 전에 해결방법을 찾고자 떠돌아다니던 중 마루님의 블로그 디자인로그(http://www.designlog..

  12. Subject: 블로그하트링(Blog♥ling) 달았습니다 ^-^

    Tracked from Η a r u 불살라보자ºㅂº 2007/12/09 12:43  삭제

    랜덤으로 블로그를 타고다니다 하트링을 본적이 있는데 정말 이쁘다고 생각되어서 어떻게 설치할까했는데 다행이 블로그하트링을 여차저차 마루[maru]님의 만드신걸 알게되어서 제블로그에도 달았습니다. 정말 이뻐요 +_+ 블로그 하트링은 하트링을 단 블로거들을 하나로 묶어주는 역활을 해줍니다. 차차 업데이트가 되어서 서로 연결된 블로거들이 많아 지면 좋겠습니다 ^-^ 많은 링크들을 하나로 깔끔하게 해주는 효과도 생겨요 약간 디자인을 바꿔서 제 블로거에 디자인..

  13. Subject: 블로그하트링 달다.

    Tracked from 유기농인삼-삶엔삼 Ginseng in the life 2008/01/05 14:18  삭제

    작년에 블로그하트링을 알았었는데, 그동안 블로그꾸미는 이런 저런 방법들을 배우다가 오늘에야 블로그하트링을 달았다. 보다 더 깔끔하고 정리되는 유기농인삼을 만들어야 겠다.

  14. Subject: 블로그하트링에 링크모듈을 넣어봅시다.

    Tracked from Η a r u 불살라보자ºㅂº 2008/01/22 19:12  삭제

    마루님의 만드신 블로그하트링을 써오면서 약간 불편한 점이 있었습니다. 이웃 블로거들의 링크를 일일이 수작업으로 써줘야 했거든요. (2번째 메뉴인 Select T-blog가 이웃블로거 링크들입니다) 티스토리 메뉴에 있는 '내 링크에 추가'를 누르면 자동으로 블로그가 링크에 추가되요. 그럼 링크모듈에 자동적으로 들어가게되죠. 블로그하트링을 쓰면 추가해도 나타나지 않습니다. <!-- T-Blog --> <!-- 블로그하트링 외에 일반적인 블로그나 홈페이지..

  15. Subject: 프레이's Story 블로그하트링을 시작합니다

    Tracked from 프레이's Story 2008/02/11 00:11  삭제

    BlogHeartRing.zip 디자인로그의 마루님께서 추천하시는 '블로그하트링'을 사이드바에 달았습니다. 보다 자세한 설명과 설치 방법은 마루님의 블로그에서 잘 설명되어 있기에 아래 링크를 따라 가시면 확인하실 수 있습니다. http://www.designlog.org/2511044#recentTrackback 블로그하트링은 HTML 소스 입력이 가능한 티스토리, 테스트큐브등에 바로 작용하실 수 있습니다. 설치 해 놓고 보니 성실하고 책임감 있는..

  16. Subject: 존군이 추천하는 블로그 스킨를 예쁘게 꾸밀 수 있는 10가지 팁!

    Tracked from 피곤한 존과 더 피곤한 미스터 스미스씨 2009/05/23 11:57  삭제

    제가 이때까지 블로그 스킨을 변경하는데 도움이 됬었던 팁을 심심해서 모아봤습니다 (웃음) 1. 댓글 창 배경 이미지 넣기! 블로그를 이곳 저곳 다니시다 보시면 댓글 창에 이미지가 들어가 있으신 분들을 보실 수 있을 겁니다. 옆의 이미지처럼 존군도 화이트 보드 스킨을 쓸때는 이런 식으로 넣어 주고 있었습니다만. 귀찮습니다. 스킨을 요즘 자주 바꾸고 있습니다만. 바꿀때 마다 이미지의 크기를 바꿔주고 해야 하니까 귀찮네요. 잡담이 길어졌네요 ㅎㅎ styl..


Follow hyunwook on Twitter | DESIGN LOG RSS 구독