아크몬드 바? 아이스크림은 아니고…

archmond_blog_bar
아크몬드 바 © 아크몬드

지금 제 블로그 상단의 네비게이션 바 보이시죠?

저의 웹사이트와 블로그들을 모아 놓은 ‘아크몬드 바(archmond bar)’입니다. 먹는 건 아니구요^^;

아크몬드 바는 Windows Live Wave 3 및 Windows 7 스타일의 깔끔한 블로그 링크입니다. 이번 포스트에서는 이 아크몬드 바를 여러분의 블로그에 달 수 있는 방법을 알려 드립니다.

아크몬드 바, 왜 만들었죠?

accessibilitycpl.dll_I0140_0409
© Microsoft

제가 아크몬드 바를 만들게 된 것은 지난 10월 10일이었습니다.

  1. 상단에 위치할 것
  2. 웹 브라우저 및 여러 블로그와 어울릴 것
  3. 링크를 잘 알아볼 수 있게 할 것
  4. 이왕이면 Windows Live 스타일을 내 보자!

위의 사항들을 충족시키고, 뿔뿔이 흩어져 있는 블로그들 간의 연결을 강화하기 위해서 시작했습니다.

지난 10월부터 지금까지 2달 가량, 아크몬드 바로 인해 각 블로그간 연계가 강화됨은 물론, 방문자 수도 증가한 것을 느낄 수 있었습니다. 메인 블로그인 아크비스타를 방문한 분들이 다른 링크도 많이 눌러 주셨습니다.

archmond_bar_power_referer
아크7 블로그의 리퍼러 로그. 아크몬드 바를 통한 유입(archvista.net)이 많아졌습니다.

‘묶어’ 놓는다는 것의 힘이 대단하더군요. 이렇게 별도의 포스트로 소개하게 된 것도… 어떻게 보면 네비게이션 바의 성공이라고 할 수 있겠네요. e메일, 블로그 비밀댓글 등으로 네비게이션 바에 대해 문의가 많았거든요. 생각보다 많은 분들이 관심을 가져 주시는 것 같습니다.

 

현재 아크몬드 바를 사용중인 블로그들

저 이외에도, 블로고스피어에서 아크몬드 바를 사용중인 분들이 있습니다.

archmond_bar_in_itviewpoint
▲서명덕기자의 人터넷세상 http://itviewpoint.com

...아래에 이 네비게이션 바를 넣는 방법을 알려 드립니다.

 

1. <body> 태그 뒤에 아래의 소스를 넣습니다.

archmond_bar_edited

▲티스토리의 경우, 관리자 화면에서 [스킨] –> [HTML/CSS 편집]을 눌러 편집하면 됩니다.

아래의 소스를 입맛대로 추가 및 변경하시기 바랍니다.

<!-- 블로그 네비게이션 시작 -->
<div class="archmond_navi">
<ul><strong>아크몬드:</strong>
<li><a href="http://archvista.net/" title="ArchVista"><img src="http://img216.imageshack.us/img216/2143/archvistaxu4.png"/>ArchVista</a></li>
<li><a href="블로그2 주소" title="블로그2 제목"><img src="이미지 주소"/>블로그2 제목</a></li>
</ul></div>
<!-- 블로그 네비게이션 끝 -->

※ 위의 소스는 어떤 식으로 바꾸어 사용하셔도 좋습니다. 하지만, ArchVista 링크를 다른 블로그에서도 볼 수 있다면 정말 기쁠 것 같네요..

 

2. CSS 파일의 제일 아래에 아래의 소스를 넣습니다.

아래의 CSS를 입맛에 맞게 수정해 사용하시기 바랍니다.

