에드센스 스킨에 이미지없는 네비게이션을 적용하는 방법

제가 이전에 배포한 에드센스 스킨에 이미지 없는 css3 의 네비게이션을 적용하는 방법을 모른다고 해서 이 포스팅을 합니다.
보시면 누구나 수정이 가능할겁니다. 

일단 에드센스 스킨은 자바스크립트로 네비게이션 부분을 꾸밈니다. 그래서 이것으로 수정할경우 더 가볍게 사용할수 있죠.
먼저 html 부분부터 수정해보겠습니다.

html 수정.

 menu 부분을 삭제합니다.

하위에 자바스크립트 두줄도 같이 삭제합니다.
 

menu 부분에 제가 작성한 형태로 html 부분을 채웁니다. 대충 테스트형식으로 저는 아래처럼 채웠습니다.

<ul id="menu">
    <li class="tab_bloghome"><a href="[#\#_blog_link_##]">HOME</a></li>
    <li class="tab_taglog"><a href="[#\#_taglog_link_##]">TAG LOG</a></li>
    <li class="tab_media"><a href="[#\#_blog_link_##]media">MEDIA LOG</a></li>
    <li class="tab_guestbook"><a href="[#\#_guestbook_link_##]">GUESTBOOK</a>
        <ul>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 1</a>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 2</a></li>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 3</a></li>
            <li class="tab_notice"><a href="[#\#_blog_link_##]">folder 4</a></li>
        </ul>
    </li>
</ul><!-- //menu close // -->

이미지없는 네비게이션 메뉴를 잘보시고 따라하세요.

이제 css 를 수정해보겠습니다.

css 수정.

마찬가지로 menu 부분을 찾아서 삭제합니다. 아래 이미지처럼 menu 부분부터 lava lamp 에 해당하는 코드모두 삭제합니다.

그런다음 이미지없는 네비게이션 menu 부분의 css 코드를 붙여넣으면 됩니다.

전 딱 한부분만 수정해보니 잘 되었습니다.

#menu { 
	margin:20px auto; 
}

기존의 코드는 margin 이 60px 였지만 20만 해주면 딱 들어갑니다. 수정한 네비게이션을 잠시 두니까 한번 보세요.