강좌 및 설정/블로그 만들기

티스토리 네비게이션 만들기

웹 개발자의 비상 2024. 4. 10. 15:57

티스토리 블로그에서 카테고리로 만들 것을 네비게이션에 추가하는 방법입니다. 네비게이션이 무엇인지, 사용자 카테고리는 어떻게 내비게이션에 추가하는지에 대해 설명합니다.

카테고리 만들기와 이어지는 내용입니다. 카테고리 만들기 하지 않으신 분들은 아래 강좌를 보신 후 돌아와 주세요

2024.04.10 - [강좌 및 설정/블로그 만들기] - 티스토리 카테고리 만들기

 

티스토리 카테고리 만들기

티스토리 블로그에서 카테고리 만들고 관리하는 방법에 대해 알아봅니다. 카테고리가 무엇인지, 어떻게 만들고 수정할 수 있는지에 대한 설명입니다. 웹과 관련된 거의 모든 플랫폼(웹사이트,

dance2i.tistory.com

 

사이트맵을 통해 구성된 메뉴들은 보통 홈페이지 상단에 위치하는데 이것을 내비게이션이라 합니다. 홈페이지를 안내하는 역할을 하는 녀석들이죠. 

 

남양주시청 네비게이션

 

남양주시청 홈페이지의 내비게이션입니다. 현재 시민참여에 마우스를 이동한 것이고요 시민참여 밑으로 시민참여마당, 시민제안, 주민참여포인트 제도 등 몇 가지의 하부 메뉴들이 보이네요

 

티스토리 블로그에서도 이렇게 내비게이션을 구성할 수 있습니다. 몇가지 종류로 구성할 수 있지만 일단은 카테고리를 만들었으니 카테고리만 가지고 네비게이션을 구성해 보도록 하겠습니다.

이전과 동일하게 관리자페이지와 블로그 홈 2개 화면을 탭으로 띄워주세요

 

관리자페이지와 블로그 홈

 

블로그 홈으로 현재 상태를 확인하겠습니다.

 

블로그 홈화면

 

현재 상태는 카테고리는 만들었지만 네이게이션을 보이지 않습니다. 기본적으로는 내비게이션이 없다는 거네요

 

 

반응형

 

 

관리자페이지를 클릭하여 돌아옵니다.

 

관리자페이지 스킨편집

 

마우스를 스크롤하여 꾸미기 > 스킨편집을 클릭합니다.

 

스킨평집 창

 

스킨편집 창이 탭으로 추가되어 만들어지고 관리자페이지 창과 블로그 홈 창 사이로 들어왔습니다. 지금 작업하고 있는 창은 스킨편집 창입니다.

자꾸 탭을 언급하는 이유는 작업을 하다 보면 내가 어디서 작업하는지를 혼돈할 수 있기 때문입니다. 지금처럼 여러 개의 창을 탭으로 띄우면서 작업할 경우 간혹 관리자페이지에서 할 작업을 블로그 홈에서 찾는 경우가 발생하기 때문이죠. "어 왜 없지?"라고 혼돈하지 마시고 내가 지금 어떤 창에서 작업하는지를 반드시 확인하시기 바랍니다.

현재는 총 3개의 탭이 띄워 저 있으며 지금 작업창은 스킨편집 창입니다.

 

스킨편집 네비게이션

 

스킨 편집 부분에서 마우스를 스크롤하여 내비게이션에 사용 안 함 버튼을 클릭한후 티스토리 메뉴 활용을 클릭합니다. 위 그림의 순서로 하시면 됩니다. 그리고 최종 우측 상단에 적용 버튼을 클릭하여 적용합니다.

 

여기까지 하셨다면 스킨편집창에서의 작업은 끝났습니다. 블로그 홈화면으로 돌아와서 새로 고침 버튼을 클릭하여 적용된 것을 확인합니다.

 

블로그 홈 화면

 

위 그림의 순으로 클릭하면 내비게이션이 활성화된 것이 확인됩니다. 이제 스킨편집 창(두 번째 탭 화면) 필요 없으니 x 버튼을 클릭하여 종료하고 관리자페이지 탭과 블로그 홈 탭만 남겨 놓습니다. 그리고 다시 관리자페이지 탭을 클릭하여 관리자 화면으로 들어갑니다.

 

 

728x90

 

 

관리자페이지 화면

 

좌측 메뉴 중에 꾸미기 > 메뉴를 클릭합니다.

 

기본메뉴 페이지

 

초기 메뉴 화면은 이렇습니다. 홈, 태그, 방명록이 기본으로 세팅되어있죠. 홈은 블로그 홈으로 이동하는 버튼입니다. 태그와 방명록은 나중에 다시 설명드리고 일단은 삭제하겠습니다.  마우스를 태그 쪽으로 이동하면 우측에 삭제 버튼이 활성화됩니다. 클릭하여 삭제합니다. 같은 방법으로 방명록도 삭제해 주세요.

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 

 

이제 우리가 만들었던 카테고리를 내비게이션에 추가하겠습니다.

메뉴추가 버튼을 클릭합니다.

 

네비게이션 메뉴추가

 

메뉴에 넣을 내용을 입력합니다. 저의 경우 카테고리에 영화, 드라마, 애니메이션을 만들었으니 3가지를 모두 추가하려고 합니다. 그래서 먼저 영화를 입력한 후 직접입력을 클릭한뒤 카테고리를 클릭하여 선택합니다.

 

네이게이션 메뉴 추가

 

카테고리로 선택하고 나면 우측에 카테고리 전체 보기가 활성화됩니다. 이 것을 다시 클릭하여 영화를 선택합니다.

마지막으로 우측에 추가 버튼을 클릭하면 "영화" 메뉴가 추가됩니다.

드라마와, 애니메이션도 메뉴 추가 버튼을 클릭 후 동일한 방법으로 추가합니다.

 

네비게이션 메뉴 추가

 

모든 메뉴를 구성하셨다면 반드시 변경사항 저장 버튼을 클릭합니다. 잊지 말아 주세요

이제 확인만 남았습니다. 

 

네비게이션 적용 확인

 

 

그림의 순서대로 상단 블로그 홈 탭을 클릭하고, 새로고침하시면 내비게이션이 설정된 것을 확인할 수 있습니다.

 

 

 

728x90