이 사이트는 네이버에서 배포하는나눔고딕 글꼴 과 마이크로소프트에서 배포하는 맑은 고딕 글꼴을 사용합니다.

"간결화"에 해당되는 글 1건

  1. 2009/04/27 AnyLink CSS Menu v2.0을 이용한 link 목록 간소화 (2)

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

2009/04/27 17:19
Posted by 其仁 Posted in " 설치형 블로그 "
요즘 스킨을 어떻게 변경하면, 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;주1
}

- 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 내 '수정 전'에서 '수정 후'로 변경주2
수정 전
<!-- 링크목록 -->
   <div class="listbox">
       <h3>link</h3>
       [##_link_list_##]
   </div>

수정 후
<!-- [##_link_list_##] -->
<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://www.blogkorea.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://kiin.blog.qrobo.com/">半長의 Linkblog</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="http://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>

이렇게 모두 적용하면

사용자 삽입 이미지

모두 적용 후 최종 모습


와 같은 최종적인 모습으로 간소화된다.
크리에이티브 커먼즈 라이센스
Creative Commons License
  1. 색깔은 알아서 마음대로.
  2. 본인의 코딩 실력이 뛰어나면, 노가다를 할 필요가 없었을테지만, 그렇지 않은 관계로 일일이 손으로 입력하는 노가다를 수행했다. ㅠ.ㅠ
이올린에 북마크하기(0) 이올린에 추천하기(0)
TAG , , , , , , , , , , ,
Trackback, Comments ( 2 )

Trackback

Trackback Address :: http://i-kiin.net/trackback/615

prev
next
1