[제 티스토리 블로그의 상단 메뉴. 다른 블로그와 다르게 메뉴가 2개 더 있습니다]
제 티스토리 블로그엔 다른 블로그와 다르게 메뉴가 더 있습니다
바로 블로그와 포토로그, 그리고 반대쪽에있는 티스토리가 그것이죠
(지역로그와 미디어로그는 제거했습니다)
[빨간색으로 구분지어준곳이 추가 메뉴(클릭요망)]
많은 사람이 사용하는 네이버 블로그와는 다르게
티스토리는 HTML등을 수정해서 손봐야합니다
전 기초적인 HTML밖에 모르므로 전체적으로 수정하거나 추가할때 어렵긴하지만
메뉴수정은 특별한 지식없이 할 수 있습니다
단, 스킨을 수정할때는 다른 티스토리 블로그를 만들어서 먼저 테스트해주세요
티스토리는 하나의 계정당 5개의 티스토리 블로그를 만들 수 있습니다
진행에 사용한 스킨은 이번에 새로나온 스킨인 Pure Black (Text) 을 사용하겠습니다
다른 스킨 역시 동일한 방법으로 수정할 수 있습니다
스킨위자드 및 사이드바 설정으로 기본적인 설정을 해주고
HTML/CSS 편집 모드로 들어갑니다
아- 복잡한 HTML이 보입니다;;
우리가 수정해야할건 상단의 메뉴이기때문에, 대체적으로 금방 찾을 수 있습니다
아래의 이미지를 보면 더 쉽게 이해하실 수 있을겁니다
개인적으로 필요없다고 생각하는 지역로그와 미디어로그를 제거해보겠습니다
지역로그와 미디어로그를 지울땐 다른부분까지 같이 지워지지않도록 신경써주세요
자, 이제 새로운 메뉴를 추가해봅시다
추가할때는 꼭 <div class="blogMenu"> 아래쪽에 추가해주셔야합니다
<a href="추가하고싶은 글 또는 사이트의 주소" [추가 명령]>표시할 텍스트</a>
위와 같이 추가해주시면 됩니다
파란색으로된 '추가하고싶은 글 또는 사이트의 주소'는 인터넷 주소를 말합니다
예를들어 이곳의 주소인 http://alwaysgoon.tistory.com/ 를 넣어주면
빨간색으로된 '표시할 텍스트'를 눌렀을 경우 http://alwaysgoon.tistory.com/ 로 이동하게 되죠
빨간색으로된 '표시할 텍스트'에는 말 그대로 표시할 텍스트로 적으시면 됩니다
제 티스토리 블로그로 주소를 정했다면, '언제나 피어있는 꽃' 정도로 해주면 되겠군요
초록색으로된 '[추가 명령]'은 고급기능입니다
아마 이 추가명령을 넣지않았다면, 사용하고있는 인터넷창 그대로 사이트가 바뀔겁니다
새창으로 표시하고싶을때, 또는 추가적인 표시를 하고 싶을때 이 추가명령을 사용하면 됩니다
사용하는 추가명령은 아래와 같습니다
target=_self 를 사용하는 경우는, 같은 주소내의 티스토리에서 이동할 경우에 주로 쓰입니다
target=_blank 를 사용하는 경우는, 다른 주소의 사이트로 이동할 경우에 주로 쓰입니다
title="표시할 텍스트" 는 마우스를 가져갔을때 추가적으로 표시되는 텍스트입니다
(마우스를 가져가고, 클릭하지않으시면 추가 텍스트를 보실 수 있습니다)
자, 그럼 티스토리로 링크를 걸어봅시다
새창으로, 표시할 텍스트는 티스토리
추가적으로 표시할 텍스트는 '티스토리 - 수많은 사람들의 상상력'으로 하겠습니다
<a href="http://www.tistory.com" title="티스토리 - 수많은 사람들의 상상력" target=_blank>티스토리</a> |
위의 HTML소스를 <div class="blogMenu"> 아래쪽에 추가해주면
티스토리의 상단 메뉴가 추가됩니다
자, 그럼 적용된 제 백업 티스토리로 이동해봅시다
위 링크를 클릭하면, 상단의 우측에 티스토리 가 있는걸 보실 수 있습니다
마우스를 가져가면 티스토리 - 수많은 사람들의 상상력 라고 나오는군요
클릭하면 새창으로 티스토리로 이동합니다
어...그런데 뭔가 좀 부족합니다
제 티스토리 블로그의 블로그와 포토로그는 분명 왼쪽에있는데
우리가 위에서 추가한 티스토리는 오른쪽에 있습니다
이건 style.css 에서 blogMenu 를 찾아 수정하면 되는데
이건 조금 복잡할수도있으니 다음에 알아보도록하고
우리는 수동으로 이동시켜줍시다(....)
바로 공백을 이용하는 방법입니다
ㄱ을 입력하고 한자키를 누른후 숫자 1을 눌러주면 공백칸이 생깁니다
이 공백칸을 추가한 HTML소스 뒤에다가 연속해서 넣어주면
그만큼 사이가 벌어집니다
미리보기해가며 공백을 추가하며 원하는 위치로 바꿔봅시다
추가적으로 <br> (줄바꿈)을 이용해서 2줄로된 메뉴를 만들 수 있지만
그건 다음에 알아보도록하도 이만 마치겠습니다
티스토리는 HTML등을 수정해서 손봐야합니다
전 기초적인 HTML밖에 모르므로 전체적으로 수정하거나 추가할때 어렵긴하지만
메뉴수정은 특별한 지식없이 할 수 있습니다
단, 스킨을 수정할때는 다른 티스토리 블로그를 만들어서 먼저 테스트해주세요
티스토리는 하나의 계정당 5개의 티스토리 블로그를 만들 수 있습니다
진행에 사용한 스킨은 이번에 새로나온 스킨인 Pure Black (Text) 을 사용하겠습니다
다른 스킨 역시 동일한 방법으로 수정할 수 있습니다
스킨위자드 및 사이드바 설정으로 기본적인 설정을 해주고
HTML/CSS 편집 모드로 들어갑니다
아- 복잡한 HTML이 보입니다;;
우리가 수정해야할건 상단의 메뉴이기때문에, 대체적으로 금방 찾을 수 있습니다
아래의 이미지를 보면 더 쉽게 이해하실 수 있을겁니다
[빨간 네모로 표시한곳이 상단 메뉴]
개인적으로 필요없다고 생각하는 지역로그와 미디어로그를 제거해보겠습니다
지역로그와 미디어로그를 지울땐 다른부분까지 같이 지워지지않도록 신경써주세요
[드래그해서 지워주고 미리보기 또는 저장을 하면 지역로그와 미디어로그가 사라집니다]
자, 이제 새로운 메뉴를 추가해봅시다
추가할때는 꼭 <div class="blogMenu"> 아래쪽에 추가해주셔야합니다
<a href="추가하고싶은 글 또는 사이트의 주소" [추가 명령]>표시할 텍스트</a>
위와 같이 추가해주시면 됩니다
파란색으로된 '추가하고싶은 글 또는 사이트의 주소'는 인터넷 주소를 말합니다
예를들어 이곳의 주소인 http://alwaysgoon.tistory.com/ 를 넣어주면
빨간색으로된 '표시할 텍스트'를 눌렀을 경우 http://alwaysgoon.tistory.com/ 로 이동하게 되죠
빨간색으로된 '표시할 텍스트'에는 말 그대로 표시할 텍스트로 적으시면 됩니다
제 티스토리 블로그로 주소를 정했다면, '언제나 피어있는 꽃' 정도로 해주면 되겠군요
초록색으로된 '[추가 명령]'은 고급기능입니다
아마 이 추가명령을 넣지않았다면, 사용하고있는 인터넷창 그대로 사이트가 바뀔겁니다
새창으로 표시하고싶을때, 또는 추가적인 표시를 하고 싶을때 이 추가명령을 사용하면 됩니다
사용하는 추가명령은 아래와 같습니다
[추가명령]에 target=_self 를 넣으면 사용하고있는 창에서 이동합니다
[추가명령]에 target=_blank 를 넣으면 새창으로 이동합니다
[추가명령]에 title="표시할 텍스트" 를 넣으면 '표시할 텍스트'가 표시됩니다
target=_self 를 사용하는 경우는, 같은 주소내의 티스토리에서 이동할 경우에 주로 쓰입니다
target=_blank 를 사용하는 경우는, 다른 주소의 사이트로 이동할 경우에 주로 쓰입니다
title="표시할 텍스트" 는 마우스를 가져갔을때 추가적으로 표시되는 텍스트입니다
(마우스를 가져가고, 클릭하지않으시면 추가 텍스트를 보실 수 있습니다)
자, 그럼 티스토리로 링크를 걸어봅시다
새창으로, 표시할 텍스트는 티스토리
추가적으로 표시할 텍스트는 '티스토리 - 수많은 사람들의 상상력'으로 하겠습니다
<a href="http://www.tistory.com" title="티스토리 - 수많은 사람들의 상상력" target=_blank>티스토리</a> |
위의 HTML소스를 <div class="blogMenu"> 아래쪽에 추가해주면
티스토리의 상단 메뉴가 추가됩니다
자, 그럼 적용된 제 백업 티스토리로 이동해봅시다
위 링크를 클릭하면, 상단의 우측에 티스토리 가 있는걸 보실 수 있습니다
마우스를 가져가면 티스토리 - 수많은 사람들의 상상력 라고 나오는군요
클릭하면 새창으로 티스토리로 이동합니다
어...그런데 뭔가 좀 부족합니다
제 티스토리 블로그의 블로그와 포토로그는 분명 왼쪽에있는데
우리가 위에서 추가한 티스토리는 오른쪽에 있습니다
이건 style.css 에서 blogMenu 를 찾아 수정하면 되는데
이건 조금 복잡할수도있으니 다음에 알아보도록하고
우리는 수동으로 이동시켜줍시다(....)
바로 공백을 이용하는 방법입니다
ㄱ을 입력하고 한자키를 누른후 숫자 1을 눌러주면 공백칸이 생깁니다
이 공백칸을 추가한 HTML소스 뒤에다가 연속해서 넣어주면
그만큼 사이가 벌어집니다
미리보기해가며 공백을 추가하며 원하는 위치로 바꿔봅시다
추가적으로 <br> (줄바꿈)을 이용해서 2줄로된 메뉴를 만들 수 있지만
그건 다음에 알아보도록하도 이만 마치겠습니다
트랙백 주소 : http://alwaysgoon.tistory.com/trackback/305
우와, 좋은 정보 감사드려요!
방금 적용해봤는데, 제대로 나왔습니다-_-*
비밀댓글 입니다
아=ㅁ=
저 초대장 받으려면 메일 주소가 필요한가요??
비밀댓글 입니다
죄송합니다
티스토리 초대장 배포는 하지않습니다
(네이버 블로그 서로이웃 제외)
초대장이 필요하시다면
http://www.tistory.com/invitation/?_top_tistory=left_invitation
로 이동해주시기 바랍니다
좋은정보 감사합니다 !! ^^
감사합니다^^
비밀댓글 입니다
음, 메뉴를 그림으로 사용하고 싶다는 말씀이신가요?
원하는 영억에 클래스를 등록하고
CSS에서 해당 클래스에 대한 설정으로 아래처럼 해주세요
.클래스명 {
background-image: url(그림주소);
background-repeat: no-repeat;
}
일단 제가 정확하게 이해를 못 하고 있어서- _ㅠ;
부족한점은 메일이나 방명록등에 알려주시기 바랍니다
비밀댓글 입니다
가능합니다. 티스토리에서 위치로그와 태그로그, 방명록, 키로그를 지원하므로, 이걸 이용하면 할 수 있습니다만 역시 제한적이겠죠
공지사항으로 원하는 글을 작성한뒤, 그 주소를 메뉴에 링크를 걸어서 출력하는 방법도 있습니다
좋은 정보네요. 잘 보고 갑니다
와!
정말 찾고 있던 정보인데 ㅠㅠ
정말 감사합니다!!ㅎㅎ
사막에서 오아시스 찾은 기분이에요 ㅎ
오오....HTML에 완전 까막이라서 답답하던 참에....감사해요^^;
아...다른데서 완전 헤매고 있었는데 겨우 찾았네요..
갈라진 땅에 내리는 빗줄기 같았다고 할까요..^^;;고마워요~^^
티스토리 처음 접해서 어리버리 하고 있는데...
너무 좋은 정보네요..^^ 감사합니다~