아크몬드 바? 아이스크림은 아니고…
아크몬드 바 © 아크몬드
지금 제 블로그 상단의 네비게이션 바 보이시죠?
저의 웹사이트와 블로그들을 모아 놓은 ‘아크몬드 바(archmond bar)’입니다. 먹는 건 아니구요^^;
아크몬드 바는 Windows Live Wave 3 및 Windows 7 스타일의 깔끔한 블로그 링크입니다. 이번 포스트에서는 이 아크몬드 바를 여러분의 블로그에 달 수 있는 방법을 알려 드립니다.
아크몬드 바, 왜 만들었죠?
© Microsoft
제가 아크몬드 바를 만들게 된 것은 지난 10월 10일이었습니다.
- 상단에 위치할 것
- 웹 브라우저 및 여러 블로그와 어울릴 것
- 링크를 잘 알아볼 수 있게 할 것
- 이왕이면 Windows Live 스타일을 내 보자!
위의 사항들을 충족시키고, 뿔뿔이 흩어져 있는 블로그들 간의 연결을 강화하기 위해서 시작했습니다.
지난 10월부터 지금까지 2달 가량, 아크몬드 바로 인해 각 블로그간 연계가 강화됨은 물론, 방문자 수도 증가한 것을 느낄 수 있었습니다. 메인 블로그인 아크비스타를 방문한 분들이 다른 링크도 많이 눌러 주셨습니다.
▲아크7 블로그의 리퍼러 로그. 아크몬드 바를 통한 유입(archvista.net)이 많아졌습니다.
‘묶어’ 놓는다는 것의 힘이 대단하더군요. 이렇게 별도의 포스트로 소개하게 된 것도… 어떻게 보면 네비게이션 바의 성공이라고 할 수 있겠네요. e메일, 블로그 비밀댓글 등으로 네비게이션 바에 대해 문의가 많았거든요. 생각보다 많은 분들이 관심을 가져 주시는 것 같습니다.
현재 아크몬드 바를 사용중인 블로그들
저 이외에도, 블로고스피어에서 아크몬드 바를 사용중인 분들이 있습니다.
▲서명덕기자의 人터넷세상 http://itviewpoint.com
...아래에 이 네비게이션 바를 넣는 방법을 알려 드립니다.
1. <body> 태그 뒤에 아래의 소스를 넣습니다.
▲티스토리의 경우, 관리자 화면에서 [스킨] –> [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 로 바꾸면 검은 색으로 바꿀 수 있습니다.(직접 만드셔도 좋습니다)
블로그 아이콘은 어디서 구하나요?
블로그 아이콘은 Very Icon 웹사이트에서 구하면 됩니다.
▲다양한 종류의 아이콘들이 많습니다. 검색을 통해 원하는 이미지를 찾았다면, 32x32 픽셀 크기를 다운로드하셔서 사용하면 됩니다. 다운로드 한 이미지는 업로드 하신 뒤 위의 소스(1번 <body>태그 뒤에…)에 적용하시기 바랍니다.
paint icon © Microsoft
읽어 주셔서 고맙습니다. 많은 분들이 사용해 주셨으면 좋겠네요. :-)
'태터툴즈와 블로그' 카테고리의 다른 글
| 다음 메인페이지에 노출되고 있습니다 (22) | 2008/12/24 |
|---|---|
| 2008년 티스토리 우수 블로그에 선정되었습니다 (61) | 2008/12/18 |
| 블로그 상단에 깔끔한 네비게이션(아크몬드 바)을 달아보세요 (54) | 2008/12/14 |
| 월간 마이크로소프트웨어 12월호에 소개되었습니다 (20) | 2008/12/13 |
| 최근 잦아진 archvista.net의 접속 문제, 사과드립니다. (22) | 2008/12/11 |
| 아크비스타가 Microsoft의 Windows Vista 솔루션 센터와 연계되었습니다. (12) | 2008/12/08 |
트랙백 주소 :: http://archvista.net/trackback/1064
-
Subject: 아크몬드 바를 달았다.
Tracked from NHS Story: Final Year 2008/12/15 05:18 삭제아크몬드님의 블로그에 붙어있는 네비게이션 바를 달아보았다. 아크몬드님이 올려주신 가이드를 이용해 만들었는데, 조금 오래 걸리긴 했다. 그런데 대부분 다 아이콘 찾느라 좀 시간을 썼다. 왼쪽은 내가 운영하는 사이트들이고, 오른쪽은 나와 친한 분들(진짜...?)의 사이트들이다. 아크7 블로그도 달까 했으나, 공간이 부족해서 그냥 이걸로 만족하기로... 이상하게 보이시면 댓글 달아주시길 바란다. 다시한번 좋은 것을 공유해주신 아크몬드님께 감사하다는 말씀..
-
Subject: 플러그인 제작중
Tracked from DRSSAY.COM 2009/02/15 17:10 삭제블로그 상단에 ‘아크몬드’로 시작하는 줄 하나가 보이실 것입니다. 아크몬드님이 만드신 ‘아크몬드 바’인데 그냥 테마파일 수정해서 붙이려다보니 테마 수정할 때마다 계속...
-
Subject: 스킨,폰트 바꿨습니다.
Tracked from Trinka Trinka 2009/02/21 13:02 삭제참 오랜만에(?) 스킨을 바꿨네요. Windows 7을 설치하고 난 뒤로 바꾸어야 겠다는 생각은 계속 있었는데 말이죠. 어쨌든 이번 컨셉을 윈도우7으로 잡으려다 home.live.com으로 바꾸었습니다[각주:1] 다른 3단스킨을 찾아헤매다가 결국 못찾아서 2단이라도 쓰자고 했으나... 결국 맘에드는 스킨이 없어서 이전에 쓰던 Butterfly스킨을 수정했습니다. 일단 왼쪽 사이드바 옆에있던 메뉴를 다 없애고 본문폭을 550px로 늘렸습니다. 470은..
-
Subject: 아크몬드의 알림
Tracked from archmond's me2DAY 2009/02/22 03:08 삭제롯X삼강 신제품 아몬드 바
댓글을 달아 주세요
이렇게 올려주셨으니 사용하는 분들이 더욱 많아질 것 같네요. 저도 한 번 달아봐야겠습니다.
오홋.. 기대되는군요.
오호.. 잘쓰겠습니다. 안그래도 부러웠는데 이번 기회에 저도 달아볼께요.. ^^;
적용하신 모습이 궁금해 집니다.
좋은 정보입니다.
그리고 언제나 올때마다 느끼는 거지만, 블로그 스킨이 너무나 예쁩니다..
저는 이쪽으로는 문외한이라 ㅠㅠ
언제나 제 블로그도 이렇게 세련되고 예뻐질까요?
개인적으로는 아크비스타 이전의 롱혼블로그 스킨이 더 예쁘다고 생각합니다..
http://archmond.x-y.net/tt/index.php
좋게 봐 주셔서 부끄럽네요..ㅎㅎ
좋은 정보 정말 감사합니다.
혹시, 상단에 빈공간없이 딱~! 붙이려면 어떻게 해야하나요?
body 의 여백을 0으로 주면 될 것 같습니다.
오 좋은데요?
사이트 디자인이라는것이 얼마나 중요한지 새삼 깨닫네요.
아크몬드 바, 왠지 파이어폭스의 awesome bar같아요 ^^
생각보다 반응이 좋아서.. 놀라는 중입니다.ㅎㅎ
덕분에 이것저것 만지다 보니.. ㅋㅋㅋ 사이트 에러도 잡게 되었네요~
에효~~ ^.^
단순히 HTML과 CSS를 만지는 데도 많은 시간이 걸리더군요..ㅎㅎ
적용했습니다. 이미지 올리는 게 좀 노가다긴 했지만 그래도 결과물이 괜찮네요. 감사~!
오홋.. 멋있는데요?
왠지 정말 아이스크림 이름 같네요 ㅋ
아이스크림+아몬드 ㅎㅎ
아몬드바? ㅎㅎ
링크 신고합니다.
직접 만들까도 생각했는데 좋은 방법을 알려주셨네요.
감사합니다. (꾸벅)
워드프레스의 파란 기본테마와도 잘 어울릴 것 같습니다..
서명덕 기자님 블로그에서 봤었어요.
아크몬드님꼐서 만드신 것이었군요. 감사합니다.
고맙습니다.ㅎㅎ
저도 이런 거 달고 싶었는데 여기에 상세히 소개 되어 있네요...
좋은 정보 감사합니다...
시간나면 달아봐야겠어요...^^
예 꼭 시도해 보시기 바랍니다.
이야.. 이쁘네요! 저도 여건이 되면 한번 달아봐야겠어요! 감사합니다~
ps, "아크몬드 바, 왜 만들었죠?"가 유독 시비조로 들리는건 느낌뿐이겠죠..? (...)
ㅎㅎ 반말이라서 그런지 어감이 좀 좋지 않군요. 다음 번 포스팅시 그 부분을 생각해야겠습니다.
정말 적용하고 싶어 미칠지경이였는데 공개해주셔서 감사합니다 ^^.
도움이 되었으면 좋겠습니다.
저도 Archmond Bar를 적용해 보고 싶네요...
4개나 적용하셨더군요..ㅋㅋ
1개가 생겨서 5개가 됐음.ㅋㅋㅋ
팁이 너무 쉬워서...ㅋㅋㅋ
ㅎㅎㅎ
와.. 이거 무지 이쁘네요..
잠깐 들렸다가 좋은 item하나 얻어 갑니다.
저도 nizibar(무슨 이상한 Bar이름 같네요.ㅋ) 하나 만들어야 겠습니다. 역시 표절ㅡ.,ㅡ;;
그다지 대단한 것은 없습니다^^ 마음껏 사용하세요.
지금 제 티스토리 블로그에 적용하려고 고쳐보고 있네요..^^ 감사합니다!!
기대되는걸요?ㅎㅎ
제가질문드린것이 이곳에 있었군요....
좋은정보 정말 감사합니다^^
한번 달아봐야겠어요^^
도움이 되셨는지 모르겠습니다.
안녕하세요 저도 아크몬드 바를 달아봤습니다
http://leopardmac.tistory.com
이야... 멋진데요?
근데 왜 저는 글꼴이 작게 나오나요? ㅠㅠ
참고로 밑에 바가 있습니다.
이제 됐네요. 됐음
아이콘을 업로드했습니다.(image/???.png)
이걸 사용하려면 img src=에 주소를 어떤형식으로 써야하는지요.
http://... 로 시작하는 주소나 이미지를 저장하신 곳의 주소를 입력하시면 됩니다.
tinipic.com이란곳에 아이콘 올리고 링크걸고 했습니다.
툴바 잘쓸게요~ ^^ ㄳㄳ
근데 화이트보드스킨과의 문제가...;;
스킨 자체의 CSS를 확인해 보시기 바랍니다.
바의 링크를 누르면 새창으로 뜨게 하려면 어떻게 해야하나요
_blank 로 타겟을 잡으시면 됩니다.
예)
<a href="웹 주소" target="_blank">링크</a>
blogger에 코드를 삽입하니 오류템플릿이라고 나오면서 저장이 되지를 않는데
어떻게 해야하죠?
블로거(Blogger.com)의 [HTML 편집] 메뉴에서, STYLE 부분과 HTML 부분을 분리하셔서 적절한 위치에 삽입하세요.
저도 블로그를 오픈하면서,,,, 블로그 디자인의 허전함을 채워 주었네요..
티스토리 스킨에 적응하기가 힘들어서,, 아크몬드바와 벌어진 간격 줄이는데 조금 고생을 했네요..
이 좋은 아크몬드바,,, 잘 쓰겠습니다..^^
칭찬해 주셔서 부끄럽네요!!
사실 웹 디자인 쪽에는 관심만 있어서요..ㅎㅎ
태그부분과 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".
이런메세지가 나옵니다 ㅠ.ㅠ
지금 블로그를 확인해 보니, 장착(?) 하셨더군요^^