본 설명을 따라하기 전, 반드시 본인 블로그의 skin.html, style.css 파일을 백업을 받아 놓으세요.
아래 블로그를 클릭하면 블로그 우측 상단에 아래와 같이 메뉴바가 보입니다. 원래는 없던 것을 새로 설치한 것인데.. 설치를 원하시는 분들은 따라하시면 됩니다.
본인이 원하는 메뉴바 디자인을 다운로드 받는다. 여기서는 본 블로그에 설치된 메뉴바를 기준으로 설명하겠습니다. (메뉴바에 따라 소스코드 등이 다르기 때문에 다른 메뉴바를 선택했을 경우, 설명과 맞지 않을 수도 있습니다.)
아래 링크를 클릭해서 본 블로그에 설치된 메뉴바와 동일한 메뉴바 소스를 다운로드 받습니다.
http://apycom.com/menus/1-black.html
만약 다른 색상의 메뉴바(디자인은 동일)를 원할경우 위 링크를 클릭하면 우측에 색상을 선택하는 옵션이 있습니다. 자신의 블로그에 맞는 색상을 선택하면 됩니다.
다운받은 압축파일을 풀면 아래와 같은 여러개의 파일이 보일 것입니다.
먼저, index.html 파일을 열고 아래 내용대로 따라합니다.
수정을 했으면, 블로그 관리자 모드 skin.html 속 <head> ..... </head> 사이에 수정한 소스를 넣어 줍니다. 아래와 같이. 모두 3개가 skin.html 속에 들어가게 됩니다. 1) 붉은색 네모칸 안의 소스, 2) 파란색 네모칸 안의 소스, 3) <div id="menu"> ... </div> 에 포함된 소스
그다음 menu.css 파일을 열어서 아래와 같이 수정해 줍니다.
위 과정까지 따라했으면 이제 마지막으로 압축을 푼 파일 중 아래 파일들을 내 블로그에 올립니다.
[HTML/CSS 편집 => 파일업로드] 선택
단 이 경우 본인이 올리고자 하는 파일들 이름(본 예제의 경우 menu.css, menu.js, jquery.js, 그리고 이미지 폴더(images)안 그림파일들)과 기존에 파일목록이 이미 업로드 되어 있는 파일 들 중 이름이 겹치는 것이 없는지 여부를 꼭, 반드시 확인합니다. 예를 들어, menu.css, menu.js, jquery.js 파일 및 그림파일(.gif, .png 확장자를 가진 파일)의 이름과 같은 것이 위 파일목록에 있는지 여부를 꼭 확인합니다.
동일한 이름의 파일이 없다면 아래 파일들을 업로드 합니다. (만약 동일한 파일명의 파일이 존재한다면 아래 파일들 이름을 바꿔줘야 하는데, 과정이 좀 번거롭습니다.)
menu.css
menu.js
jquery.js
그리고 images 폴더 속 이미지 파일 들.
<= images 폴더를 그냥 올리는 것이 아니라, 폴더 속에 있는 그림파일을 선택해서 올려줍니다.
본 설명을 따라하기 전, 반드시 본인 블로그의 skin.html, style.css 파일을 백업을 받아 놓으세요.
주의!! 제작사 링크를 삭제하면 메뉴바가 보이지 않는다. 블로그 내 적당한 곳에 아래와 같이 제삭사 링크를 걸어 놓아야. 눈에 잘 띄는 곳일 필요는 없고 블로그 하단이나 사이드바 아래 쪽에 삽입하면 된다.
'티스토리|애드센스' 카테고리의 다른 글
| 티스토리 디자인(레이아웃)의 모든 것 - 초보 블로거 및 블로그를 위한 디자인 특강 (4) | 2013.09.23 |
|---|---|
| 티스토리 블로그에 올린 사진이 잘릴 때 (0) | 2013.09.23 |
| 테이블(박스)에 상하 공백 문제 - 테이블 줄사이 간격이 넓어질 때 (0) | 2013.09.19 |
| 애드센스 계정이 영어 페이지로 바뀌었얼 때 (0) | 2013.09.11 |
| 리얼센스 이용약관 개정안내(2013년 9월 9일 부터 적용) (0) | 2013.08.31 |
