맨위로? Go Top 블로그 상단으로 가는 버튼 만들기.
‥…····──────━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━──────····…‥
맨위로? Go Top 블로그 상단으로 가는 버튼 만들기.
이번에는 블로그 상단으로 가는 버튼을 추가 해 봅시다.
간단하게~!
쿡! 눌러 주시고.
일단 다음 파일을 받으시고 아래 내용 보시면서
사용자에 맞게 수정해 봅시다.
|
|
xxxi-맨위로이동 버튼.txt<a style="position:fixed;top:auto; bottom:150px; right: 20px;" href="#container" id="return_top"><img src ='./images/rtop.png'></a>
이전에 사용 했던 position에
눌럿을때 블로그 상단으로 향하는 버튼을 넣는 겁니다.
위에 색이 다른 3가지만 직접 지정해 주시면 되는데요.
앞에서 부터
버튼을 넣을 위치
버튼을 눌럿을때 이동하는 위치
버튼의 이미지
입니다.
첫번째
"position:fixed;top:auto; bottom:150px; right: 20px;" |
fixed; = 스크롤에 상관없이 화면 특정위치 고정(따라 다닙니다.)
top: auto; = 위쪽에서 의 위치 자동(빼셔도 상관 없습니다.)
bottom:150px; = 아래쪽에서 150픽셀 위로
right:20px; = 오른쪽에서 20픽셀 왼쪽으로
위의 영역을 사용자에 맞게 수정 하면 됩니다.
px 대신 %로 지정 하셔도 됩니다.
예) bottom: 50%; right:50%; = 버튼이 화면 정중앙에 위치 합니다.
그리고
두번째
href="#container" |
이부분이 버튼을 눌럿을때 이동 하게 될 위치 입니다.
저 같은 경우에는 container 영역으로 이동 합니다.
이 부분의 확인은 보통
관리자 > HTML/CSS 편집 > HTML/CSS 탭 > skin.html
에서
<body> 바로 다음에 나오는 <div id=" ○ ○○○">
○○○○ 부분 입니다.
블로그마다 많이 다를 수 있는데요.
티스토리의 경우 TOP나 아니면 wrapper일 수도 있고요.
다른 경우도 많습니다.
앞에 #을 꼭 붙여야 해요~
그리고 마지막
세번째
img src ='./images/rtop.png' |
버튼의 이미지 입니다.
이미지의 경우 사용자가 원하는 이미지를
관리자 > HTML/CSS 편집 > 파일업로드 탭
에 추가 하시고
업로드 한 파일명을 적으시면 됩니다.
마무리
본인에 맞게 모두 수정을 완료 하셨다면
관리자 > HTML/CSS 편집 > HTML/CSS 탭 > skin.html
으로 이동
</body> 바로 앞에 붙여 넣으시면 됩니다.
이제 저장을 누르시고.
적용이 잘 되었는지 확인 해 보시면 됩니다.
본 글 때문에 생기는 문제는 작성자는 책임 지지 않습니다.
사용 자는 충분한 정보와 지식을 갖춘 후 사용 하시길 권장 합니다.
'Delete' 카테고리의 다른 글
| 엑스페리아 레이 (XPERIA Ray) 루팅 하는 방법, 루팅이란? (14) | 2012.05.11 |
|---|---|
| 소니 에릭슨 엑스페리아 레이(Sony Ericsson Xperia Ray) 상세 스펙 (2) | 2012.05.11 |
| 다음 뷰온 위치 지정하기, 따라다니는 뷰온, 기다리는 뷰온 (5) | 2012.04.18 |
| 드림하이2 10화중.. (0) | 2012.03.24 |
| 쥬라기 코그모 / 왕나비 코그모 가격 영구 인하 (0) | 2012.03.24 |
