아크몬드 바? 아이스크림은 아니고…
아크몬드 바 © 아크몬드
지금 제 블로그 상단의 네비게이션 바 보이시죠?
저의 웹사이트와 블로그들을 모아 놓은 ‘아크몬드 바(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 웹사이트에서 구하면 됩니다.
▲다양한 종류의 아이콘들이 많습니다. 검색을 통해 원하는 이미지를 찾았다면, 32×32 픽셀 크기를 다운로드하셔서 사용하면 됩니다. 다운로드 한 이미지는 업로드 하신 뒤 위의 소스(1번 <body>태그 뒤에…)에 적용하시기 바랍니다.
paint icon © Microsoft
읽어 주셔서 고맙습니다. 많은 분들이 사용해 주셨으면 좋겠네요. 🙂
이렇게 올려주셨으니 사용하는 분들이 더욱 많아질 것 같네요. 저도 한 번 달아봐야겠습니다. 🙂
오호.. 잘쓰겠습니다. 안그래도 부러웠는데 이번 기회에 저도 달아볼께요.. ^^;
좋은 정보입니다.
그리고 언제나 올때마다 느끼는 거지만, 블로그 스킨이 너무나 예쁩니다..
저는 이쪽으로는 문외한이라 ㅠㅠ
언제나 제 블로그도 이렇게 세련되고 예뻐질까요?
좋은 정보 정말 감사합니다.
혹시, 상단에 빈공간없이 딱~! 붙이려면 어떻게 해야하나요?
오 좋은데요?
사이트 디자인이라는것이 얼마나 중요한지 새삼 깨닫네요.
아크몬드 바, 왠지 파이어폭스의 awesome bar같아요 ^^
덕분에 이것저것 만지다 보니.. ㅋㅋㅋ 사이트 에러도 잡게 되었네요~
에효~~ ^.^
적용했습니다. 이미지 올리는 게 좀 노가다긴 했지만 그래도 결과물이 괜찮네요. 감사~!
아크몬드님의 블로그에 붙어있는 네비게이션 바를 달아보았다. 아크몬드님이 올려주신 가이드를 이용해 만들었는데, 조금 오래 걸리긴 했다. 그런데 대부분 다 아이콘 찾느라 좀 시간을 썼다. 왼쪽은 내가 운영하는 사이트들이고, 오른쪽은 나와 친한 분들(진짜…?)의 사이트들이다. 아크7 블로그도 달까 했으나, 공간이 부족해서 그냥 이걸로 만족하기로… 이상하게 보이시면 댓글 달아주시길 바란다. 다시한번 좋은 것을 공유해주신 아크몬드님께 감사하다는 말씀..
왠지 정말 아이스크림 이름 같네요 ㅋ
아이스크림+아몬드 ㅎㅎ
링크 신고합니다.
직접 만들까도 생각했는데 좋은 방법을 알려주셨네요.
감사합니다. (꾸벅)
서명덕 기자님 블로그에서 봤었어요.
아크몬드님꼐서 만드신 것이었군요. 감사합니다.
저도 이런 거 달고 싶었는데 여기에 상세히 소개 되어 있네요…
좋은 정보 감사합니다…
시간나면 달아봐야겠어요…^^
이야.. 이쁘네요! 저도 여건이 되면 한번 달아봐야겠어요! 감사합니다~
ps, “아크몬드 바, 왜 만들었죠?”가 유독 시비조로 들리는건 느낌뿐이겠죠..? (…)
저도 Archmond Bar를 적용해 보고 싶네요…
1개가 생겨서 5개가 됐음.ㅋㅋㅋ
팁이 너무 쉬워서…ㅋㅋㅋ
와.. 이거 무지 이쁘네요..
잠깐 들렸다가 좋은 item하나 얻어 갑니다.
저도 nizibar(무슨 이상한 Bar이름 같네요.ㅋ) 하나 만들어야 겠습니다. 역시 표절ㅡ.,ㅡ;;
지금 제 티스토리 블로그에 적용하려고 고쳐보고 있네요..^^ 감사합니다!!
제가질문드린것이 이곳에 있었군요….
좋은정보 정말 감사합니다^^
한번 달아봐야겠어요^^
안녕하세요 저도 아크몬드 바를 달아봤습니다 🙂
http://leopardmac.tistory.com
블로그 상단에 ‘아크몬드’로 시작하는 줄 하나가 보이실 것입니다.
아크몬드님이 만드신 ‘아크몬드 바’인데 그냥 테마파일 수정해서 붙이려다보니 테마 수정할 때마다 계속…
참 오랜만에(?) 스킨을 바꿨네요. Windows 7을 설치하고 난 뒤로 바꾸어야 겠다는 생각은 계속 있었는데 말이죠. 어쨌든 이번 컨셉을 윈도우7으로 잡으려다 home.live.com으로 바꾸었습니다[각주:1] 다른 3단스킨을 찾아헤매다가 결국 못찾아서 2단이라도 쓰자고 했으나… 결국 맘에드는 스킨이 없어서 이전에 쓰던 Butterfly스킨을 수정했습니다. 일단 왼쪽 사이드바 옆에있던 메뉴를 다 없애고 본문폭을 550px로 늘렸습니다. 470은..
롯X삼강 신제품 아몬드 바
근데 왜 저는 글꼴이 작게 나오나요? ㅠㅠ
참고로 밑에 바가 있습니다.
이제 됐네요. 됐음
아이콘을 업로드했습니다.(image/???.png)
이걸 사용하려면 img src=에 주소를 어떤형식으로 써야하는지요.
tinipic.com이란곳에 아이콘 올리고 링크걸고 했습니다.
툴바 잘쓸게요~ ^^ ㄳㄳ
근데 화이트보드스킨과의 문제가…;;
바의 링크를 누르면 새창으로 뜨게 하려면 어떻게 해야하나요
blogger에 코드를 삽입하니 오류템플릿이라고 나오면서 저장이 되지를 않는데
어떻게 해야하죠?
저도 블로그를 오픈하면서,,,, 블로그 디자인의 허전함을 채워 주었네요..
티스토리 스킨에 적응하기가 힘들어서,, 아크몬드바와 벌어진 간격 줄이는데 조금 고생을 했네요..
이 좋은 아크몬드바,,, 잘 쓰겠습니다..^^
태그부분과 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”.
이런메세지가 나옵니다 ㅠ.ㅠ
오랜만에 해보는 거라 잘 안되네요 ㅠㅠ
배경이 안나오고 리스트형식으로 나오네요…
다 넣었는데도 그러네요 ?
미리보기에서만 깨진 거군요…
근데 너무 글씨가 작은데 글자 크기를 직접 수정해야 되나요 ? 아니면 스킨 문제인가요 ?