티스토리 뷰

티스토리 블로그에 사이드메뉴 만드는 법

반응형

티스토리 블로그는 자유롭게 변형이 가능하다는 것이 큰 특징이란다. 그럼 아는 범위내에서 내 맘대로 바꾸면서 자신만의 공간으로 만들어가면 된다는 말씀인데. 그러나 HTNL과 CSS에 관한 지식이 워낙에 짧은지라 그때 그때 메모해두지 않으면 번거로운 절차를 찾아서 인터넷 바다를 헤매이고 다니기가 일쑤다. 





방법은 하나! 기록해 놓는 것이 최선의 방법. Yongzz님의 Ycafe 스킨을 쓰고 있는데 스킨에 대한 만족도는 매우좋음. 변형도 쉽고 비교적 HTML과 CSS의 소스 파일이 간단해서 내 맘대로 변형이 쉬워 아주 만족하고 있는중. 그러나 상단 메뉴 부분이 없어서 방문자의 네비게이션에 혼란을 준다는 점인데... 그래서 메뉴를 어디에 배치할까 궁리하다가 sideway(본문구석)에 플로팅메뉴로 배치하기로 결심하고 작업시작.


STEP # 1


떠돌아 다니는 소스 캐취한다. 그전에 내가 만들다 없애버린 플로팅 버튼 소스 파일을 활용하기로 하고 아래의 파일을 쬐금만 수정하면 된다. 일단 첫 단계는 첨부파일을 메모장으로 열어서 수정 준비!!!


SIDEWAYMENU.txt


STEP # 2


파일에서 href="해당주소(자신의 주소 입력)"부분을 수정한다. http://OOO.tistory.com/OOO/OOO을 자신이 이동하고자하는 주소로 수정해 주어야 제대로 링크가 걸린다.



STEP # 3


적당한 이미지를 준비한 후 업로드 한다. 이미지는 포토샵이나 이미지 생성 프로그램으로 만들면 됩니다. 포토스케이프로 만드셔도 되고요. 사이드 쪽에 배치할 것이니 너무 크면 안되니까 넓이는 77px, 높이는 22px 정도로 만들면 딱 좋다. 만들고 난 후에는 이미지를 업로드. 이제 모든 준비 끝.


STEP # 4


메모장에 링크가 걸리게 될 주소수정(STEP #2 의 과정)를 수정하고 업로드한 이미지 소스 파일의 주소를 수정해 준다. img src="어쩌구저쩌구"를 자신의 이미지 주소(상대경로)로 수정해 준다. 가령 ./images/이미지파일이름.jpg 뭐 이런식으로. 물론 확장자가 .gif 나 .png 라면 그대로 올려서 링크를 연결해 주어야 한다. 마지막으로 저장. 끝!! ^^ 우와아! 그 소스파일을 어디에 집어넣느냐면 html 수정에서 </head><body>사이에 놓어야 한다는 말씀!!




반응형

Recent Comments