텀블러 메뉴 만들기(1)

텀블러메뉴는 모바일용 기본메뉴와 PC용 코드메뉴로 나누어지고

만든 메뉴에 링크할 주소는 TAG주소와 list주소로 나눌수 있다.

모바일용 기본메뉴는 텀블러 관리자 메뉴에서 바로 링크주소를 걸면 되지만

PC용 메인메뉴는 Edit HTML에서 코드로 링크주소를 넣어주어야한다

텀블러 메뉴는 기본적으로 태그(Tag)를 이용하여 만든다.

링크주소형식은 http://ID.tumblr.com/tagged/태그명 으로

기본메뉴와 코드메뉴가 동일하게 링크주소가 설정되어야한다.

List주소를 메뉴에 링크 시키려면 목록 페이지 주소를 사용하면 된다.

설정된 메뉴는 기본메뉴는 왼쪽상단에, 코드메뉴는 타이틀 밑에 나타난다.

1.기본메뉴 만들기

 관리자(dashboard)->꾸미기(customize)->+Add a page->

show a link to this page활성화, 주소:ID.tumblr.com/tagged/태그명,

Page Title "메뉴명"입력, 내용입력후 Update Preview클릭, Save클릭

<기본주소 만들기>

<기본메뉴 보기>

2.코드메뉴 만들기

 관리자(dashboard)->꾸미기(customize)->Edit HTML

->body안에 다음 코드를 헤더(id="header")다음에 넣는다.

->head안에 다음 코드를 CustomCSS전에 넣는다.

위의 마진(margin: 10px)은 메뉴간의 간격이고, font-size:20px 글자 크기, color:#77787b;} 는 글자색

text-align:center; 메뉴 중앙정렬, margin: 1px 0;} 타이틀과 메뉴의 간격을 나타낸다.

<코드메뉴 보기>

결론적으로 텀블러 메뉴는 모바일웹에서 볼수 있는 기본메뉴와 PC웹에서 볼수 있는 코드메뉴로 나누어진다.

기본메뉴와 코드메뉴는 같은 태그 주소(http://ID.tumblr.com/tagged/태그명)로 연결되게 만들어서

모바일웹 으로 메뉴를 볼때는 기본메뉴로, PC웹에서 메뉴를 볼때는 기본메뉴 또는 타이틀 아래 있는 메뉴를 사용하게 한다.

 

(출처: 기본메뉴 : http://tyrblue.blog.me/50171433096 

         코드메뉴 : http://i-am-emma-kwon.tumblr.com/post/73315800491 )