티스토리 상단 메뉴바 & 홈 버튼 만들기

  티스토리엔 다양한 스킨이 배포되어 있지만 예쁜 상단 메뉴를 가지고 있는 스킨은 찾기 힘듭니다. 또한 마음에 드는 스킨을 찾았는데도 불구하고 상단에 홈 버튼이 없으면 블로그를 이용하는 데 불편함이 뒤따릅니다. 저 역시도 이때문에 블로그 운영 초기에 실용성을 위해 블로그 디자인을 포기한 적이 있었습니다. 하지만 'Dynamic Drive CSS Library'를 이용하면 HTML과 CSS 수정을 통해 티스토리 상단 메뉴바와 홈 버튼을 만들 수 있습니다.

#티스토리홈버튼만들기

---

티스토리 상단 메뉴바 만들기

 

1. Dynamic Drive CSS Library로 이동해 상단 메뉴 중 'CSS CODES - Horizontal CSS Menus'를 클릭합니다.

☞ [바로가기] Dynamic Drive CSS Library 홈페이지

2. 여러 개의 상단 메뉴바를 클릭해보며 디자인이 마음에 드는 것을 고릅니다.

#티스토리 상단 메뉴 버튼 만들기

3. 마음에 드는 상단 메뉴바 디자인을 찾았으면 스크롤 바를 내려 The CSS에 있는 모든 코드를 복사합니다.

그 후 티스토리 관리 메뉴의 '꾸미기 - HTML/CSS 편집 - CSS' 탭으로 이동해 복사한 CSS 코드를 붙여넣고 저장합니다.

(Select Code를 클릭하면 전체 코드가 블럭지정 됩니다)

4. CSS 코드 붙여넣기가 끝나면 다시 Dynamic Drive CSS Library로 이동해 이번엔 The HTML에 있는 모든 코드를 복사합니다.

그 후 이전과 같은 방법으로 티스토리 HTML/CSS 편집 탭으로 이동해 복사한 코드를 HTML 탭에 붙여넣습니다.

이때 복사한 코드는 </head> 코드 아래 붙여넣어야 메뉴바가 상단에 위치하게 됩니다.

또한, 운영하는 블로그에 맞게 코드를 수정해주어야 하는데 방법은 다음과 같습니다.

대부분의 상단 메뉴바 코드는 다음과 같은 양식을 포함하고 있습니다.

<li><a href="메뉴 버튼 클릭시 이동할 주소"><span>메뉴 이름</span></a></li>

(위 코드를 추가하거나 삭제해 메뉴 개수를 조절할 수 있습니다)

메뉴 이름 자리에는 메뉴에 표시될 이름을 적어주시면 되고

이동할 주소 자리에는 메뉴 버튼을 클릭 시 표시할 페이지 주소를 입력하시면 됩니다.

메뉴 버튼 이름과 이동시킬 주소를 모두 적었다면

</head> 아래 완성된 HTML 코드를 붙여넣고 저장만 누르면 티스토리 상단 메뉴바 만들기를 위한 모든 설정이 완료됩니다.

기존 큰일 할 남자 메인 페이지(좌)와 메뉴 버튼을 추가한 후 메인 페이지 모습입니다.

---

티스토리 홈 버튼 만들기

위에서 다룬 상단 메뉴바 만들기 포스팅을 조금만 응용하면 쉽게 티스토리 블로그에 홈 버튼을 만들 수 있습니다.

<li><a href="메뉴 버튼 클릭시 이동할 주소"><span>메뉴 이름</span></a></li>

코드에서 메뉴 이름엔 Home 혹은 홈을 적고, 메뉴 버튼 클릭시 이동할 주소에 블로그 주소를 적어주면 됩니다.

큰일 할 남자 블로그로 예를 들자면

<li><a href="http://money2015.tistory.com"><span>홈(Home)</span></a></li>

이렇게 코드를 수정해 추가할 수 있습니다.