/* 블로그 네비게이션 바 */
.archmond_navi { margin: 0; padding: 0; background:url(http://img186.imageshack.us/img186/8458/archmondnavibackgroundgc6.png) repeat;
        height: 32px; background-color: #fff; text-align:center; font-family: Malgun Gothic, Verdana; }
.archmond_navi ul   {margin:0;  padding:0;  list-style:none; font-size:0.75em;}
.archmond_navi img {width:16px; height:16px; margin-top:5px; padding-right:3px; vertical-align: text-bottom; border:none;}
.archmond_navi li   {display:inline;  background:url(http://img118.imageshack.us/img118/7505/pipert4.gif) no-repeat;
            margin-left:3px;  padding-left:7px;}
.archmond_navi li a {text-decoration:none; color:#333;}

위의 http://img186.imageshack.us/img186/8458/archmondnavibackgroundgc6.png 는 아크몬드 바의 배경 이미지(푸른 색)입니다. 이것을 http://img155.imageshack.us/img155/8552/archmondbarblackbackgrofo3.gif 로 바꾸면 검은 색으로 바꿀 수 있습니다.(직접 만드셔도 좋습니다)

 

블로그 아이콘은 어디서 구하나요?

archmond_bar_veryicon

블로그 아이콘은 Very Icon 웹사이트에서 구하면 됩니다.

archmond_bar_veryicon2

▲다양한 종류의 아이콘들이 많습니다. 검색을 통해 원하는 이미지를 찾았다면, 32x32 픽셀 크기를 다운로드하셔서 사용하면 됩니다. 다운로드 한 이미지는 업로드 하신 뒤 위의 소스(1번 <body>태그 뒤에…)에 적용하시기 바랍니다.

paint 
paint icon © Microsoft

읽어 주셔서 고맙습니다. 많은 분들이 사용해 주셨으면 좋겠네요. :-)

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 해피쿠스 2008.12.15 03:25 신고  댓글주소  수정/삭제  댓글쓰기

    덕분에 이것저것 만지다 보니.. ㅋㅋㅋ 사이트 에러도 잡게 되었네요~
    에효~~ ^.^

  3. Kudo L 2008.12.15 04:25 신고  댓글주소  수정/삭제  댓글쓰기

    적용했습니다. 이미지 올리는 게 좀 노가다긴 했지만 그래도 결과물이 괜찮네요. 감사~!

  4. A2 2008.12.15 09:09 신고  댓글주소  수정/삭제  댓글쓰기

    왠지 정말 아이스크림 이름 같네요 ㅋ
    아이스크림+아몬드 ㅎㅎ

  5. 세이군 2008.12.15 10:02 신고  댓글주소  수정/삭제  댓글쓰기

    링크 신고합니다.
    직접 만들까도 생각했는데 좋은 방법을 알려주셨네요.
    감사합니다. (꾸벅)

  6. joogunking 2008.12.15 10:25 신고  댓글주소  수정/삭제  댓글쓰기

    서명덕 기자님 블로그에서 봤었어요.
    아크몬드님꼐서 만드신 것이었군요. 감사합니다.

  7. 한성민 2008.12.15 10:40 신고  댓글주소  수정/삭제  댓글쓰기

    저도 이런 거 달고 싶었는데 여기에 상세히 소개 되어 있네요...
    좋은 정보 감사합니다...
    시간나면 달아봐야겠어요...^^

  8. ru:m 2008.12.15 11:16 신고  댓글주소  수정/삭제  댓글쓰기

    이야.. 이쁘네요! 저도 여건이 되면 한번 달아봐야겠어요! 감사합니다~

    ps, "아크몬드 바, 왜 만들었죠?"가 유독 시비조로 들리는건 느낌뿐이겠죠..? (...)

  9. Windows 7 Aero 2008.12.16 14:09 신고  댓글주소  수정/삭제  댓글쓰기

    저도 Archmond Bar를 적용해 보고 싶네요...

  10. nizi 2008.12.19 10:57 신고  댓글주소  수정/삭제  댓글쓰기

    와.. 이거 무지 이쁘네요..

    잠깐 들렸다가 좋은 item하나 얻어 갑니다.

    저도 nizibar(무슨 이상한 Bar이름 같네요.ㅋ) 하나 만들어야 겠습니다. 역시 표절ㅡ.,ㅡ;;

  11. Early Adopter 2008.12.22 11:56 신고  댓글주소  수정/삭제  댓글쓰기

    지금 제 티스토리 블로그에 적용하려고 고쳐보고 있네요..^^ 감사합니다!!

  12. NZhe 2009.01.15 21:46 신고  댓글주소  수정/삭제  댓글쓰기

    제가질문드린것이 이곳에 있었군요....
    좋은정보 정말 감사합니다^^
    한번 달아봐야겠어요^^

  13. 레오파드 2009.01.17 00:13 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 저도 아크몬드 바를 달아봤습니다 :)

    http://leopardmac.tistory.com

  14. 로빈 2009.05.13 22:17 신고  댓글주소  수정/삭제  댓글쓰기

    근데 왜 저는 글꼴이 작게 나오나요? ㅠㅠ

  15. 센쇼 2009.10.29 00:45 신고  댓글주소  수정/삭제  댓글쓰기

    아이콘을 업로드했습니다.(image/???.png)
    이걸 사용하려면 img src=에 주소를 어떤형식으로 써야하는지요.

  16. 센쇼 2009.11.02 01:04 신고  댓글주소  수정/삭제  댓글쓰기

    tinipic.com이란곳에 아이콘 올리고 링크걸고 했습니다.
    툴바 잘쓸게요~ ^^ ㄳㄳ
    근데 화이트보드스킨과의 문제가...;;

  17. 센쇼 2009.11.03 11:39 신고  댓글주소  수정/삭제  댓글쓰기

    바의 링크를 누르면 새창으로 뜨게 하려면 어떻게 해야하나요

  18. 센쇼 2009.11.03 13:03 신고  댓글주소  수정/삭제  댓글쓰기

    blogger에 코드를 삽입하니 오류템플릿이라고 나오면서 저장이 되지를 않는데
    어떻게 해야하죠?

  19. MC스마일 2009.11.06 22:29 신고  댓글주소  수정/삭제  댓글쓰기

    저도 블로그를 오픈하면서,,,, 블로그 디자인의 허전함을 채워 주었네요..

    티스토리 스킨에 적응하기가 힘들어서,, 아크몬드바와 벌어진 간격 줄이는데 조금 고생을 했네요..

    이 좋은 아크몬드바,,, 잘 쓰겠습니다..^^

  20. 센쇼 2009.11.19 13:08 신고  댓글주소  수정/삭제  댓글쓰기

    태그부분과 css부분이
    /** Page structure tweaks for layout editor wireframe */
    의 위부분이 css고 아래가 html아닌가요?
    둘다 넣었는데
    템플릿이 잘 구성되어 있지 않아 구문분석하지 못했습니다. 모든 XML 요소가 제대로 닫혀있는지 확인하세요.
    XML 오류 메시지: Open quote is expected for attribute "{1}" associated with an element type "class".
    이런메세지가 나옵니다 ㅠ.ㅠ

  21. Windows 7 Aero 2011.02.06 16:36 신고  댓글주소  수정/삭제  댓글쓰기

    오랜만에 해보는 거라 잘 안되네요 ㅠㅠ
    배경이 안나오고 리스트형식으로 나오네요...
    다 넣었는데도 그러네요 ?