[블로거 꾸미기] 드랍 다운(Drop Down) 탭 만들기

1. 메뉴 소스 파일 다운하기
CSS Menu Maker에 들어가서 원하는 디자인의 탭을 선택합니다.

저는 Grey Impression Drop Down Menu를 선택하였습니다.





그리고 Source파일을 다운해줍니다. 소스 파일에는 css파일과 html 데모 파일, 그리고 이미지 파일들이 있는 images폴더가 있을 겁니다.

2. CSS 추가하기
Notepad++나 sublime text 등과 같은 코드 편집기로 style.css파일을 열어줍니다. css파일안에 있는 내용들을 전부 복사해줍니다.

그리고 CSS를 블로거에 추가할 건데 두 가지 방법이 있습니다. 템플릿>맞춤설정>고급>CSS추가에 복사한 내용을 붙여넣는 방법과 템플릿>HTML편집에 복사한 내용을 붙여넣는 방법이 있습니다. 전자는 간단하므로 후자를 설명하겠습니다.

템플릿>HTML편집으로 들어갑니다. <b:skin>...</b:skin>이라 적힌 부분을 클릭합니다.

그러면 많은 내용들이 나타날 건데, 쭉쭉 내리다보면 }]]></b:skin>을 찾을 수 있을 겁니다. 바로 앞에다가 코드를 입력하시면 됩니다.

3. HTML 추가하기
Notepad++나 sublime text 등과 같은 코드 편집기로 index.html를 열어줍니다. 안에 들어 있는 내용들 중에 다음 부분을 복사합니다.

그리고 템플릿>HTML편집으로 들어가 해당 내용을 붙여넣기 할겁니다. 탭에 헤더 바로 아래 나타나도록 다음 부분에 코드를 입력합니다.

</header>

<!--여기다 코드를 입력합니다.-->

<div class='tabs-outer'>

탭을 클릭하였을 때 나타나는 페이지를 설정하기 위해서는 위 코드에서 #부분에 해당 URL을 입력하시면 됩니다.








제 블로그에도 해당 탭을 적용하였습니다. 아래는 결과입니다.