AnyLink CSS Menu v2.0을 이용한 link 목록 간소화

요즘 스킨을 어떻게 변경하면, whiteBoard 스킨을 사용하는 사용자들과 차별화시킬 수 있을까를 고민하고 있다. 그래서 여기저기를 기웃거리다가 도아님의 스킨을 1단으로 바꿨습니다.란 글에서 anylink, 조금 더 정확히 말하면, AnyLink CSS Menu v2.0라는 것을 알게 되었다. 상당히 유용한 기능이라 판단되어 몇 번의 삽질 끝에 이 블로그 내 ‘link 목록’을 간결화하는데 성공했다. 물론, 노가다를 동반해서. 적용하니

사용자 삽입 이미지
AnyLink CSS 적용 전 link 목록

와 같았던 ‘link 목록’이

사용자 삽입 이미지
AnyLink CSS 적용 후 link 목록

처럼 변경되었다. 간결해진 모양새가 정말 마음에 든다. 적용하는 대략적인 방법은 AnyLink CSS Menu v2.0에 나와 있지만, 개인마다 홈페이지나 블로그 조금씩 틀릴 것이기 때문에 이 블로그에 맞게 추가로 더 삽질한 것들을 잊어먹지 않기 위해 끄적거리면, 다음과 같다.

main.css: 마우스를 갖다 댔을 때 차별화를 두기 위해 아래 내용 추가

#anyLinkMouseOver:hover {
	color: #6898c1; /* 색깔은 알아서 마음대로 */
}

skin.html 내 <head> ~ </head> 사이에 아래 script 추가

<link rel=”stylesheet” type=”text/css” href=”http://자신의 블로그 또는 따로 올린 서버 주소/anylinkcssmenu.css” />
<script type=”text/javascript” src=”http://자신의 블로그 또는 따로 올린 서버 주소/anylinkcssmenu.js”>
/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/ </script> 

skin.html에서 </body> 바로 위에 아래 script 추가

<script type=”text/javascript”>   //anylinkcssmenu.init(“menu_anchors_class”) //call this function at the very *end* of the document!
anylinkcssmenu.init(“anchorclass”) </script> 

skin.html 내 ‘수정 전‘에서 ‘수정 후‘로 변경1
수정 전

<!– 링크목록 –>
<div class=”listbox”>
	<h3>link</h3>
</div>

수정 후

<!– 링크목록 –>
<span id=”anyLinkMouseOver” style=”cursor: pointer; cursor: hand;” class=”anchorclass someotherclass” rel=”submenu1″>Fun & Humor</span>
<div id=”submenu1″ class=”anylinkcss” style=”width: 250px; background-color: #f8f8f8;”>
	<ul>
		<li><a href=”http://marineblues.net/”>marineblues</a></li>
	</ul>
</div>
<br />
<span id=”anyLinkMouseOver” style=”cursor: pointer; cursor: hand;” class=”anchorclass someotherclass” rel=”submenu2″>Meta Blog & Feed</span>
<div id=”submenu2″ class=”anylinkcss” style=”width: 250px; background-color: #f8f8f8;”>
	<ul>
		<li><a href=”http://www.mixsh.com/”>믹시</a></li>
		<li><a href=”http://blogplus.net/”>블로그 플러스</a></li>
		<li><a href=”http://kr.openblog.com/”>오픈블로그</a></li>
		<li><a href=”http://allblog.net/”>올블로그</a></li>
	</ul>
</div>
<br />
<span id=”anyLinkMouseOver” style=”cursor: pointer; cursor: hand;” class=”anchorclass someotherclass” rel=”submenu3″>Music</span>
<div id=”submenu3″ class=”anylinkcss” style=”width: 250px; background-color: #f8f8f8;”>
	<ul>
		<li><a href=”http://www.maniadb.com/main.asp”>maniadb.com</a></li>
		<li><a href=”http://www.uni-nara.com/”>울라라의 삶과 노래</a></li>
	</ul>
</div>
<br />
<span id=”anyLinkMouseOver” style=”cursor: pointer; cursor: hand;” class=”anchorclass someotherclass” rel=”submenu4″>Whois 정보</span>
<div id=”submenu4″ class=”anylinkcss” style=”width: 250px; background-color: #f8f8f8;”>
	<ul>
		<li><a href=”http://www.domaincrawler.com/”>Domain information, whois & dns…</a></li>
		<li><a href=”http://whois.domaintools.com/”>Whois lookup and Domain name…</a></li>
	</ul>
</div>
<br />
<span id=”anyLinkMouseOver” style=”cursor: pointer; cursor: hand;” class=”anchorclass someotherclass” rel=”submenu5″>知人</span>
<div id=”submenu5″ class=”anylinkcss” style=”width: 250px; background-color: #f8f8f8;”>
	<ul>
		<li><a href=”http://house-choe.blogspot.com/”>MyHouse</a></li>
		<li><a href=”http://heehwan.blogspot.com/”>머릿속까지 똥이 가득해~</a></li>
		<li><a href=”http://9nang.net/”>오늘의 기분 좋고 나쁨은 내가 선택하는…</a></li>
		<li><a href=”http://search.auction.co.kr/search/search.asp?itemname=%uCC9C%uC77C%uC0C1%uC0AC”>천일상사 – 옥션</a></li>
	</ul>
</div>
<br />
<span id=”anyLinkMouseOver” style=”cursor: pointer; cursor: hand;” class=”anchorclass someotherclass” rel=”submenu6″>쇼핑</span>
<div id=”submenu6″ class=”anylinkcss” style=”width: 250px; background-color: #f8f8f8;”>
	<ul>
		<li><a href=”http://www.oneaday.co.kr/?id=a2lpbg==”>one a day</a></li>
		<li><a href=”http://www.oneaday.co.kr/OneAWeek.php?id=a2lpbg==”>one a week</a></li>
		<li><a href=”http://minishop.linkprice.com/sponcer_mall/bshop/?a_id=A100269863″>베스트샵</a></li>
		<li><a href=”http://kiin.shopportal.co.kr”>샵포탈</a></li>
		<li><a href=”https://i-kiin.net/entry/list-of-e-star-shop”>스타 연예인 쇼핑몰 모음</a></li>
	</ul>
</div>
<br />
<span id=”anyLinkMouseOver” style=”cursor: pointer; cursor: hand;” class=”anchorclass someotherclass” rel=”submenu7″>영혼 & 명상</span>
<div id=”submenu7″ class=”anylinkcss” style=”width: 250px; background-color: #f8f8f8;”>
	<ul>
		<li><a href=”http://www.zen.co.kr/”>명상나라</a></li>
		<li><a href=”http://blog.daum.net/brainyoga”>심령 세계 이야기</a></li>
		<li><a href=”http://www.xemasanka.com/”>제마법선도</a></li>
	</ul>
</div>

이렇게 모두 적용하면

사용자 삽입 이미지
모두 적용 후 최종 모습


와 같은 최종적인 모습으로 간소화된다.

Footnotes

  1. 본인의 코딩 실력이 뛰어나면, 노가다를 할 필요가 없었을테지만, 그렇지 않은 관계로 일일이 손으로 입력하는 노가다를 수행했다. ㅠ.ㅠ

3 thoughts on “AnyLink CSS Menu v2.0을 이용한 link 목록 간소화”

댓글 남기기

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.